cari

Rumah  >  Artikel  >  hujung hadapan web  >  分享一个JavaScript（仿微信）实现打飞机游戏的实例代码

分享一个JavaScript（仿微信）实现打飞机游戏的实例代码

零下一度
零下一度asal
2017-05-08 10:30:593616semak imbas

这篇文章主要为大家详细介绍了JavaScript仿微信打飞机游戏的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

首先实现微信打飞机游戏，首先会有自己和敌机，采用canvas绘图来生成自己和敌人。

1、生成自己，且可以通过左右键来进行左右移动。

//生成自己，且可以左右移动
//控制飞机向右移动的函数
 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(); 
  }
 }

2、生成敌机。敌机就是在背景上随机生成图片。每隔一秒使其从上面下落。

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

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

 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);

3、现在主要是碰撞检测。每隔2.2秒进行一次检测，因为检测台频繁的话，直接长按向左向右键，都可以直接消除。就没有意义了

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();

这个游戏还不太完整，没有生成子弹。大部分功能都已经实现了。

4、效果图如下：

这里写图片描述

这里写图片描述

最后附上源代码：

html&css

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8"/ >
 <title></title>
 <script type="text/javascript" src = "./fightFlight.js"></script>
 <script src = "../jQuery/jquery-3.2.0.min.js"></script>
 <style type="text/css">
 *{
 margin: 0px;
 padding: 0px;
 }
 #main{
 width: 300px;
 height: 500px;
 border:1px solid red;
 margin: 0 auto;
 }
 #my{

 position: absolute;
 z-index: 2;
 top:350px;
 }
 #background{
 position: absolute;
 z-index: 1;
 width: 300px;
 height:500px;
 border: 1px solid green;
 background-image: url(../images/background.jpg);
 }
 img{
 position: absolute;
 z-index: 2;
 }
 #enmey{
 width: 50px;
 height: 50px;
 }

 #score{
 position: absolute;
 margin-left: 50%;
 left: 150px;
 top:100px;
 width: 160px;
 font-size: 20px;
 font-family: "微软雅黑";
 font-weight: bold;
 line-height: 70px;
 text-align: center;
 }
 </style>
</head>

<body>
<p id = "main">
<canvas id = "background"></canvas>
<canvas id = "my"></canvas>
<p id = "score">当前得分：0</p>
</p>

</body>
</html>

JavaScript

 var main = document.getElementById(&#39;main&#39;);
 var my = document.getElementById(&#39;my&#39;);
 var score = document.getElementById("score");
 var context = my.getContext(&#39;2d&#39;);
 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+&#39;px&#39;; 
  var enemy = document.createElement("img");
  enemy.src = "../images/enemy.png";
  var randomleft = Math.floor(Math.random() * 300) ;
  left = randomleft > 260 ? 260 + &#39;px&#39;: randomleft + &#39;px&#39;;

  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();
}

【相关推荐】

1. 免费js在线视频教程

2. JavaScript中文参考手册

3. php.cn独孤九贱（3）－JavaScript视频教程

Atas ialah kandungan terperinci 分享一个JavaScript（仿微信）实现打飞机游戏的实例代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：分享js实现（仿我的财富）数字递增特效代码Artikel seterusnya：对js中return用法的详细介绍

Artikel berkaitan

Lihat lagi