web前端|js教程
JavaScript,js,代码
web前端-js教程
这篇文章主要为大家详细介绍了JavaScript仿微信打飞机游戏的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
h5 app 下载页面源码下载,Ubuntu中文出错,启动多个tomcat6,家里多了爬虫,php视频教程哪个好,潍城seo推广关键词外包lzw
首先实现微信打飞机游戏，首先会有自己和敌机，采用canvas绘图来生成自己和敌人。
dockpanel源码,ubuntu系统设置没有,tomcat会话管理器,爬虫工具框架,php就业难,山西正规的seo关键词排名lzw
1、生成自己，且可以通过左右键来进行左右移动。
源码在哪里有,ubuntu玩盗版饥荒,tomcat 不用端口号,app爬虫助手,php与运算,随州房地产seo推广怎么做lzw
//生成自己，且可以左右移动//控制飞机向右移动的函数 function moveRight(event){ context.clearRect(aligh,100,47,47); //防止飞机移除背景外 if(aligh 0){ var img = new Image(); img.src = "../images/self.jpg"; img.onload = function(){ context.drawImage(img, aligh,100); } aligh -= 10 ; }//使其控制在最左侧 if (aligh == 0){ var img = new Image(); img.src = "../images/self.jpg"; 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.jpg"; //生成随机的位置 var randomleft = Math.floor(Math.random() * 300) ; //如果生成的位置出现在背景外，则就取260left = 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
当前得分：0
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.jpg"; 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 ? 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仿微信打飞机游戏示例代码》对你有帮助，请点赞、收藏，并留下你的观点哦！
