<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Animal War</title>
<style type="text/css">
<!--
body {
	background-image: url(img/bg02.jpg);
	background-repeat: no-repeat;
}
#Layer1 {
	position:absolute;
	left:37px;
	top:18px;
	width:338px;
	height:101px;
	z-index:1;
	visibility: inherit;
	background-image: url(img/title00.gif);
	background-color: #FFFFFF;
}
.style1 {color: #FFFFFF}
#Layer2 {
	position:absolute;
	left:17px;
	top:145px;
	width:483px;
	height:374px;
	z-index:2;
}
#Layer3 {
	position:absolute;
	left:27px;
	top:180px;
	width:350px;
	height:350px;
	z-index:1;
	background-image: url(img/tv.gif);
}
#Layer4 {
	position:absolute;
	left:313px;
	top:17px;
	width:90px;
	height:4px;
	z-index:2;
}
#overview {
	position:absolute;
	left:432px;
	top:184px;
	width:488px;
	height:370px;
	z-index:3;
	overflow: auto;
	font-size: small;
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	line-height: normal;
	visibility: hidden;

}
#specification {
	position:absolute;
	left:432px;
	top:184px;
	width:492px;
	height:370px;
	z-index:3;
	overflow: auto;
	font-size: small;
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	line-height: normal;
	visibility: hidden;

}
#story {
	position:absolute;
	left:432px;
	top:184px;
	width:489px;
	height:370px;
	z-index:3;
	overflow: auto;
	font-size: small;
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	line-height: normal;
	visibility: hidden;

}
#features {
	position:absolute;
	left:432px;
	top:184px;
	width:492px;
	height:370px;
	z-index:3;
	overflow: auto;
	font-size: small;
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	line-height: normal;
	visibility: hidden;

}
#demonstration {
	position:absolute;
	left:432px;
	top:184px;
	width:492px;
	height:370px;
	z-index:3;
	overflow: auto;
	font-size: small;
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	line-height: normal;
	visibility: hidden;

}
#screenshot {
	position:absolute;
	left:432px;
	top:184px;
	width:492px;
	height:370px;
	z-index:3;
	overflow: auto;
	font-size: small;
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	line-height: normal;
	visibility: hidden;

}
#reference {
	position:absolute;
	left:432px;
	top:188px;
	width:492px;
	height:370px;
	z-index:3;
	overflow: auto;
	font-size: small;
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	line-height: normal;
	visibility: hidden;
	font-weight: normal;
}
#aboutus {
	position:absolute;
	left:432px;
	top:184px;
	width:492px;
	height:370px;
	z-index:3;
	overflow: auto;
	font-size: small;
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	line-height: normal;
	visibility: hidden;
}
#Layer6 {
	position:absolute;
	left:801px;
	top:613px;
	width:155px;
	height:17px;
	z-index:4;
}
#Layer7 {
	position:absolute;
	left:45px;
	top:216px;
	width:212px;
	height:234px;
	z-index:5;
}
.style5 {
	color: #000000;
	font-weight: bold;
}
#Layer8 {
	position:absolute;
	left:6px;
	top:69px;
	width:176px;
	height:1px;
	z-index:6;
}
#Layer9 {
	position:absolute;
	left:772px;
	top:69px;
	width:183px;
	height:37px;
	z-index:7;
}
.style6 {font-size: large}
.style7 {font-size: medium}
.style8 {font-size: medium; }
-->
</style>
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onload="MM_preloadImages('btn/btn00_on.jpg','btn/btn01_on.jpg','btn/btn02_on.jpg','btn/btn03_on.jpg','btn/btn04_on.jpg','btn/btn05_on.jpg','btn/btn06_on.jpg','btn/btn07_on.jpg');change(0);" scroll=no>
<div class="style5" id="overview">
  <p align="justify" class="style6">OVERVIEW </p>
  <table width="474" border="0" cellpadding="3" cellspacing="3">
    <tr>
      <td><p align="justify" class="style8">Animal War is a 2D single player shooting game for PC  that immerses  player as one of the four animal kingdom leaders in fighting  against the others. </p>
          <p align="justify" class="style8">The game 
            is base on a top-scrolling view and player can control the avatar in 2D motion. A number of significant features in the game such as the Species Unique Attack, avator &amp; weapon Level Up System, and the game balance Score System can enormously raise your interest in this game.</p></td>
      <td><p><img src="img/screenshot_00.jpg" width="180" height="202" border="3" /></p>
          <p>&nbsp;</p></td>
    </tr>
  </table>
