JavaScript模仿微信玩飞机游戏

首先，我们实现了微信飞机游戏。首先，我们将拥有自己和敌机。画布绘制用于生成我们自己和敌机。

1.自己生成，通过左右键左右移动。

//生成自己的可以左右移动的函数//控制飞机向右移动(事件){context.clearrect (Aligh，100，47，47)；//如果(aligh 260){ var img=new Image()，则阻止飞机移除背景；img.src='./images/self . png '；img . onload=function(){ context . draw image(img，aligh，100)；} aligh=10}//当飞机即将移出背景时，如果(aligh==260){ var img=new Image()；img.src='./images/self . png '；img . onload=function(){ context . draw image(img，260，100)；} } }//函数向左移动(事件){context。clearrect (aligh，100，47，47)；//如果(aligh 0){ var img=new Image()，则阻止飞机移出最左侧边界；img.src='./images/self . png '；img . onload=function(){ context . draw image(img，aligh，100)；} aligh-=10；}//控制到最左边if(aligh==0){ var img=new Image()；img.src='./images/self . png '；img . onload=function(){ context . draw image(img，0，100)；} } }//判断按下了哪个键，然后控制飞机左右移动。document . onkey down=function(event){ if(event . key code==37){ move left()；} if(event . key code==39){ move right()；2.生成敌机。敌机在背景上随机生成图片。让它每隔一秒钟从上面掉下来。

var createId=setInterval(function(){ var top=0 ' px '；var敌人=document . create element(' img ')；敌人. src='./images/敌人. png '；//生成随机位置var random left=math . floor(math . random()* 300)；//如果生成的位置出现在背景之外，取260left=randomleft 260？260 ' px ' : randomleft ' pxleftArr.push(左)；//保存每架敌机向左的距离，方便碰撞检测计算arrPic.push(敌方)；//将每架敌机的图片保存成阵列，便于碰撞检测后移除main.appendChild(敌人)；敌国. style . padding left=left；敌我风格划水=顶部；var span DOM=$(' # mainimg : last-child ')；//使用jquery在这里查找最后一个img。//让最后一个img移动。相当于绑定了动画spandom。动画({'padding top' :420}，6000，function () {//))移除元素this.remove()当它落到底部时；arrPic.splice(0，1)；//从数组中移除图片leftArr.splice(0，1)；//从数组中移除距离fallCount//检测掉了多少架飞机，如果没有打到十架以上，游戏就结束了})；//如果掉落的飞机数量超过十架且未被击中，则游戏结束如果(掉落计数10) {clearinterval(创建id)；clearInterval(CrashID)；Alert('当前分数：' count '，很遗憾，游戏结束了！') } },1000);3.目前主要是碰撞检测。每2.2秒测试一次，因为如果测试站频繁，按左右键就可以直接淘汰。这说不通

函数check crash(){ crash id=set interval(function(){//因为每个自由落体的飞机都在上面的函数中被移除了。因此，保存在leftArr数组中的是当前页面上存在的飞机的左距离数组。for(var I=0；我离开了。I) {//首先，将两者转换为int类型进行比较。var tempL=ParSeint(LeftArr[I])；var TempA=ParSeint(aligh)；//向左指示您的位置。//当你的中心距离在敌机左右两侧的范围内时，说明你被击中了如果(templ=(tempa 20)(tempa 20)=(templ 40)){ arr pic[I]。移除()；//碰撞检测，去掉敌机图片arrPic.splice(i，1)；//从图片数组中移除图片leftArr.splice(i，1)；//从记录的敌人左距离阵中移除敌人的距离计数；Score.innerHTML='当前分数'计数；打破；//检测后直接跳出循环，接下来2.2秒进行碰撞检测，2200)；} CheckCrash()；这个游戏不完整，没有子弹生成。大部分功能已经实现。

4.渲染如下：

最后附上源代码：

htmlcss

！DOCTYPE html html hearteta charset=' utf-8 '/title/title script type=' text/JAVAScript ' src=' ./FightFlight。js '/script script src='./jQuery/jQuery-3。2 .0 .量滴js /脚本样式类型=' text/CSS ' * { margin 3360 0px；padd : 0px } # main { width : 300 px高度： 500像素；border:1px纯红；margin : 0 auto } # my { position : absolutez-index : 2；top:350px} #背景{ position : absolutez-index : 1；宽度： 300像素；高度：500 pxborder: 1px纯绿色；背景-图像：网址（./图像/背景。jpg)；} img { position : absolutez-index : 2；} # enmey { width: 50px高度： 50px} #得分{ position:绝对值；保证金-左侧： 50%;left: 150pxtop:100px宽度： 160像素；font-size : 20px字体系列： '微软雅黑；字体粗细：粗体；线高： 70px文本对齐：中心；}/style/head dydiv id=' main ' canvascanvas id=' background '/canvascanvascanvas id=' my '/canvasdiv id=' score '当前得分：0/div/div/body/htmlJavaScript

var main=文档。getelementbyid(' main ')；var my=文档。getelementbyid(' my ')；var score=文档。getelementbyid(' score ')；var context=my。get context(' 2d ')；var Crashidvar FallCount=0；//记录没被打中的飞机数，如果超过10,游戏结束var aligh=0；定义变量计数=0;//记录打中的飞机数，即当前得分var LeftArr=[]；var ArrPic=[]；定义变量左侧；var img=new Image()；img.src='./图像/自我。png '；img。onload=function(){ context。绘制图像(img，aligh，100)；} //生成自己，且可以左右移动函数move(event){ event=eventutil。getevent(事件)；context.clearRect(aligh，100，47，47)；if(事件。键码==39 aligh 260){ var img=new Image()；img.src='./图像/自我。png '；img。onload=function(){ context。绘制图像(img，aligh，100)；} aligh=10 } if(aligh==260){ var img=new Image()；img.src='./图像/自我。png '；img。onload=function(){ context。绘制图像(img，260，100)；} } } document.onkeypress=move//随机生成敌机(function(){ var createId=setInterval(function(){ var top=0 ' px '；定义变量敌人=文档。创建元素(' img ')；敌人。' src='./images/敌人。png '；var random left=数学。地板(数学。random()* 300)；左=randomleft 260？260 ' px ' : randomleft ' pxleftar . push(左);//保存每个敌机的距左边的距离，方便碰撞检测的计算arrPic.push(敌人);//将每个敌机的图片保存在数组中，方便碰撞检测后移除main.appendChild(敌人);敌国。风格。左填充=左；敌我风格划水=顶部；var span DOM=$(' # main img : last-child ')；//找到最后一个跨度跨度DOM。动画({ ' PaddingTop ' :420 }，6000，函数(){ //移除元素这个。移除()；arrPic.splice(0，1)；//移除图片leftArr.splice(0，1)；//从数组中移除距离fallCount })；//如果落下的飞机数超过十个没有被打中，则游戏结束if(fallCount=10){ clearInterval(createId)；clearInterval(CrashID)；警报('当前得分："计数",很遗憾，游戏结束！') } },1000);})();//碰撞检测function CheckCrash(){ CrashID=SetInterval(function(){ for(var I=0；我离开了I){ var Templ=par sent(left arr[I])；var TempA=ParSeint(aligh)；if(TempL=(TempA 20)(TempA 20)=(TempL 40)){ arr pic[I].移除();//碰撞检测，移除敌机的图片计数；score.innerHTML='当前得分计数；继续；} } console.log(计数);},2200);} CheckCrash()；} 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。