JavaScript仿微信打飞机游戏
更新时间:2017年5月9日 10:00 点击:2498
首先实现微信打飞机游戏,首先会有自己和敌机,采用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、效果图如下:
最后附上源代码:
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(); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
上一篇: JavaScript实现打地鼠小游戏
下一篇: vue2.0多条件搜索组件使用详解
相关文章
- 本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-23
- 这篇文章主要介绍了js如何实现浏览器打印功能,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-15
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 那么今天我就用JavaScript代码来实现这个效果吧,那么首先介绍一下整个的思路,首先我们先将确定输入密码的位数,我的需求是5位,那么就用一个div标签包住5个input标签...2016-01-02
- 作为前端,一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手,前端能做的太少。而且由于源码的暴露,攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的,本文的许多方法,用在其他方面也是大有作用。...2021-05-24
- 这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
- 这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下...2016-05-09
- 这篇文章主要为大家详细介绍了js+css实现回到顶部按钮back to top回到顶部按钮,感兴趣的小伙伴们可以参考一下...2016-03-03
- 这篇文章主要介绍了如何使用JavaScript实现“无缝滚动 自动播放”轮播图效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-08-20
- 这篇文章主要给大家介绍了一个关于JS正则匹配的踩坑记录,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-13
- 这篇文章主要介绍了js实现调用网络摄像头及常见错误处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-07
- 这篇文章主要为大家详细介绍了JS实现随机生成验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-06
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- 有时候我们需要屏蔽客户端的F12,以防菜鸟也可以随意修改我们的代码,也处于源码的保护等操作,这里就为大家分享一下常见的代码...2020-10-03
- 这篇文章主要为大家详细介绍了js实现列表按字母排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-11
- 这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01
- 这篇文章主要介绍了JS创建Tag标签的方法,结合具体实例形式分析了javascript动态操作页面HTML元素实现tag标签功能的步骤与相关操作技巧,需要的朋友可以参考下...2017-06-15
- Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
- 这次文章要给大家介绍的是node.JS md5加密中文与php结果不一致怎么办,不知道具体解决办法的下面跟小编一起来看看。 因项目需要,需要Node.js与PHP做接口调用,发现nod...2017-07-06
- 为了网站的安全性,很多朋友都把密码设的比较复杂,但是如何密码不能明显示,不知道输的是对是错,为了安全起见可以把密码显示的,那么基于js代码如何实现的呢?下面通过本文给大家介绍JavaScript实现表单密码的隐藏和显示,需要的朋友参考下...2016-03-03