溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關(guān)怎么用html5實現(xiàn)微信打飛機游戲，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
html5實現(xiàn)微信的打飛機游戲，利用這個小游戲?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）{//隨機的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;}函數(shù)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）;繼續(xù);}墨盒[i].y-=20；//將小飛機畫到畫布上
cxt.drawImage（cartridgeImg，cartridges[i].x，cartridges[i].y，7,17）;//子彈碰到飛機的情況為（在flivver中的j）{if（flivver[j].over>0）{繼續(xù)；}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）;打破;}}}}//綁定鼠標(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><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“>鼠標(biāo)X：<spanid=”sbX“></span>鼠標(biāo)Y：<spanid=”sbY“></span>小飛機數(shù)：<spanid=“fjs”></span>子彈數(shù)：<spanid=“zds”></span>打中：<spanid=“isdz”></span>生成飛機時間：<spanid=“scfj”></span></div><scripttype=“text/javascript”src=“./dotu_game.js”></script></body></html>
關(guān)于“怎么用html5實現(xiàn)微信打飛機游戲”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼
