小飞机发射子弹的实现
1 子弹类的声明:
1 /** 2 * 玩家游戏子弹的类 3 * @param bulletsrc 子弹图片的路径 4 * @param x 子弹出现的x轴的值 5 * @param y 子弹出现 的y轴的值 6 * @param speed 子弹射击(移动)的速度 7 */ 8 function createBullet(bulletsrc,x,y,speed){ 9 this.bulletsrc=bulletsrc; 10 this.x=x; 11 this.y=y; 12 this.speed=speed; 13 this.bulletNode=document.createElement("img"); 14 this.bulletState=true;//子弹的状态 15 this.move=function(){ 16 this.bulletNode.style.top=parseInt(this.bulletNode.style.top)-this.speed+"px"; 17 } 18 this.create=function(){ 19 this.bulletNode.src=this.bulletsrc; 20 this.bulletNode.style.position="absolute"; 21 this.bulletNode.style.left=this.x+"px"; 22 this.bulletNode.style.top=this.y+"px"; 23 playDiv.appendChild(this.bulletNode); 24 } 25 this.create(); 26 this.move(); 27 }
2 点击按钮发射子弹
1 /*============== 键盘事件 ============================*/ 2 document.body.onkeydown = function(event){ 3 var e = event || window.event || arguments.callee.caller.arguments[0]; 4 if(e.keyCode==74){ 5 bulletMove=true; 6 } 7 } 8 document.body.onkeyup =function(event){ 9 var e = event || window.event || arguments.callee.caller.arguments[0]; 10 f(e.keyCode==74){ 11 bulletMove=false; 12 } 13 }
3 通过setInterval方法控制子弹的发射并移动
1 /** 2 * 子弹移动的方法 3 */ 4 function moveBullet(){ 5 if(bulletMove){ 6 myPlane.myPlaneShoot();//控制射击子弹 7 } 8 for(var i=0;i<myPlane.bulletArray.length;i++){ 9 myPlane.bulletArray[i].move();//控制子弹移动 10 if(parseInt(myPlane.bulletArray[i].bulletNode.style.top)<=0){ 11 playDiv.removeChild(myPlane.bulletArray[i].bulletNode); 12 myPlane.bulletArray.splice(i,1);//控制子弹打击敌人并从屏幕上移除子弹 13 } 14 } 15 }
4 声明子弹数组,并将子弹放入数组的目的:
通过将所有的子弹放入数组,可以方便的管理屏幕上的子弹的移动,碰撞,消失等效果。假设没有声明数组,并将子弹放入数组,无法操作屏幕上的那么多数组。
敌军小飞机的出现
1 类的声明:
1 /** 2 * 定义敌方小飞机的方法 3 * @param EnemyPlaneSrc 4 * @param speed 5 * @param x 6 * @param y 7 */ 8 function createEnemyPlane(EnemyPlaneSrc,speed,x,y){ 9 this.y=y; 10 this.x=x; 11 this.speed=speed; 12 this.enemyPlaneSrc=EnemyPlaneSrc; 13 this.enemyPlaneNode=document.createElement("img"); 14 this.enemyState=false; 15 this.dieTime=10; 16 this.create=function(){ 17 this.enemyPlaneNode.src=this.enemyPlaneSrc; 18 this.enemyPlaneNode.style.position="absolute"; 19 this.enemyPlaneNode.style.left=this.x+"px"; 20 this.enemyPlaneNode.style.top=this.y+"px"; 21 playDiv.appendChild(this.enemyPlaneNode); 22 } 23 this.move=function(){ 24 this.enemyPlaneNode.style.top=parseInt(this.enemyPlaneNode.style.top)+this.speed+"px"; 25 } 26 this.create(); 27 this.move(); 28 }
2 敌军小飞机的出现
在创建出敌军的小飞机之后,我们同样的需要把敌军的小飞机放入一个数组中,这样的好处和子弹数组同样,便于我们去管理屏幕上的小飞机。
例如:可以通过遍历的方式判断每一个小飞机的位置,在和子弹的位置做判断就可以达到子弹打中敌军小飞机的效果。
1 /** 2 * 定义敌方小飞机出现的方法 3 */ 4 function enemyShow(){ 5 var randomVar=Math.random()*1000; 6 if(randomVar<100){ 7 randomX=Math.random()*450; 8 var enemyObj=new createEnemyPlane("image/enemy1.gif",5,randomX,0); 9 enemyArray.push(enemyObj); 10 }else if(randomVar<200&&randomVar>100){ 11 randomX=Math.random()*450; 12 var enemyObj=new createEnemyPlane("image/enemy4.gif",5,randomX,0); 13 enemyArray.push(enemyObj); 14 }else if(randomVar<300&&randomVar>200){ 15 randomX=Math.random()*450; 16 var enemyObj=new createEnemyPlane("image/enemy26.gif",5,randomX,0); 17 enemyArray.push(enemyObj); 18 } 19 }
3 敌军小飞机的移动方法
1 /** 2 * 控制敌方飞机移动的方法 3 */ 4 function enemyMove(){ 5 for(var i=0;i<enemyArray.length;i++){ 6 if(enemyArray[i].enemyState==false){ 7 if(parseInt(enemyArray[i].enemyPlaneNode.style.top)>650){ 8 9 playDiv.removeChild(enemyArray[i].enemyPlaneNode); 10 enemyArray.splice(i,1); 11 }else{ 12 enemyArray[i].move(); 13 } 14 } 15 } 16 }
4 小飞机的动画效果
1 setEnemyShow=setInterval(enemyShow,400);//控制敌方飞机出现的方法
2 setMoveEnemy=setInterval(enemyMove,10);//控制敌方飞机移动的方法
子弹和敌军小飞机的碰撞实现
在实现这一步的时候,我们开始定义的我的小飞机的子弹数组的好处就显示出来了。
我们通过循环遍历得到每个子弹的位置,然后在去循环遍历敌军小飞机的位置。
就可以实现我们子弹打中敌军小飞机的效果了。
1 /** 2 * 控制子弹与敌机碰撞的方法 3 */ 4 function destoryEnemy(){ 5 for( i=0;i<enemyArray.length;i++){//外部先循环遍历一次敌机数组: 6 for( j=0;j<myPlane.bulletArray.length;j++){//内部循环遍历一次子弹数组: 7 var enemyTop=parseInt(enemyArray[i].enemyPlaneNode.style.top); 8 var enemyLeft=parseInt(enemyArray[i].enemyPlaneNode.style.left); 9 var bulletTop=parseInt(myPlane.bulletArray[j].bulletNode.style.top); 10 var bulletLeft=parseInt(myPlane.bulletArray[j].bulletNode.style.left); 11 if(bulletLeft>enemyLeft&&bulletLeft<enemyLeft+64&&bulletTop>enemyTop&&bulletTop<enemyTop+56){ 12 enemyArray[i].enemyState=true; 13 kill=kill+1; 14 score=kill*5; 15 enemyArray[i].enemyPlaneNode.src="image/0.gif"; 16 enemyArray[i].enemyPlaneNode.style.left=(parseInt(enemyArray[i].enemyPlaneNode.style.left)-10)+"px"; 17 playDiv.removeChild(myPlane.bulletArray[j].bulletNode); 18 myPlane.bulletArray.splice(j,1); 19 } 20 } 21 } 22 } 23 /** 24 * 定义清除已经死亡的飞机 25 */ 26 function removeDieEnemyPlane(){ 27 for(i=0;i<enemyArray.length;i++){ 28 if(enemyArray[i].enemyState==true){ 29 playDiv.removeChild(enemyArray[i].enemyPlaneNode); 30 enemyArray.splice(i,1); 31 } 32 } 33 }