這篇文章將為大家詳細(xì)講解有關(guān)怎么用html5實(shí)現(xiàn)微信打飛機(jī)游戲，小編覺得挺實(shí)用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)是專業(yè)的安次網(wǎng)站建設(shè)公司，安次接單;提供成都網(wǎng)站建設(shè)、網(wǎng)站制作,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行安次網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊,希望更多企業(yè)前來合作!

    html5實(shí)現(xiàn)微信的打飛機(jī)游戲，利用這個小游戲?qū)W習(xí)一個HTML5吧，這是開發(fā)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;函數(shù)getSudu（）{varnumber=parseInt（Math.random（）*10）;if（數(shù)字<5&&數(shù)字>0）{返回數(shù)字;}return1;

    函數(shù)flivverObj（hp，ewidth，eheight，eimg，esudu）{//隨機(jī)的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;}//獲取飛機(jī)功能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;}函數(shù)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）;}//將小飛機(jī)畫到畫布上//小飛機(jī)死亡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）;繼續(xù);}墨盒[i].y-=20；//將小飛機(jī)畫到畫布上

    cxt.drawImage（cartridgeImg，cartridges[i].x，cartridges[i].y，7,17）;//子彈碰到飛機(jī)的情況為（在flivver中的j）{if（flivver[j].over>0）{繼續(xù)；}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）;打破;}}}}//綁定鼠標(biāo)事件c.addEventListener（'mousemove'，函數(shù)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））函數(shù)newImg（src）{varobj=newImage（）;obj.src=src;返回obj;

    }//setInterval(h.update，1000/65）;

    復(fù)制代碼

    代碼如下：

    <！DOCTYPEhtml>

    <畫布id=“dotu”width=“480”height=“800”>