Este artigo compartilha o Código de Implementação do H5 Canvas Shooting Mini Game para sua referência. O conteúdo específico é o seguinte
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> </title> </head> <corpo onload = "init (19, 'mylegend', 820,500, main, lEvent.init)"> <div id = "mylegend"> carregando ...... src = "js/box2dweb-2.1.a.3.js"> </script> <script src = "js/lufylegend-1.10.1.js"> </script> <script type = "text/javascript"> var backayer, clayer, bitsover = all) 0; var point = {x: 100, y: 250}; var iMglist = {}; var iMgdata = nova matriz ({name: 'face', caminho: '../ jQuerytest/imagens/l8.png'}); function main () {lloadManage.load (imgdata); Lglobal.box2d = new lBox2d (); Backlayer = new LSPRITE (); addChild (Backlayer); // Crie um conjunto de paredes // backlayer.graphics.drawrect (1, "#cc3300", [0,0,800,10], true, "#cc3300"); backlayer.graphics.Drawrect (1, "#cc3300", [790,0,10,400], true, "#cc3300"); backlayer.graphics.Drawrect (1, "#cc3300", [0,0,10,400], true, "#cc3300"); backlayer.graphics.Drawrect (1, "#cc3300", [0,0,10,400], true, "#cc3300"); backlayer.graphics.Drawrect (1, "#cc3300", [0,0,10,400], true, "#cc3300"); backlayer.graphics.Drawrect (1, "#cc3300", [0,390,800,10], true, "#cc3300"); Backlayer.Graphics.DrawRect (1, "#CC3300", [450,187,50,3], True, "#CC3300"); // 1 Backlayer.Graphics.DrawRect (1, "#cc3300", [500,170,3,20,20], backLayer.graphics.drawRect(1,"#cc3300",[447,187,3,210],true,"#cc3300");//3 backLayer.graphics.drawRect(1,"#cc3300",[538,87,3,103],true,"#cc3300");//4 Box radius 35 backLayer.graphics.drawRect(1,"#cc3300",[541,137,70,3],true,"#cc3300");//5 backLayer.graphics.drawRect(1,"#cc3300",[611,137,3,263],true,"#cc3300");//6 cLayer=new Lsprite (); Backlayer.addchild (Clayer); // Through the vertex coordinate array, add the upper, lower, left and right walls var shapeArray=[ //[[0,0],[800,0],[800,10],[0,10]], [[790,0],[800,0],[800,400],[790,400]], [[0,0],[10,0],[10,400],[0,400]], [[0,390],[800,390],[800,400],[0,400]], [[450,187],[500,187],[500,190],[450,190]], [[500,170],[503,170],[503,190],[500,190]], [[447,187],[450,187],[450,397],[447,397],[538,87],[541,87],[541,190],[538,190]], [[541,137], [611,137], [611,140], [541,140]], [[611,137], [614,137], [614,400], [611,400]]]; Clayer.Addbodyvertices (Shapearray, 0,0,0,0,5,0,4,0,5); // Adicione um círculo para adicionar um evento de clique para aparecer pequeno círculo de esferas = novo lsprite (); Backlayer.addchild (círculo); circ.graphics.drawarc (1, "#336699", [Point.x, Point.Y, 40,0,2*Math.pi, True, "#336699"]); // Adicione uma coluna de descrição do jogo shuoming = new ltextfield (); shuoming.x = 20; shuoming.y = 10; shuoming.Text = 'Clique no círculo à esquerda para disparar, e a distância entre o mouse e o centro do círculo controla a força de tiro'; Backlayer.addchild (Shuoming); // Adicione a coluna de pontuação e a barra de taxa de acertar Defsen = new Ltextfield (); Defen.x = 200; Defen.y = 100; Defen.Text = 'Score: 0'; Backlayer.addchild (Defen); mingzhong = novo ltextfield (); mingzhong.x = 280; mingzhong.y = 100; mingzhong.text = 'Taxa de acerto: 0%'; Backlayer.addchild (Mingzhong); // Display de nível Guanqia = new Ltextfield (); guanqia.x = 120; guanqia.y = 100; guanqia.text = 'nível:'+ponto de verificação; Backlayer.addchild (Guanqia); // Adicione o evento do mouse, clique no mouse para adicionar uma pequena backlayer.addeventListener (lmouseevent.mouse_down, createbox); // Evento do teclado // LEVEV.AddeventListener (Window, lkeyboardEvent.key_down, Down); } função createBox (e) {if ((e.offsetx-point.x)*(e.offsetx-Point.x)+(e.offsety-Point.y)*(e.offsety-Point.y)> 40*40) return; var box01 = new lsprite (); box01.name = 'mybox'; Box01.x = E.Selfx; Box01.y = E.Selfy; Backlayer.addchild (Box01); box01.graphics.drawarc (1, "laranja", [16,16,16,0,360*math.pi/180], verdadeiro, "laranja"); Box01.Addbodycircle (16,0,0,1,1,0,5,0,6); var angle = math.atan2 (e.offsety-Point.y, e.offsetx-point.x); var force = (math.sqrt ((Point.ye.offsety)*(Point.ye.offsety)+(e.offsetx-point.x)*(e.offsetxpoint.x)/20)*330; var vec = new lglobal.box2d.b2vec2 (force*math.cos (ângulo), force*math.sin (ângulo)); box01.box2dbody.applyforce (vec, box01.box2dbody.getworldCenter ()); função check () {if (box01.x <610 && box01.x> 450 && box01.y <400 && box01.y> 180) {ponto de verificação ++; AIM ++; all ++; Defen.Text = 'Score:'+AIM; mingzhong.text = 'Taxa de acerto:'+math.floor (AIM/All*100)+'%'; if (ponto de verificação == 2) {// Rail de segundo nível = new LSPrite (); Backlayer.addchild (Rail); Rail.Graphics.DrawRect (1, "#CC3300", [220,135,10,255], True, "#CC3300"); trilho = novo lsprite (); Backlayer.addchild (Raill); Rail.addbodyvertices ([[[[220,135], [230,135], [230,390], [220,390]], 0,0,0,0,0,5,0,4,0,5); } else if (ponto de verificação == 3) {// a backlayer de terceiro nível.RemoveChild (Rail); Backlayer.RemoveChild (Raill); trilho = novo lsprite (); Backlayer.addchild (Rail); Rail.Graphics.DrawRect (1, "#CC3300", [220,35,10,355], True, "#CC3300"); trilho = novo lsprite (); Backlayer.addchild (Raill); Rail.Addbodyvertices ([[[[220,35], [230,35], [230,390], [220,390]], 0,0,0,0,0,5,0.4,0.5); } else if (ponto de verificação == 4) {// a backlayer.RemoveChild (trilho); Backlayer.RemoveChild (Raill); trilho = novo lsprite (); Backlayer.addchild (Rail); Rail.Graphics.DrawRect (1, "#CC3300", [10.180,200,10], True, "#CC3300"); trilho = novo lsprite (); Backlayer.addchild (Raill); Rail.Addbodyvertices ([[[10,180], [220,180], [220,190], [10,190]]], 0,0,0,0,0,5,0.4,0.5); } else if (ponto de verificação> 4) {// ponto de verificação = 4; alerta ('finalmente limpo!'); } guanqia.text = 'nível:'+ponto de verificação; } else {all ++; mingzhong.text = 'Taxa de acerto:'+math.floor (AIM/All*100)+'%'; }} setTimeout (check, 2600); } // teclado pressione a função de focinho em movimento para baixo (e) {if (e.KeyCode == '37') {// ponto esquerdo.x- = 10; } else if (e.KeyCode == '39') {// ponto direito.x+= 10; } else if (e.KeyCode == '38') {// up Point.y- = 10; } else if (e.KeyCode == '40') {// Point de baixo.Y+= 10; } backlayer.removeChild (círculo); Circle = new LSPrite (); Backlayer.addchild (círculo); circ.graphics.drawarc (1, "#336699", [Point.x, Point.Y, 40,0,2*Math.pi, True, "#336699"]); } </script> </body> </html>O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.