怎么用html5實現(xiàn)微信打飛機游戲

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

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

html5實現(xiàn)微信的打飛機游戲，利用這個小游戲學習一個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）;打破;}}}}//綁定鼠標事件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）;

復制代碼

代碼如下：

<！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>小飛機數(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>

關于“怎么用html5實現(xiàn)微信打飛機游戲”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

分享題目：怎么用html5實現(xiàn)微信打飛機游戲
當前URL：http://bm7419.com/article0/isgpoo.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供品牌網站建設、移動網站建設、搜索引擎優(yōu)化、做網站、自適應網站、手機網站建設

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內容