JavaScript仿微信打飞机游戏

//生成自己，且可以左右移动
//控制飞机向右移动的函数
 function moveRight(event){

 context.clearRect(aligh,100,47,47);

 //防止飞机移除背景外
 if(aligh < 260){
 var img = new Image();
 img.src = "../images/self.png";
 img.onload = function(){
 context.drawImage(img, aligh,100);
 }
 aligh += 10 ;
 }

//当飞机即将移出背景外时，让它停在最右端
 if (aligh == 260){
 var img = new Image();
 img.src = "../images/self.png";
 img.onload = function(){
 context.drawImage(img, 260,100);
 }
 }
 }

 //控制飞机向左移动的函数
 function moveLeft(event){
 context.clearRect(aligh,100,47,47);

//防止飞机移出最左边的边界
 if(aligh > 0){
 var img = new Image();
 img.src = "../images/self.png";
 img.onload = function(){
 context.drawImage(img, aligh,100);
 }
 aligh -= 10 ;
 }

//使其控制在最左侧
 if (aligh == 0){
 var img = new Image();
 img.src = "../images/self.png";
 img.onload = function(){
 context.drawImage(img, 0,100);
 }
 }

}
//判断按下的是哪个键，然后控制飞机左右移动
 document.onkeydown = function(event){
 if(event.keyCode == 37){
 moveLeft();
 }
 if(event.keyCode == 39){
 moveRight(); 
 }
 }

var createId = setInterval(function(){
 var top = 0+'px'; 
 var enemy = document.createElement("img");
 enemy.src = "../images/enemy.png";

 //生成随机的位置
 var randomleft = Math.floor(Math.random() * 300) ;
 //如果生成的位置出现在背景外，则就取260
left = randomleft > 260 ? 260 + 'px': randomleft + 'px';

 leftArr.push(left); //保存每个敌机的距左边的距离，方便碰撞检测的计算
 arrPic.push(enemy); //将每个敌机的图片保存在数组中，方便碰撞检测后移除

 main.appendChild(enemy);
 enemy.style.paddingLeft = left ;
 enemy.style.paddingTop = top;
 var spandom = $("#main>img:last-child");//这儿利用jquery找到最后一个img

//让最后一个img动起来。则就相当于为每一个img都绑定了动画
spandom.animate({"paddingTop":420},6000,function(){
 //当下落到底部时移除元素
 this.remove();
 arrPic.splice(0,1); //从数组中移除图片
 leftArr.splice(0,1); //从数组中移除距离
 fallCount ++; //检测下落了多少个飞机，超过十个没被打中，游戏就结束
 });

 //如果落下的飞机数超过十个没有被打中，则游戏结束
 if(fallCount > 10){
 clearInterval(createId);
 clearInterval(crashId);
 alert("当前得分 ："+count+" , 很遗憾，游戏结束!")
 }
 },1000);

function checkCrash(){

 crashId = setInterval(function(){

 //由于每次自由落下的飞机在上面函数中都被移除了。所以leftArr数组中保存的就是当前页面存在的飞机的左距离数组。
 for(var i = 0; i < leftArr.length; i++)
 {

 //首先将两种都转换成int型进行比较
 var tempL = parseInt(leftArr[i]);
 var tempA = parseInt(aligh); //表示自己距左侧的位置

 //当自己的中心距离处于敌机的左右两侧范围内，则表示被击中
 if(tempL <= (tempA + 20) && (tempA + 20) <= (tempL + 40)){
 arrPic[i].remove(); //碰撞检测，移除敌机的图片
 arrPic.splice(i,1); //从图片数组中移除图片
 leftArr.splice(i,1); //从记录敌机左侧距离数组中移除该敌机的距离
 count++;
 score.innerHTML = "当前得分 "+count;  
 break; //检测到之后直接跳出循环，进行下一个2.2秒的碰撞检测
 } 
 } 
 },2200);

 }
 checkCrash();

 
 
 
 






当前得分：0

 var main = document.getElementById('main');
 var my = document.getElementById('my');
 var score = document.getElementById("score");
 var context = my.getContext('2d');
 var crashId;
 var fallCount = 0; //记录没被打中的飞机数，如果超过10，游戏结束
 var aligh = 0 ;
 var count = 0; //记录打中的飞机数，即当前得分
 var leftArr = [];
 var arrPic = [];
 var left;
 var img = new Image();
 img.src = "../images/self.png";
 img.onload = function(){
 context.drawImage(img,aligh,100);
 }

 //生成自己，且可以左右移动
 function move(event){

 event = EventUtil.getEvent(event);
 context.clearRect(aligh,100,47,47);

 if(event.keyCode == 39 && aligh < 260 ){

 var img = new Image();
 img.src = "../images/self.png";
 img.onload = function(){
  context.drawImage(img, aligh,100);
  }
  aligh += 10 ;
 }

 if (aligh == 260){
  var img = new Image();
  img.src = "../images/self.png";
  img.onload = function(){
  context.drawImage(img, 260,100);
  }
 }

 }
 document.onkeypress = move;


 //随机生成敌机

 (function(){
 var createId = setInterval(function(){
 var top = 0+'px'; 
 var enemy = document.createElement("img");
 enemy.src = "../images/enemy.png";
 var randomleft = Math.floor(Math.random() * 300) ;
 left = randomleft > 260 ? 260 + 'px': randomleft + 'px';

 leftArr.push(left); //保存每个敌机的距左边的距离，方便碰撞检测的计算
 arrPic.push(enemy); //将每个敌机的图片保存在数组中，方便碰撞检测后移除

 main.appendChild(enemy);
 enemy.style.paddingLeft = left ;
 enemy.style.paddingTop = top;
 var spandom = $("#main>img:last-child");//找到最后一个span
 spandom.animate({"paddingTop":420},6000,function(){
 //移除元素
 this.remove();
 arrPic.splice(0,1); //移除图片
 leftArr.splice(0,1); //从数组中移除距离
 fallCount ++;
 });

 //如果落下的飞机数超过十个没有被打中，则游戏结束
 if(fallCount >= 10){
 clearInterval(createId);
 clearInterval(crashId);
 alert("当前得分 ："+count+" , 很遗憾，游戏结束!")
 }

 },1000);
 })();


 //碰撞检测
 function checkCrash(){

 crashId = setInterval(function(){

 for(var i = 0; i < leftArr.length; i++)
 {
 var tempL = parseInt(leftArr[i]);
 var tempA = parseInt(aligh);
 if(tempL <= (tempA + 20) && (tempA + 20) <= (tempL + 40)){

  arrPic[i].remove(); //碰撞检测，移除敌机的图片
  count++;
  score.innerHTML = "当前得分 "+count;
  continue;
 }

 }
 console.log(count);

 },2200);

 }
 checkCrash();

}