这篇文章将为大家详细讲解有关怎么用html5实现微信打飞机游戏，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
html5实现微信的打飞机游戏，利用这个小游戏学习一个HTML5吧，这是开发WEB的一个方向
代码如下：
//JavaScript文档varc=document.getElementById（“dotu”）;varcxt=c.getContext（“2d”）;varimg=newImg（“./assets/bg_01.jpg”）;varfps;cxt.drawImage（img，0,0,480,800）;varflivverLog=0;varflivver1=newImg（“./assets/flivver.png”）;varflivver2=newImg（“./assets/flivver2.png”）;varflivver3=newImg（“./assets/flivver3.png”）;//用于记录游戏的时间，越到后面越快vartime1=0;vartime2=80;//积分varjifen=0;函数getSudu（）{varnumber=parseInt（Math.random（）*10）;if（数字<5&&数字>0）{返回数字;}return1;
函数flivverObj（hp，ewidth，eheight，eimg，esudu）{//随机的Xthis.x=parseInt（Math.random（）*460+1）;this.y=0;//血量this.hp=hp;//挨打this.hit=0;//是否死亡this.over=0;this.width=ewidth;this.height=eheight;this.img=eimg;this.sudu=esudu;}//获取飞机功能getFlivver（type）{switch（type）{情况1：返回新的flivverObj（100,50,30，flivver1，getSudu（））;情况2：返回新的flivverObj（500,70,90，flivver2，getSudu（））;情况3：
返回新的flivverObj（1000,110,170，flivver3，getSudu（））;}}功能盒（x，y）{this.x=x;this.y=y;}函数gameover（）{window.clearTimeout（fps）;//$（'＃dotu'）。fadeOut（）;$（'。content'）。css（'position'，'relative'）;$（'。content'）。append（'<spanstyle=“position：absolute;top：5px;left：2px;font-size：150px;color：＃cc0000;text-align：center”id=“sil”></span>'）；$（'＃sil'）。html（'你'）.hide（）。fadeIn（1000，function（）{$（this）.html（'你屎'）.hide（）。fadeIn（1000，function（）{$（this）.html（'780）{flivver.splice（a，1）;}//将小飞机画到画布上//小飞机死亡if（flivver[a].over>0）{flivver[a].over-;if（flivver[a].over>20）{cxt.drawImage（boo1，flivver[a].x+flivver[a].width/2-20，flivver[a].y+flivver[a].height/2-10,41,39）；}否则if（flivver[a].over>2）{cxt.drawImage（over，flivver[a].x+flivver[a].width/2-20，flivver[a].y+flivver[a]。高度/2-10,40,43）；}其他{
flivver.splice（a，1）;}}else{cxt.drawImage（flivver[a].img，flivver[a].x，flivver[a].y，flivver[a].width，flivver[a].height）;//判断自己是否死亡if（me.x>（flivver[a].x-flivver[a].width+20）&&（me.x）<（flivver[a].x+flivver[a].width-20）&&（me.y）<（flivver[a].y+flivver[a].height+20）&&（me.y+72）>（flivver[a].y-20））{gameover（）;}if（flivver[a].hit>0）{cxt.drawImage（boo1，flivver[a].x+flivver[a].width/2-20，flivver[a].y+flivver[a].height/2-10,41,39）；//cxt.drawImage(boo1,flivver[a].x+5，flivver[a].y，
flivver[a].hit--;}}}}//更新自己的距离dotu.setMe=function（）{cxt.drawImage（meImg，me.x，me.y，64,72）;}//更新子弹方法dotu.cartridge=function（）{if（dotu.nums％10==0）{ettes.push（newettes（me.x+30，me.y））;}for（iincarts）{//飞到顶部就将OBJ删除掉if（cartridges[i].y<0）{Carts.splice（i，1）;继续;}墨盒[i].y-=20；//将小飞机画到画布上
cxt.drawImage（cartridgeImg，cartridges[i].x，cartridges[i].y，7,17）;//子弹碰到飞机的情况为（在flivver中的j）{if（flivver[j].over>0）{继续；}if（cartridges[i].x>flivver[j].x&&墨盒[i].x<flivver[j].x+flivver[j].width&&墨盒[i].y>flivver[j].y&&弹匣[i].y-flivver[j]。高度<flivver[j].y）{flivver[j].hit=10;$（'＃isdz'）。html（'打中了编号'+j）;if（flivver[j].hp>1）{flivver[j].hp-=80;}else{flivver[j].over=40;
吉芬+=50000;}//子弹消失cartridges.splice（i，1）;打破;}}}}//绑定鼠标事件c.addEventListener（'mousemove'，函数onMouseMove（evt）{me.x=evt.layerX-$（'＃dotu'）。offset（）。left-32;我。y=evt.layerY-36;$（'＃sbX'）。html（me.x）;$（'＃sbY'）。html（me.y）;}）;fps=setInterval（dotu.update，1000/100）;}（cxt））函数newImg（src）{varobj=newImage（）;obj.src=src;返回obj;
}//setInterval(h.update，1000/65）;
复制代码
代码如下：
<！DOCTYPEhtml><htmlxmlns=“http://www.w3.org/1999/xhtml”><head><metahttp-equiv=“Content-Type”content=“text/html;charset=utf-8”/><title>打飞机-多途</title><scripttype=“text/javascript”src=“./jquery.min.1.7.1.js”></script><style>body{padding：0;保证金：0;text-align：center}.content{border：1px＃000实心;宽度：480px;margin：0自动;高度：800像素；显示：块;font-size：72px;}.info，.blog{border：1px＃000solid;位置：固定top：5px;右：5px;宽度：150px;text-align：left}.blog{left：10px;背景：＃000；text-align：center;width：100px}.bloga{color：#FFF;文字修饰：无；font-size：15px;}</style></head>
<body><divclass=“content”><画布id=“dotu”width=“480”height=“800”></canvas></div><divclass=“blog”>回到博客首页</div><divclass=”info“>鼠标X：<spanid=”sbX“></span>鼠标Y：<spanid=”sbY“></span>小飞机数：<spanid=“fjs”></span>子弹数：<spanid=“zds”></span>打中：<spanid=“isdz”></span>生成飞机时间：<spanid=“scfj”></span></div><scripttype=“text/javascript”src=“./dotu_game.js”></script></body></html>
关于“怎么用html5实现微信打飞机游戏”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
