JavaScript仿微信打飞机游戏

程序员文章站 2022-07-20 10:33:42

首先实现微信打飞机游戏，首先会有自己和敌机，采用canvas绘图来生成自己和敌人。 1、生成自己，且可以通过左右键来进行左右移动。 //生成自己，且可以左...

首先实现微信打飞机游戏，首先会有自己和敌机，采用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+'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);

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、效果图如下：

JavaScript仿微信打飞机游戏

最后附上源代码：

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>
<div id = "main">
<canvas id = "background"></canvas>
<canvas id = "my"></canvas>
<div id = "score">当前得分：0</div>
</div>

</body>
</html>

javascript

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

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇： 2.面向对象

下一篇：使用nodejs爬取前程无忧前端技能排行

JavaScript仿微信打飞机游戏

Android实现iPhone晃动撤销输入功能 Android仿微信摇一摇功能

微信小游戏结算系统升级：加入资金快周转功能

Android仿微信联系人列表字母侧滑控件

Android仿微信底部菜单栏效果

javascript高仿热血传奇游戏实现代码

Android仿微信QQ聊天顶起输入法不顶起标题栏的问题

Android仿微信录音功能(录音后的raw文件转mp3文件)

Android仿微信视屏悬浮窗效果

Android 仿微信发动态九宫格拖拽、删除功能

Android仿微信菜单(Menu)（使用C#和Java分别实现）