{"id":29220,"date":"2024-11-25T16:50:20","date_gmt":"2024-11-25T08:50:20","guid":{"rendered":"https:\/\/fwq.ai\/blog\/29220\/"},"modified":"2024-11-25T16:50:20","modified_gmt":"2024-11-25T08:50:20","slug":"html5%e5%ae%9e%e7%8e%b0%e5%be%ae%e4%bf%a1%e6%89%93%e9%a3%9e%e6%9c%ba%e6%b8%b8%e6%88%8f%e4%bb%a3%e7%a0%81%e5%88%86%e4%ba%ab","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/29220\/","title":{"rendered":"html5\u5b9e\u73b0\u5fae\u4fe1\u6253\u98de\u673a\u6e38\u620f\u4ee3\u7801\u5206\u4eab"},"content":{"rendered":"<p>\u8fd9\u7bc7\u6587\u7ae0\u4e3b\u8981\u4ecb\u7ecd\u4e86html5\u5b9e\u73b0\u5fae\u4fe1\u6253\u98de\u673a\u6e38\u620f,\u9700\u8981\u7684\u670b\u53cb\u53ef\u4ee5\u53c2\u8003\u4e0b<\/p>\n<p>html5\u5b9e\u73b0\u5fae\u4fe1\u7684\u6253\u98de\u673a\u6e38\u620f,\u5229\u7528\u8fd9\u4e2a\u5c0f\u6e38\u620f\u5b66\u4e60\u4e00\u4e2aHTML5\u5427\uff0c\u8fd9\u662f\u5f00\u53d1WEB\u7684\u4e00\u4e2a\u65b9\u5411<\/p>\n<p>\u4ee3\u7801\u5982\u4e0b:<\/p>\n<pre>\/\/&nbsp;JavaScript&nbsp;Document\r\nvar&nbsp;c&nbsp;=&nbsp;document.getElementById(\"dotu\");\r\nvar&nbsp;cxt&nbsp;=&nbsp;c.getContext(\"2d\");\r\nvar&nbsp;img&nbsp;=&nbsp;newImg(\".\/assets\/bg_01.jpg\");\r\nvar&nbsp;fps;\r\ncxt.drawImage(img,0,0,480,800);\r\n\r\nvar&nbsp;flivverLog&nbsp;=&nbsp;0;\r\nvar&nbsp;flivver1&nbsp;=&nbsp;newImg(\".\/assets\/flivver.png\");\r\nvar&nbsp;flivver2&nbsp;=&nbsp;newImg(\".\/assets\/flivver2.png\");\r\nvar&nbsp;flivver3&nbsp;=&nbsp;newImg(\".\/assets\/flivver3.png\");\r\n\r\n\/\/&nbsp;\u7528\u4e8e\u8bb0\u5f55\u6e38\u620f\u7684\u65f6\u95f4\uff0c\u8d8a\u5230\u540e\u9762\u8d8a\u5feb\r\nvar&nbsp;time1&nbsp;=&nbsp;0;\r\nvar&nbsp;time2&nbsp;=&nbsp;80;\r\n\r\n\/\/&nbsp;\u79ef\u5206\r\nvar&nbsp;jifen&nbsp;=&nbsp;0;\r\n\r\nfunction&nbsp;getSudu(){\r\n&nbsp;&nbsp;&nbsp;var&nbsp;number&nbsp;=&nbsp;parseInt(Math.random()*10);\r\n&nbsp;&nbsp;&nbsp;if(number&nbsp;&nbsp;0){\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;number;\r\n&nbsp;&nbsp;&nbsp;}\r\n&nbsp;&nbsp;&nbsp;return&nbsp;1;\r\n}\r\n\/\/&nbsp;\u98de\u673a\u7684\u5bf9\u8c61\r\nfunction&nbsp;flivverObj(hp,ewidth,eheight,eimg,esudu){\r\n&nbsp;&nbsp;&nbsp;\/\/&nbsp;\u968f\u673a\u7684X\r\n&nbsp;&nbsp;&nbsp;this.x&nbsp;=&nbsp;parseInt(Math.random()*460+1);\r\n&nbsp;&nbsp;&nbsp;this.y&nbsp;=&nbsp;0;\r\n&nbsp;&nbsp;&nbsp;\/\/&nbsp;\u8840\u91cf\r\n&nbsp;&nbsp;&nbsp;this.hp&nbsp;=&nbsp;hp;\r\n&nbsp;&nbsp;&nbsp;\/\/&nbsp;\u6328\u6253&nbsp;&nbsp;&nbsp;\r\n&nbsp;&nbsp;&nbsp;this.hit&nbsp;=&nbsp;0;\r\n&nbsp;&nbsp;&nbsp;\/\/&nbsp;\u662f\u5426\u6b7b\u4ea1\r\n&nbsp;&nbsp;&nbsp;this.over&nbsp;=&nbsp;0;\r\n\r\n&nbsp;&nbsp;&nbsp;this.width&nbsp;=&nbsp;ewidth;\r\n&nbsp;&nbsp;&nbsp;this.height&nbsp;=&nbsp;eheight;\r\n&nbsp;&nbsp;&nbsp;this.img&nbsp;=&nbsp;eimg;\r\n&nbsp;&nbsp;&nbsp;this.sudu&nbsp;=&nbsp;esudu;\r\n}\r\n\r\n\/\/&nbsp;\u83b7\u53d6\u98de\u673a\r\nfunction&nbsp;getFlivver(type){\r\n&nbsp;&nbsp;&nbsp;switch(type){\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case&nbsp;1:\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;new&nbsp;flivverObj(100,50,30,flivver1,getSudu());\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case&nbsp;2:\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;new&nbsp;flivverObj(500,70,90,flivver2,getSudu());\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case&nbsp;3:\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;new&nbsp;flivverObj(1000,110,170,flivver3,getSudu());\r\n&nbsp;&nbsp;&nbsp;}\r\n}\r\nfunction&nbsp;cartridge(x,y){\r\n&nbsp;&nbsp;&nbsp;this.x&nbsp;=&nbsp;x;\r\n&nbsp;&nbsp;&nbsp;this.y&nbsp;=&nbsp;y;&nbsp;\r\n}\r\n\r\nfunction&nbsp;gameover(){\r\n&nbsp;&nbsp;&nbsp;window.clearTimeout(fps);\r\n&nbsp;&nbsp;&nbsp;\/\/$('#dotu').fadeOut();\r\n&nbsp;&nbsp;&nbsp;$('.content').css('position','relative');\r\n&nbsp;&nbsp;&nbsp;$('.content').append('&lt;span&gt;&lt;\/span&gt;');\r\n&nbsp;&nbsp;&nbsp;$('#sil').html('\u4f60').hide().fadeIn(1000,function(){\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this).html('\u4f60\u5c4e').hide().fadeIn(1000,function(){\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this).html('&lt;a&gt;\u4f60\u5c4e\u4e86&lt;\/a&gt;\r\n'&nbsp;+&nbsp;jifen&nbsp;&nbsp;+&nbsp;'&nbsp;\u5206').hide().fadeIn();\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});&nbsp;\r\n&nbsp;&nbsp;&nbsp;});\r\n}\r\n\r\n(function(cxt){\r\n&nbsp;&nbsp;&nbsp;var&nbsp;dotu&nbsp;=&nbsp;{nums:0};\r\n&nbsp;&nbsp;&nbsp;\/\/&nbsp;\u7528\u4e8e\u5b58\u653e\u5c0f\u98de\u673a\r\n&nbsp;&nbsp;&nbsp;var&nbsp;flivver&nbsp;=&nbsp;new&nbsp;Array();\r\n&nbsp;&nbsp;&nbsp;var&nbsp;flivverImg&nbsp;=&nbsp;newImg(\".\/assets\/flivver.png\");\r\n&nbsp;&nbsp;&nbsp;\/\/&nbsp;\u81ea\u5df1\r\n&nbsp;&nbsp;&nbsp;var&nbsp;me&nbsp;=&nbsp;{x:240,y:750};\r\n&nbsp;&nbsp;&nbsp;var&nbsp;meImg&nbsp;=&nbsp;newImg('assets\/me.png');\r\n&nbsp;&nbsp;&nbsp;\/\/&nbsp;\u5b50\u5f39\r\n&nbsp;&nbsp;&nbsp;var&nbsp;cartridges&nbsp;=&nbsp;new&nbsp;Array();\r\n&nbsp;&nbsp;&nbsp;var&nbsp;cartridgeImg&nbsp;=&nbsp;newImg('.\/assets\/cartridge.png');\r\n\r\n&nbsp;&nbsp;&nbsp;var&nbsp;boo1&nbsp;=&nbsp;newImg('.\/assets\/boo1.png');\r\n&nbsp;&nbsp;&nbsp;var&nbsp;over&nbsp;=&nbsp;newImg('.\/assets\/over.png');\r\n&nbsp;&nbsp;&nbsp;\/\/&nbsp;\r\n&nbsp;&nbsp;&nbsp;dotu.update&nbsp;=&nbsp;function(){\r\n\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dotu.setTimes();\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/&nbsp;\u8bbe\u7f6e\u80cc\u666f\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dotu.setBg();\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/&nbsp;\u8bbe\u7f6e\u5c0f\u98de\u673a\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dotu.setFlivver();\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/&nbsp;\u753b\u81ea\u5df1\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dotu.setMe();\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/&nbsp;\u5b50\u5f39\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dotu.cartridge();\r\n\r\n\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cxt.font&nbsp;=&nbsp;\"italic&nbsp;20px&nbsp;\u5fae\u8f6f\u96c5\u9ed1\";\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cxt.strokeText(\"\u79ef\u5206\uff1a\"&nbsp;+&nbsp;jifen,&nbsp;10,&nbsp;30);\r\n\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('#fjs').html(flivver.length);\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('#zds').html(cartridges.length);\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('#scfj').html(\"1000\/\"&nbsp;+&nbsp;time2&nbsp;+&nbsp;\"&nbsp;\u6beb\u79d2\");\r\n&nbsp;&nbsp;&nbsp;}\r\n\r\n&nbsp;&nbsp;&nbsp;dotu.setTimes&nbsp;=&nbsp;function(){\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;time1++&nbsp;;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/&nbsp;100&nbsp;\u79d2&nbsp;1\u4e2a\u6863\u4f4d\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(time1&nbsp;==&nbsp;1000){\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;time1&nbsp;=&nbsp;0;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;time2&nbsp;=&nbsp;(time2&nbsp;==&nbsp;20)&nbsp;?&nbsp;20&nbsp;:&nbsp;time2&nbsp;-&nbsp;20;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r\n\r\n&nbsp;&nbsp;&nbsp;}\r\n\r\n\r\n&nbsp;&nbsp;&nbsp;\/**\r\n&nbsp;&nbsp;&nbsp;&nbsp;*&nbsp;\u8bbe\u7f6e\u79fb\u52a8\u7684\u80cc\u666f\r\n&nbsp;&nbsp;&nbsp;&nbsp;*\/\r\n&nbsp;&nbsp;&nbsp;dotu.setBg&nbsp;=&nbsp;function(){\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dotu.nums++;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(dotu.nums&nbsp;==&nbsp;800){\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dotu.nums&nbsp;=&nbsp;0;&nbsp;&nbsp;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/&nbsp;\u753b\u5e03\u7684\u80cc\u666f\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cxt.drawImage(img,0,dotu.nums,480,800);\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cxt.drawImage(img,0,dotu.nums&nbsp;-&nbsp;800,480,800);\r\n&nbsp;&nbsp;&nbsp;}\r\n\r\n&nbsp;&nbsp;&nbsp;dotu.setFlivver&nbsp;=&nbsp;function(){\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/&nbsp;\u751f\u6210\u98de\u673a\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(dotu.nums&nbsp;%&nbsp;time2&nbsp;==&nbsp;0){\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flivverLog++;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(flivverLog&nbsp;%&nbsp;6&nbsp;==&nbsp;0){\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flivver.push(getFlivver(2));\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else&nbsp;if(flivverLog&nbsp;%&nbsp;13&nbsp;==&nbsp;0){\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flivver.push(getFlivver(3));\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else{\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flivver.push(getFlivver(1));\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r\n\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r\n\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for(a&nbsp;in&nbsp;flivver){\r\n\r\n\r\n\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flivver[a].y&nbsp;+=&nbsp;flivver[a].sudu;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/&nbsp;\u5982\u679c\u8d85\u51fa\u5c4f\u5e55\u5c06\u8be5\u5c0f\u98de\u673a\u5220\u9664\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(flivver[a].y&nbsp;&amp;gt;&nbsp;780){\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flivver.splice(a,&nbsp;1);\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/&nbsp;\u5c06\u5c0f\u98de\u673a\u753b\u5230\u753b\u5e03\u4e0a\r\n\r\n\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/&nbsp;\u5c0f\u98de\u673a\u6b7b\u4ea1\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(flivver[a].over&nbsp;&amp;gt;&nbsp;0){\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flivver[a].over&nbsp;--;\r\n\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(flivver[a].over&nbsp;&amp;gt;&nbsp;20){\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cxt.drawImage(boo1,flivver[a].x&nbsp;+&nbsp;flivver[a].width\/2&nbsp;-&nbsp;20&nbsp;&nbsp;,flivver[a].y&nbsp;+&nbsp;flivver[a].height&nbsp;\/&nbsp;2&nbsp;-10,41,39);\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else&nbsp;if(flivver[a].over&nbsp;&amp;gt;&nbsp;2){\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cxt.drawImage(over,flivver[a].x&nbsp;+&nbsp;flivver[a].width\/2&nbsp;-&nbsp;20&nbsp;,flivver[a].y&nbsp;+&nbsp;flivver[a].height&nbsp;\/&nbsp;2&nbsp;-10,40,43);\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else{\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flivver.splice(a,&nbsp;1);\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r\n\r\n\r\n\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else{\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cxt.drawImage(flivver[a].img,flivver[a].x,flivver[a].y,flivver[a].width,flivver[a].height);\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/&nbsp;\u5224\u65ad\u81ea\u5df1\u662f\u5426\u6b7b\u4ea1\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(&nbsp;me.x&nbsp;&amp;gt;&nbsp;(flivver[a].x&nbsp;-&nbsp;flivver[a].width&nbsp;+&nbsp;20)&nbsp;&amp;amp;&amp;amp;&nbsp;(me.x)&nbsp;&nbsp;(flivver[a].y&nbsp;-&nbsp;20)){\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gameover();\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r\n\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(flivver[a].hit&nbsp;&amp;gt;&nbsp;0){\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cxt.drawImage(boo1,flivver[a].x&nbsp;+&nbsp;flivver[a].width\/2&nbsp;-&nbsp;20&nbsp;,flivver[a].y&nbsp;+&nbsp;flivver[a].height&nbsp;\/&nbsp;2&nbsp;-10,41,39);\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/cxt.drawImage(boo1,flivver[a].x&nbsp;+&nbsp;5&nbsp;,flivver[a].y,41,39);\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flivver[a].hit--;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r\n\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r\n&nbsp;&nbsp;&nbsp;}\r\n\r\n&nbsp;&nbsp;&nbsp;\/\/&nbsp;\u66f4\u65b0\u81ea\u5df1\u7684\u8ddd\u79bb\r\n&nbsp;&nbsp;&nbsp;dotu.setMe&nbsp;=&nbsp;function(){\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cxt.drawImage(meImg,me.x,me.y,64,72);\r\n&nbsp;&nbsp;&nbsp;}\r\n\r\n&nbsp;&nbsp;&nbsp;\/\/&nbsp;\u66f4\u65b0\u5b50\u5f39\u65b9\u6cd5\r\n&nbsp;&nbsp;&nbsp;dotu.cartridge&nbsp;=&nbsp;function(){\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(dotu.nums&nbsp;%&nbsp;10&nbsp;==&nbsp;0){\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cartridges.push(new&nbsp;cartridge(me.x&nbsp;+&nbsp;30,me.y));\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r\n\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for(i&nbsp;in&nbsp;cartridges){\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/&nbsp;\u98de\u5230\u9876\u90e8\u5c31\u5c06OBJ\u5220\u9664\u6389\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(cartridges[i].y&nbsp;&nbsp;0){\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;continue;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(cartridges[i].x&nbsp;&amp;gt;&nbsp;flivver[j].x&nbsp;&amp;amp;&amp;amp;&nbsp;cartridges[i].x&nbsp;&nbsp;&nbsp;flivver[j].y&nbsp;&amp;amp;&amp;amp;&nbsp;cartridges[i].y&nbsp;-flivver[j].height&nbsp;&nbsp;1){\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flivver[j].hp&nbsp;-=&nbsp;80;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else{\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flivver[j].over&nbsp;=&nbsp;40;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;jifen&nbsp;+=&nbsp;50000;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/&nbsp;\u5b50\u5f39\u6d88\u5931\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cartridges.splice(i,&nbsp;1);\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r\n&nbsp;&nbsp;&nbsp;}\r\n\r\n&nbsp;&nbsp;&nbsp;\/\/&nbsp;\u7ed1\u5b9a\u9f20\u6807\u4e8b\u4ef6\r\n&nbsp;&nbsp;&nbsp;c.addEventListener('mousemove',&nbsp;function&nbsp;onMouseMove(evt)&nbsp;{\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me.x&nbsp;=&nbsp;evt.layerX&nbsp;-&nbsp;$('#dotu').offset().left&nbsp;-&nbsp;32;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me.y&nbsp;=&nbsp;evt.layerY&nbsp;-&nbsp;&nbsp;36&nbsp;;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('#sbX').html(me.x);\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('#sbY').html(me.y);\r\n&nbsp;&nbsp;&nbsp;});\r\n\r\n&nbsp;&nbsp;&nbsp;fps&nbsp;=&nbsp;setInterval(dotu.update,&nbsp;1000\/100);&nbsp;\r\n}(cxt))\r\n\r\n\r\nfunction&nbsp;newImg(src){\r\n&nbsp;&nbsp;&nbsp;var&nbsp;obj&nbsp;=&nbsp;new&nbsp;Image();\r\n&nbsp;&nbsp;&nbsp;obj.src&nbsp;=&nbsp;src;\r\n&nbsp;&nbsp;&nbsp;return&nbsp;obj;\r\n}\r\n\r\n\/\/setInterval(h.update,&nbsp;1000\/65);<\/pre>\n<p>  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n<p>\u4ee3\u7801\u5982\u4e0b:<\/p>\n<pre>nbsp;html&amp;gt;\r\nhttp:\/\/www.w3.org\/1999\/xhtml\"&amp;gt;\r\n\r\n&lt;meta&gt;&lt;title&gt;\u6253\u98de\u673a&nbsp;-&nbsp;\u591a\u9014&lt;\/title&gt;&lt;script&gt;&lt;\/script&gt;&lt;style&gt;\r\nbody{padding:0; margin:0; text-align:center}\r\n.content{border:1px #000 solid; width:480px; margin:0 auto; height:800px; display:block; font-size:72px;}\r\n.info,.blog{border:1px #000 solid; position:fixed; top:5px; right:5px; width:150px; text-align:left}\r\n.blog{ left:10px; background:#000; text-align:center; width:100px}\r\n.blog a{ color: #FFF; text-decoration:none; font-size:15px; }\r\n&lt;\/style&gt;&lt;p&gt;&lt;canvas&gt;&lt;\/canvas&gt;&lt;\/p&gt;\r\n&lt;p&gt;&lt;a&gt;\u56de\u5230\u535a\u5ba2\u9996\u9875&lt;\/a&gt;&lt;\/p&gt;\r\n&lt;p&gt;\r\n&nbsp;&nbsp;&nbsp;\u9f20\u6807X\uff1a&lt;span&gt;&lt;\/span&gt;\r\n\u9f20\u6807Y\uff1a&lt;span&gt;&lt;\/span&gt;\r\n\u5c0f\u98de\u673a\u6570:&lt;span&gt;&lt;\/span&gt;\r\n\u5b50\u5f39\u6570:&lt;span&gt;&lt;\/span&gt;\r\n\u6253\u4e2d:&lt;span&gt;&lt;\/span&gt;\r\n\u751f\u6210\u98de\u673a\u65f6\u95f4:&lt;span&gt;&lt;\/span&gt;\r\n\r\n&lt;\/p&gt;\r\n&lt;script&gt;&lt;\/script&gt;<\/pre>\n<p>  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n<p><\/p>\n<p>\u4ee5\u4e0a\u5c31\u662fhtml5\u5b9e\u73b0\u5fae\u4fe1\u6253\u98de\u673a\u6e38\u620f\u4ee3\u7801\u5206\u4eab\u7684\u8be6\u7ec6\u5185\u5bb9\uff0c\u66f4\u591a\u8bf7\u5173\u6ce8\u7c73\u4e91\u5176\u5b83\u76f8\u5173\u6587\u7ae0\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u8fd9\u7bc7\u6587\u7ae0\u4e3b\u8981\u4ecb\u7ecd\u4e86html5\u5b9e\u73b0\u5fae\u4fe1\u6253\u98de\u673a\u6e38\u620f,\u9700\u8981\u7684\u670b\u53cb\u53ef\u4ee5\u53c2\u8003\u4e0b html5\u5b9e\u73b0\u5fae\u4fe1\u7684\u6253\u98de\u673a\u6e38\u620f,\u5229\u7528\u8fd9\u4e2a\u5c0f\u6e38\u620f\u5b66\u4e60\u4e00\u4e2aHTML5\u5427\uff0c\u8fd9\u662f\u5f00\u53d1WEB\u7684\u4e00\u4e2a\u65b9\u5411 \u4ee3\u7801\u5982\u4e0b: \/\/&nbsp;JavaScript&nbsp;Document var&nbsp;c&nbsp;=&nbsp;document.getElementById(&#8220;dotu&#8221;); var&nbsp;cxt&nbsp;=&nbsp;c.getContext(&#8220;2d&#8221;); var&nbsp;img&nbsp;=&nbsp;newImg(&#8220;.\/assets\/bg_01.jpg&#8221;); var&nbsp;fps; cxt.drawImage(img,0,0,480,800); var&nbsp;flivverLog&nbsp;=&nbsp;0; var&nbsp;flivver1&nbsp;=&nbsp;newImg(&#8220;.\/assets\/flivver.png&#8221;); var&nbsp;flivver2&nbsp;=&nbsp;newImg(&#8220;.\/assets\/flivver2.png&#8221;); var&nbsp;flivver3&nbsp;=&nbsp;newImg(&#8220;.\/assets\/flivver3.png&#8221;); \/\/&nbsp;\u7528\u4e8e\u8bb0\u5f55\u6e38\u620f\u7684\u65f6\u95f4\uff0c\u8d8a\u5230\u540e\u9762\u8d8a\u5feb var&nbsp;time1&nbsp;=&nbsp;0; var&nbsp;time2&nbsp;=&nbsp;80; \/\/&nbsp;\u79ef\u5206 var&nbsp;jifen&nbsp;=&nbsp;0; function&nbsp;getSudu(){ &nbsp;&nbsp;&nbsp;var&nbsp;number&nbsp;=&nbsp;parseInt(Math.random()*10); &nbsp;&nbsp;&nbsp;if(number&nbsp;&nbsp;0){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;number; &nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;return&nbsp;1; } \/\/&nbsp;\u98de\u673a\u7684\u5bf9\u8c61 function&nbsp;flivverObj(hp,ewidth,eheight,eimg,esudu){ &nbsp;&nbsp;&nbsp;\/\/&nbsp;\u968f\u673a\u7684X &nbsp;&nbsp;&nbsp;this.x&nbsp;=&nbsp;parseInt(Math.random()*460+1); &nbsp;&nbsp;&nbsp;this.y&nbsp;=&nbsp;0; &nbsp;&nbsp;&nbsp;\/\/&nbsp;\u8840\u91cf &nbsp;&nbsp;&nbsp;this.hp&nbsp;=&nbsp;hp; &nbsp;&nbsp;&nbsp;\/\/&nbsp;\u6328\u6253&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;this.hit&nbsp;=&nbsp;0; &nbsp;&nbsp;&nbsp;\/\/&nbsp;\u662f\u5426\u6b7b\u4ea1 &nbsp;&nbsp;&nbsp;this.over&nbsp;=&nbsp;0; &nbsp;&nbsp;&nbsp;this.width&nbsp;=&nbsp;ewidth; &nbsp;&nbsp;&nbsp;this.height&nbsp;=&nbsp;eheight; &nbsp;&nbsp;&nbsp;this.img&nbsp;=&nbsp;eimg; &nbsp;&nbsp;&nbsp;this.sudu&nbsp;=&nbsp;esudu; } \/\/&nbsp;\u83b7\u53d6\u98de\u673a function&nbsp;getFlivver(type){ &nbsp;&nbsp;&nbsp;switch(type){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case&nbsp;1: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;new&nbsp;flivverObj(100,50,30,flivver1,getSudu()); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case&nbsp;2: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;new&nbsp;flivverObj(500,70,90,flivver2,getSudu()); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case&nbsp;3: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;new&nbsp;flivverObj(1000,110,170,flivver3,getSudu()); &nbsp;&nbsp;&nbsp;} } function&nbsp;cartridge(x,y){ &nbsp;&nbsp;&nbsp;this.x&nbsp;=&nbsp;x; &nbsp;&nbsp;&nbsp;this.y&nbsp;=&nbsp;y;&nbsp; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[],"class_list":["post-29220","post","type-post","status-publish","format-standard","hentry","category-19"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/29220","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/comments?post=29220"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/29220\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=29220"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=29220"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=29220"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}