飞机大战代码及思路

 飞机大战

score:0

 

 

<script> var bg=document.getelementsbyclassname("bgimage"); bg[0].style.top="-700px"; bg[1].style.top="0px"; setinterval(function(){ for(var i=0;i=700){ top=-700; } bg[i].style.top=top+"px"; } },5) var map=document.getelementsbyclassname("map")[0]; var scoretxt=document.getelementsbyclassname("score")[0]; var score=0; function user(){ this.width=60; this.height=70; this.src="./image/14.gif"; this.x=170; this.y=600; this._user=null; this.createuser=function(){ if(this._user==null){ this._user=document.createelement("img"); this._user.style.width=this.width+"px"; this._user.style.height=this.height+"px"; this._user.style.zindex=1; this._user.style.position="absolute"; map.appendchild(this._user); } this._user.style.left=this.x+"px"; this._user.style.top=this.y+"px"; this._user.src=this.src; } this.usermove=function(x,y){ this.x=x-this.width/2; this.y=y-this.height/2; this.createuser(); } } function shouter(){ this.width=10; this.height=20; this.src="./image/15.png"; this._shouter=null; this.x; this.y; this.creategun=function(user){ if(this._shouter==null){ this._shouter=document.createelement("img"); this._shouter.style.width=this.width; this._shouter.style.height=this.height; this._shouter.src=this.src; this._shouter.style.zindex = 1; this._shouter.style.position="absolute"; this.x=parseint(user._user.style.left)+user.width/2-this.width/2; this.y=parseint(user._user.style.top)-this.height; map.appendchild(this._shouter); } this._shouter.style.left=this.x+"px"; this._shouter.style.top=this.y+"px"; } this.gunmove=function(index,arry){ this.y-=2; if(this.y=enemy[key].y&&this.yenemy[key].x-this.width&&this.x[key].x+enemy[key].width){>=700){ this._enemy.remove(); arry.splice(index,1); } this.createenemy(); //飞机撞击敌机，game over if(user.x>this.x-user.width+10&&user.xthis.y-this.height+20&&user.y0){ for(var i=0;i;i++){>0){ for(var key in s_enemy){ s_enemy[key].enemymove(key,s_enemy); } } },5) } </script>

思路分析

1.画地图，完成游戏背景，让背景图片无缝滚动。

2.创建用户飞机的类，类里包括

用户飞机的属性（width,height,src,x,y,_user(存储用户飞机对象)）

创建用户飞机的方法createuser()

用户飞机随着鼠标移动的方法usermove(x,y)

3.实例化一个用户飞机，调用创建用户飞机的方法。

4.给地图添加鼠标移动事件，调用用户飞机移动方法，同时将鼠标的坐标传给usermove(x,y);

5.创建子弹的类，类里包括

子弹的属性（width,height,src,x,y,_shouter(存储子弹对象)）

创建子弹的方法 creategun(user);传参是因为要通过用户飞机的位置定义子弹产生的位置。

子弹向上移动的方法 gunmove(index,arry);传参是因为当子弹超出地图时，要删除子弹这个实例。

6.通过定时器每200ms实例化一个子弹，调用创造子弹的方法创造子弹；每5ms让所有子弹都调用子弹移动方法向上移动一次。

注：因为要遍历子弹，所以要统计子弹的数量。方法：定义一个空数组的全局变量，每实例化一个子弹，给这个数组追加一个子弹对象元素。

7.创建敌机的类，类里包括

敌机的属性（width,height,src,blood，score,x,y,_enemy(存储敌机对象)）；

创建敌机的方法；

敌机移动的方法；

注：由于敌机的种类不同，他们的宽，高，图片路径，血量不一样，所以应给敌机的类设置形参，属性width，height，src，blood,score的值应为参数的值，如果不传递参数的话定义这些属性为默认值（小飞机）。eg：this.width=w||40;this.height=h||30;....

8.用定时器每1000ms实例化一个敌机，调用创造敌机的方法创建一个敌机对象。每10ms让所有敌机调用敌机移动方法向下移动一次。

注：这里和子弹一样，要定义一个空数组，每创建一个敌机，给这个数组用push方法追加一个敌机元素。方便遍历敌机，控制所有敌机向下移动。

创建敌机时，敌机分为大敌机和小敌机。利用判断一个随机数的大小是否小于0.7，设置百分之七十的概率产生小飞机，百分之三十的概率产生大飞机，大飞机需要设置参数，小飞机不传参则使用默认参数。

9.判断子弹打到敌机，给子弹类添加判断子弹打到敌机的方法，打到敌机时，此子弹删除，此敌机掉血，血量为零时删除此敌机并计分。

注：子弹和敌机删除时，不仅要删除dom元素，还要删除实例化对象。

在判断子弹打到敌机时，一开始的判断方法存在bug。当用户飞机在敌机的后面时，子弹位置也满足删除条件，也可打掉敌机。处理方法：控制子弹的y必须在敌机height的范围内。

10.判断用户飞机撞击敌机，如果用户飞机飞到敌机范围内，则弹出游戏结束。清除所有定时器。此时发现用户飞机还能移动，清除地图的鼠标移动事件。

注：一开始是在用户飞机移动方法中判断的。此处存在bug，即在用户飞机未移动的情况下，是不会撞死的。原因是在鼠标移动时，才调用用户飞机移动的方法，而鼠标不动时，不会调用飞机移动方法，因此也不会撞死。

解决方法：在敌机移动中去判断用户飞机是否撞击敌机。

11.添加背景音乐。

12. 测试出bug：当飞机飞到最高处时，会报错。原因：在调用判断子弹撞击敌机方法时，子弹已超出地图，子弹被删除，因此数组长度为0，s_gun[i]为未定义。会报错。

解决方法：在调用判断子弹撞击敌机方法时，再判断一次。如果s_gun[i]为未定义，直接return；不进行判断。

0.7){>+this.height-20){>+this.width-10&&user.y>=0){>=enemy[key].y+enemy[key].height&&this.x>=0){>;i++){>