怎么用html5实现微信打飞机游戏

这篇文章将为大家详细讲解有关怎么用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（''）；$（'＃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].xflivver[j].y&&弹匣[i].y-flivver[j]。高度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>

<画布id="dotu"width="480"height="800">