</div>
<div class="style5" id="specification">
       <p class="style6">SPECIFICATION</p>
      <h3 class="style7">Programming Language : <a href="http://java.sun.com/javase/downloads/index.jsp" target="_blank">Java (J2SE 1.6)</a> or  <a href="http://java.sun.com/javame/downloads/index.jsp" target="_blank">(J2ME)</a> </h3>
    <ul class="style7">
      <li>Platform independent</li>
      <li>Rich graphics and sound APIs</li>
    </ul>
    <h3 class="style7">Development platform : <a href="http://www.eclipse.org/downloads/" target="_blank">Eclipse</a> - Java SDK  </h3>
    <ul class="style7">
      <li >User friendly interface</li>
      <li >Java complier and debugger</li>
      <li >Java Syntax and spelling checking</li>
    </ul>
    <h3 class="style7">Requirement : </h3>
    <ul class="style7">
      <li >Java Enabled Machine (PC)</li>
      <li >Mobile Enabled in the future version </li>
  </ul>
</div>
<div class="style5" id="story">
       <p align="justify" class="style6">STORY</p>
       <p align="justify">In the ancient time, the Lord of destruction made four  strongest creatures, flash dragon, fire bird, sonic cat and ice tortoise. Each of the species formed a  kingdom and wanted to rule the Earth, so battles were always happened across  different kingdoms.</p>
       <p align="justify">As each species had their own special power in  fighting, therefore, none of them completely won. As the leader of a kingdom, the  task is to turn over the glued situation and leads the kingdom to the victory  by completely destroy the other three kingdoms. </p>
       <p align="justify">In the beginning of the story, the avatar is a juvenile  leader of its kingdom. As come over each battle with completeness of special  events, the avatar will evolve to acquire more abilities in fighting. As the  avatar getting enough power, the story will finally goes to the stage which  fights against the Lord of destruction.</p>
       <p align="justify">The goal of the game is to completely destroy the  other three kingdoms and the Lord of Destruction. The game will be over if the avatar  life becomes zero.</p>
</div>
<div class="style5" id="features">
       <p class="style6">FEATURES </p>
       <p>Species Unique Attack</p>
       <ul>
         <li>Flash Dragon
           <ul>
             <li>Normal Attack : Thunder Bolt</li>
             <li>Special Attack : Thunder Storm </li>
             <li>Upside : Fast &amp; Linear, Strong in strength</li>
             <li>Downside : Easy to miss</li>
           </ul>
         </li>
         <li>Sonic Cat
           <ul>
             <li>Normal Attack : Whirlwind </li>
             <li>Special Attack : Tornado </li>
             <li>Upside : Easy to catch irregular enemies, Strong in strength </li>
             <li>Downside : Hard to catch normal enemies </li>
           </ul>
         </li>
         <li>Fird Bird
           <ul>
             <li>Normal Attack : Fireball </li>
             <li>Special Attack : Firewall </li>
             <li>Upside : Easy to control, Linear with medium speed </li>
             <li>Downside : Weak in strength </li>
           </ul>
         </li>
         <li>Ice Tortoise
           <ul>
             <li>Normal Attack : Snowball </li>
             <li>Special Attack : Ice Crystal </li>
             <li>Upside : Random in all direction, Fast attack </li>
             <li>Downside : Weak in strength </li>
           </ul>
         </li>
       </ul>
       <p>Level-up System</p>
	   <ul>
	     <li>Weapon Level
           <ul>
             <li>Increase : Bullet "B" item, limit = 5</li>
             <li>Decrease : Avatar die </li>
           </ul>
         </li>
 	     <li>Avatar Level
           <ul>
             <li>Increase : Special condition (Score)</li>
             <li>Decrease : Never </li>
			 <li>Avatar Attribute: Appearance change, strength x2, speed x2, special attack x1.5</li>
           </ul>
         </li>

	   </ul>
       <p>Score System</p>
	   <ul><li>Player - gameplay balance
	   </li>
	   <li>Difficulty progession control</li></ul>
       <p>Mobile Enabled (Next Version) </p>
    <ul><li>Playing Anywhere</li>
	<li>Network Playing</li>
	<li>Multi-Player</li>
