JavaScript仿微信打飞机游戏示例代码-js教程-PHP中文网

首页

web前端

js教程

JavaScript仿微信打飞机游戏示例代码

怪我咯

Jul 07, 2017 pm 03:12 PM

javascript js 代码

这篇文章主要为大家详细介绍了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();

}

登录后复制

以上是JavaScript仿微信打飞机游戏示例代码的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7675

CakePHP 教程

1393

C# 教程

1207

steam的账户名称是什么格式

win11激活密钥永久

显示更多

Related knowledge

蓝屏代码0x0000001怎么办 Feb 23, 2024 am 08:09 AM

蓝屏代码0x0000001怎么办蓝屏错误是电脑系统或硬件出现问题时的一种警告机制，代码0x0000001通常表示出现了硬件或驱动程序故障。当用户在使用电脑时突然遇到蓝屏错误，可能会感到惊慌和无措。幸运的是，大多数蓝屏错误都可以通过一些简单的步骤进行排除和处理。本文将为读者介绍一些解决蓝屏错误代码0x0000001的方法。首先，当遇到蓝屏错误时，我们可以尝试重

电脑频繁蓝屏而且每次代码不一样 Jan 06, 2024 pm 10:53 PM

win10系统是一款非常优秀的高智能系统强大的智能可以为用户们带来最好的使用体验，一般正常的情况下用户们的win10系统电脑都不会出现任何的问题！但是在优秀的电脑也难免会出现各种故障最近一直有小伙伴们反应自己的win10系统遇到了频繁蓝屏的问题！今天小编就为大家带来了win10电脑频繁蓝屏不同代码的解决办法让我们一起来看一看吧。电脑频繁蓝屏而且每次代码不一样的解决办法：造成各种故障代码的原因以及解决建议1、0×000000116故障原因：应该是显卡驱动不兼容。解决建议：建议更换厂商原带驱动。2、

推荐：优秀JS开源人脸检测识别项目 Apr 03, 2024 am 11:55 AM

人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属，在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别，大大缩短了用户等待时间，提高了用户体验；弱势是：受到模型大小限制，其中准确率也有限。如何在web端使用js实现人脸检测呢？为了实现Web端人脸识别，需要熟悉相关的编程语言和技术，如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是，由于Web端的计

解决代码0xc000007b错误 Feb 18, 2024 pm 07:34 PM

终止代码0xc000007b在使用电脑时，有时会遇到各种各样的问题和错误代码。其中，终止代码最为令人困扰，尤其是终止代码0xc000007b。这个代码表示某个应用程序无法正常启动，给用户带来了不便。首先，我们来了解一下终止代码0xc000007b的含义。这个代码是Windows操作系统的错误代码，通常发生在32位应用程序尝试在64位操作系统上运行时。它表示应

GE通用远程代码可在任何设备上编程 Mar 02, 2024 pm 01:58 PM

如果您需要远程编程任何设备，这篇文章会给您带来帮助。我们将分享编程任何设备的顶级GE通用远程代码。通用电气的遥控器是什么？GEUniversalRemote是一款遥控器，可用于控制多个设备，如智能电视、LG、Vizio、索尼、蓝光、DVD、DVR、Roku、AppleTV、流媒体播放器等。GEUniversal遥控器有各种型号，具有不同的功能和功能。GEUniversalRemote最多可以控制四台设备。顶级通用遥控器代码，可在任何设备上编程GE遥控器配备一组代码，使其能够与不同设备相配合。您可

蓝屏代码0x000000d1代表什么问题？ Feb 18, 2024 pm 01:35 PM

0x000000d1蓝屏代码是什么意思近年来，随着计算机的普及和网络的快速发展，操作系统的稳定性和安全性问题也日益凸显。一个常见的问题是蓝屏错误，代码0x000000d1是其中之一。蓝屏错误，或称为“蓝屏死机”，是当计算机遇到严重系统故障时发生的一种情况。当系统无法从错误中恢复时，Windows操作系统会显示一个蓝色的屏幕，并在屏幕上显示错误代码。这些错误代

学习Python绘图的速成指南：绘制冰墩墩的代码实例 Jan 13, 2024 pm 02:00 PM

快速上手Python绘图：画出冰墩墩的代码示例Python是一种简单易学且功能强大的编程语言，通过使用Python的绘图库，我们可以轻松地实现各种绘图需求。在本篇文章中，我们将使用Python的绘图库matplotlib来画出冰墩墩的简单图形。冰墩墩是一只拥有可爱形象的熊猫，非常受小朋友们的喜爱。首先，我们需要安装matplotlib库。你可以通过在终端运行

如何使用Copilot生成代码 Mar 23, 2024 am 10:41 AM

作为一名程序员，对于能够简化编码体验的工具，我感到非常兴奋。借助人工智能工具的帮助，我们可以生成演示代码，并根据需求进行必要的修改。在VisualStudioCode中新引入的Copilot工具让我们能够创建具有自然语言聊天交互的AI生成代码。通过解释功能，我们可以更好地理解现有代码的含义。如何使用Copilot生成代码？要开始，我们首先需要获得最新的PowerPlatformTools扩展。要实现这一点，你需要进入扩展页面，搜索“PowerPlatformTool”，然后点击Install按钮

See all articles

JavaScript仿微信打飞机游戏示例代码

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题