Este artículo comparte el código de implementación de H5 Canvas Shooting Mini Juego para su referencia. El contenido específico es el siguiente
<! Doctype html> <html> <fead> <meta charset = "utf-8"> <title> </title> </head> <body onload = "init (19, 'mylegend', 820,500, main, levent.init)"> <div ID = "mylegend"> Carging ... src = "js/box2dweb-2.1.a.3.js"> </script> <script src = "js/lufylegend-1.10.1.js"> </script> <script type = "text/javaScript"> var backlayer, Clayer, enemy, GameOver = Falso, all = 0, AIM = 0, bitmap, complejo = 1; Var Point = {x: 100, y: 250}; var imglist = {}; var imgData = new Array ({nombre: 'Face', ruta: '../ jQueryTest/Images/L8.png'}); function main () {lloadManage.load (imgData); Lglobal.box2d = new Lbox2d (); backlayer = new Lsprite (); AddChild (Backlayer); // Cree un conjunto de paredes // backlayer.graphics.drawrect (1, "#CC3300", [0,0,800,10], verdadero, "#CC3300"); backlayer.graphics.drawrect (1, "#CC3300", [790,0,10,400], verdadero, "#CC3300"); backlayer.graphics.drawrect (1, "#CC3300", [0,0,10,400], verdadero, "#CC3300"); backlayer.graphics.drawrect (1, "#CC3300", [0,0,10,400], verdadero, "#CC3300"); backlayer.graphics.drawrect (1, "#CC3300", [0,0,10,400], verdadero, "#CC3300"); backlayer.graphics.drawrect (1, "#CC3300", [0,390,800,10], verdadero, "#CC3300"); Backlayer.Graphics.Drawrect (1, "#CC3300", [450,187,50,3], verdadero, "#CC3300"); // 1 backlayer.graphics.drawrect (1, "#CC3300", [500,170,3,3,20], true, "#cc3300"); // 2 2 Backlayer.Graphics.Drawrect (1, "#CC3300", [447,187,3,210], verdadero, "#CC3300"); // 3 Backlayer.Graphics.Drawrect (1, "#CC3300", [538,87,3,103], verdadero, "#CC3300");///4 casillas ", [538,87,3,3,103], verdadero,"#CC3300 ");///4 casillas", [538,87,3,103], verdadero, "#CC3300"); Backlayer.Graphics.Drawrect (1, "#CC3300", [541,137,70,3], verdadero, "#CC3300"); // 5 Backlayer.Graphics.Drawrect (1, "#CC3300", [611,137,3,263], verdadero, "#CC3300"); Lsprite (); backlayer.addchild (arcilla); // a través de la matriz de coordenadas de vértice, agregue las paredes superiores, inferiores, izquierda y derecha var shapearray = [// [[0,0], [800,0], [800,10], [0,10]], [[790,0], [800,0], [800,400], [790,400]], y, y, y, y, y, [[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], [538]. [[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); // Agregue un círculo para agregar un evento de clic para aparecer un círculo de bola pequeño = new Lsprite (); backlayer.addchild (círculo); Circle.Graphics.Drawarc (1, "#336699", [Point.x, Point.y, 40,0,2*Math.pi, verdadero, "#336699"]); // Agregar una columna de descripción del juego shuoming = new lTextField (); shuoming.x = 20; shuoming.y = 10; shuoming.text = 'Haga clic en el círculo a la izquierda para disparar, y la distancia entre el mouse y el centro del círculo controla la fuerza de disparo'; backlayer.addchild (shuoming); // Agregue la columna de puntuación y la barra de tasa de hit Defen = new LTextField (); defen.x = 200; defen.y = 100; defen.text = 'sterter: 0'; backlayer.addchild (Defen); mingzhong = new lTextField (); mingzhong.x = 280; Mingzhong.y = 100; mingzhong.text = 'tasa de éxito: 0%'; backlayer.addchild (Mingzhong); // Nivel de visualización guanqia = new lTextField (); guanqia.x = 120; guanqia.y = 100; guanqia.text = 'nivel:'+punto de control; backlayer.addchild (Guanqia); // Agregar evento del mouse Haga clic en el mouse para agregar un pequeño backlayer de pelota.adDeventListener (lMouseEvent.Mouse_Down, CreateBox); // Evento de teclado // levent.addeventListener (Window, lkeyboardEvent.key_down, down); } function createBox (e) {if ((e.offsetx-point.x)*(e.offsetx-point.x)+(e.offsety-point.y)*(e.offsetypoint.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, "Orange", [16,16,16,0,360*Math.pi/180], verdadero, "Naranja"); 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.offsetx-point.x)/20)*330; var vec = new lglobal.box2d.b2vec2 (force*math.cos (ángulo), force*math.sin (ángulo)); box01.box2dbody.applyforce (vec, box01.box2dbody.getworldcenter ()); function check () {if (box01.x <610 && box01.x> 450 && box01.y <400 && box01.y> 180) {checkpoint ++; AIM ++; todos ++; defen.text = 'score:'+apar; mingzhong.text = 'tasa de éxito:'+math.floor (AIM/All*100)+'%'; if (checkpoint == 2) {// Second Level Rail = new Lsprite (); backlayer.addchild (riel); Rail.Graphics.Drawrect (1, "#CC3300", [220,135,10,255], verdadero, "#CC3300"); Rail = new 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 (checkpoint == 3) {// El tercer nivel backlayer.removechild (riel); backlayer.removechild (Raill); Rail = new Lsprite (); backlayer.addchild (riel); Rail.Graphics.Drawrect (1, "#CC3300", [220,35,10,355], verdadero, "#CC3300"); Rail = new 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 (checkpoint == 4) {// El backlayer de cuarto nivel.removechild (riel); backlayer.removechild (Raill); Rail = new Lsprite (); backlayer.addchild (riel); Rail.Graphics.Drawrect (1, "#CC3300", [10,180,200,10], verdadero, "#CC3300"); Rail = new 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 (punto de control> 4) {// checkpoint = 4; alerta ('¡Finalmente borrado!'); } guanqia.text = 'nivel:'+checkpoint; } else {all ++; mingzhong.text = 'tasa de éxito:'+math.floor (AIM/All*100)+'%'; }} setTimeout (cheque, 2600); } // Presione la función de boca móvil hacia abajo (e) {if (E.KeyCode == '37') {// Point izquierdo.x- = 10; } else if (e.keycode == '39') {// punto derecho.x+= 10; } else if (e.keycode == '38') {// up Point.y- = 10; } else if (e.keycode == '40') {// down point.y+= 10; } backlayer.removechild (círculo); círculo = nuevo lsprite (); backlayer.addchild (círculo); Circle.Graphics.Drawarc (1, "#336699", [Point.x, Point.y, 40,0,2*Math.pi, verdadero, "#336699"]); } </script> </body> </html>Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.