</ul>
</div>
<div class="style5" id="demonstration">
       <p class="style6">DEMONSTRATION</p>
       <p class="style5">Online demonstration is currently not available</p>
</div>
<div class="style5" id="screenshot">
       <p class="style6">SCREENSHOT</p>
       <p class="style5">Normal Attack</p>
       <table width="200" border="1">
         <tr>
           <td><div align="center"><a href="img/fire1.JPG" target="_blank"><img src="img/fire1_small.jpg" width="209" height="265" border="0" longdesc="img/fire1.JPG" /></a></div></td>
           <td><div align="center"><a href="img/snow1.JPG" target="_blank"><img src="img/snow1_small.JPG" width="209" height="265" border="0" longdesc="img/snow1.JPG" /></a></div></td>
         </tr>
         <tr>
           <td><div align="center">Fire Ball </div></td>
           <td><div align="center">Snow Ball </div></td>
         </tr>
         <tr>
           <td><div align="center"><a href="img/wind1.JPG" target="_blank"><img src="img/wind1_smal.jpg" width="209" height="265" border="0" longdesc="img/wind1.JPG" /></a></div></td>
           <td><div align="center"><a href="img/laser1.JPG" target="_blank"><img src="img/laser1_small.jpg" width="209" height="265" border="0" longdesc="img/laser1.JPG" /></a></div></td>
         </tr>
         <tr>
           <td><div align="center">Whirlwind</div></td>
           <td><div align="center">Thunder Bolt </div></td>
         </tr>
       </table>
       <p class="style5">&nbsp;</p>
       <p class="style5">Special Attack</p>
       <table width="200" border="1">
         <tr>
           <td><div align="center"><a href="img/sfire.JPG" target="_blank"><img src="img/sfire_small.jpg" width="209" height="265" border="0" /></a></div></td>
           <td><div align="center"><a href="img/ssnow.JPG" target="_blank"><img src="img/ssnow_small.jpg" width="209" height="265" border="0" /></a></div></td>
         </tr>
         <tr>
           <td><div align="center">Fire Wall </div></td>
           <td><div align="center">Ice Crystal </div></td>
         </tr>
         <tr>
           <td><div align="center"><a href="img/swind.JPG" target="_blank"><img src="img/swind_small.jpg" width="209" height="265" border="0" /></a></div></td>
           <td><div align="center"><a href="img/slaser.JPG" target="_blank"><img src="img/slaser_small.jpg" width="209" height="265" border="0" /></a></div></td>
         </tr>
         <tr>
           <td><div align="center">Tornado</div></td>
           <td><div align="center">Thunder Storm </div></td>
         </tr>
       </table>
	          <p class="style5">Level Up System</p>
	          <table width="200" border="1">
                <tr>
                  <td><div align="center"><a href="img/avatorLvl1.JPG" target="_blank"><img src="img/weapon_lv1_small.jpg" width="209" height="265" border="0" /></a></div></td>
                  <td><div align="center"><a href="img/avatorLvl1 copy.bmp" target="_blank"><img src="img/weapon_lv3_small.jpg" width="209" height="265" border="0" /></a></div></td>
                </tr>
                <tr>
                  <td colspan="2"><div align="center">Weapon Level Up </div></td>
                </tr>
                <tr>
                  <td><div align="center"><a href="img/avatorLvl1.JPG" target="_blank"><img src="img/weapon_lv1_small.jpg" width="209" height="265" border="0" /></a></div></td>
                  <td><div align="center"><a href="img/avatorLvl2.JPG" target="_blank"><img src="img/avatarlv2_small.jpg" width="209" height="265" border="0" /></a></div></td>
                </tr>
                <tr>
                  <td colspan="2"><div align="center">Avatar Level Up </div></td>
                </tr>
              </table>
</div>
<div class="style5" id="reference">
       <p class="style6">REFERENCES </p>
       <p class="style5">Sound Effect &amp; Music Loop </p>
       <p class="style9">[1] Flash Kit, Online: <a href="http://www.flashkit.com" target="_blank">http://www.flashkit.com</a>, Last visited: 20th April 2008</p>
       <p class="style9">[2] Partners in Rhyme, Online: <a href="http://www.partnersinrhyme.com/soundfx/Ambience.shtml" target="_blank">http://www.partnersinrhyme.com/soundfx/Ambience.shtml</a>, Last visited: 20th April 2008</p>
       <p class="style9">[3] Free Sound Effects, Online: <a href="http://www.wyomingwebdesign.com/files/pages/free_sound_files.html" target="_blank">http://www.wyomingwebdesign.com/files/pages/free_sound_files.html</a>, Last visited: 20th April 2008 </p>
       <p class="style9">[4] The Recordist, Online: <a href="http://www.therecordist.com/pages/downloads.html" target="_blank">http://www.therecordist.com/pages/downloads.html</a>, Last visited 20th April 2008 </p>
       <p class="style5">2D Anime</p>
       <p class="style9">[1] ワクワクの1頁, Online: <a href="http://k-kamio.hp.infoseek.co.jp/rpg/frame1.html" target="_blank">http://k-kamio.hp.infoseek.co.jp/rpg/frame1.html</a>, Last visited: 16th April 2008</p>
       <p class="style9">[2] First Seed Material, Online: <a href="http://www.tekepon.net/fsm/" target="_blank">http://www.tekepon.net/fsm/</a>, Last visited: 17th April 2008 </p>
       <p class="style5">3D Model </p>
       <p class="style9">[1] RPGツクール2000&amp;2003 素材の国, Online: <a href="http://yuchies.s9.xrea.com/material/movie.htm" target="_blank">http://yuchies.s9.xrea.com/material/movie.htm</a>, Last visited: 23rd April 2008</p>
       <p class="style9">[2] Jeff Molofee's OpenGL Windows Tutorials, <a href="http://www.geocities.com/SiliconValley/Vista/8177/tutorial/nehe.htm" target="_blank">http://www.geocities.com/SiliconValley/Vista/8177/tutorial/nehe.htm</a>, Last visited: 23rd April 2008 </p>
       <p class="style5">Game Engine  </p>
       <p class="style9">[1] ナガク　マサル(Nagaku Masaru),柯志杰譯, "<a href="https://lib.cityu.edu.hk/search/?searchtype=c&searcharg=+%09+QA76.73.J38+N325+2005&searchscope=8&SORT=D&extended=0&SUBMIT=Search&searchlimits=&searchorigarg=t%09Advanced+Java+game+programming" target="_blank">Java Game Programming : algorithm and framework</a>",台北：博碩文化股份有限公司, 2005</p>
      <p class="style9">[2] Croft, David Wallace. , "<a href="http://www.amazon.com/Advanced-Programming-David-Wallace-Croft/dp/1590591232" target="_blank">Advanced Java Game Programming </a>",Berkeley, Calif. : Apress, 2004</p>
       <p class="style9"></p>
</div>


 <div class="style5" id="aboutus">
       <p class="style6">ABOUT US </p>
       <p>Group 03 &#13;</p>

	Members&#13;
       <ul>
         <li>KU Heung-chin (KU)</li>
         <li>FUNG Ka-Hang (Harry)</li>
         <li>YU Kam-fung (Kam)</li>
       </ul>
</div>
 <div id="Layer7"><span class="style1">
   <object id='tv' width="272" height="242" 
      classid='CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95' 
      codebase='http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701'
      standby='Loading Microsoft Windows Media Player components...' type='application/x-oleobject'>
     <param name='fileName' value="video/animal_war_v4.wmv" />
     <param name='animationatStart' value='true' />
     <param name='transparentatStart' value='true' />
     <param name='autoStart' value="true" />
     <param name='showControls' value="true" />
     <param name='loop' value="false" />
     <embed src="video/animal_war_v4.wmv" width="272" height="242" autostart="True" loop="False" filename="video/animal_war_v4.wmv" animationatstart="true" transparentatstart="true" showcontrols="false"></embed>
   </object>
</span></div>
<div id="Layer8">
   <table width="200" border="0" cellpadding="5" cellspacing="5">
     <tr>
       <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btn0','','btn/btn00_on.jpg',1)" onclick="change(0)"><img src="btn/btn00_off.jpg" alt="Overview" name="btn0" width="100" height="22" border="0" id="btn0" /></a></td>
       <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Specification','','btn/btn01_on.jpg',1)" onclick="change(1)"><img src="btn/btn01_off.jpg" alt="Specification" name="Specification" width="100" height="22" border="0" id="Specification" /></a></td>
     </tr>
     <tr>
       <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Story','','btn/btn02_on.jpg',1)" onclick="change(2)"><img src="btn/btn02_off.jpg" alt="Story" name="Story" width="100" height="22" border="0" id="Story" /></a></td>
       <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Features','','btn/btn03_on.jpg',1)" onclick="change(3)"><img src="btn/btn03_off.jpg" alt="Features" name="Features" width="100" height="22" border="0" id="Features" /></a></td>
     </tr>
   </table>

</div>
 <div id="Layer9">
   <table width="200" border="0" cellpadding="5" cellspacing="5">
     <tr>
       <td>        <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Demonstration','','btn/btn04_on.jpg',1)" onclick="change(4)"><img src="btn/btn04_off.jpg" alt="Demonstration" name="Demonstration" width="100" height="22" border="0" id="Demonstration" /></a></td>
       <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Screenshot','','btn/btn05_on.jpg',1)" onclick="change(5)"><img src="btn/btn05_off.jpg" alt="Screenshot" name="Screenshot" width="100" height="22" border="0" id="Screenshot" /></a></td>
     </tr>
     <tr>
       <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('References','','btn/btn06_on.jpg',1)" onclick="change(6)"><img src="btn/btn06_off.jpg" alt="References" name="References" width="100" height="22" border="0" id="References" /></a></td>
       <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('AboutUS','','btn/btn07_on.jpg',1)" onclick="change(7)"><img src="btn/btn07_off.jpg" alt="About us" name="AboutUS" width="100" height="22" border="0" id="AboutUS" /></a></td>
     </tr>
   </table>

 </div>
 <p>
   <script>
function change(i){

document.getElementById("overview").style.visibility = "hidden";
document.getElementById("specification").style.visibility = "hidden";
document.getElementById("story").style.visibility = "hidden";
document.getElementById("features").style.visibility = "hidden";
document.getElementById("demonstration").style.visibility = "hidden";
document.getElementById("screenshot").style.visibility = "hidden";
document.getElementById("reference").style.visibility = "hidden";
document.getElementById("aboutus").style.visibility = "hidden";
switch(i){
case 0:
document.getElementById("overview").style.visibility = "visible";
break;
case 1:
document.getElementById("specification").style.visibility = "visible";
break;
case 2:
document.getElementById("story").style.visibility = "visible";
break;
case 3:
document.getElementById("features").style.visibility = "visible";
break;
case 4:
document.getElementById("demonstration").style.visibility = "visible";
break;
case 5:
document.getElementById("screenshot").style.visibility = "visible";
break;
case 6:
document.getElementById("reference").style.visibility = "visible";
break;
case 7:
document.getElementById("aboutus").style.visibility = "visible";
break;

}

}
 </script>
</p>
</body>

</html>