Dieser Artikel teilt den Implementierungscode von H5 Canvas Shooting Mini -Spiel für Ihre Referenz. Der spezifische Inhalt ist wie folgt
<! DocType html> <html> <head> <meta charset = "utf-8"> <title> </title> </head> <body onload = "init (19, 'mylegend', 820.500, main, Levent.init)"> <divid = "mylegend"> ...... </div> < 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=false,all=0,aim=0,bitmap,checkpoint=1; var point = {x: 100, y: 250}; var imglist = {}; var imgdata = new Array ({name: 'face', path: '../ jQueryTest/Bilder/l8.png'}); Funktion main () {loadManage.load (imgdata); Lglobal.box2d = new LBOX2D (); backlayer = new lsprite (); addChild (Backlayer); // Erstellen Sie eine Reihe von Wänden // 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 backlayer.graphics.drawrect (1, "#CC3300", [447,187,3,210], True, "#CC3300"); // 3 Backlayer.Graphics backlayer.graphics.drawrect (1, "#cc3300", [541,137,70,3], True, "#CC3300"); // 5 Backlayer.Graphics 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); // Fügen Sie einen Kreis hinzu, um ein Klick -Ereignis hinzuzufügen, um kleiner Ballkreis = new lsprite (); backlayer.addchild (Kreis); Circle.Graphics.Drawarc (1, "#336699", [point.x, point.y, 40,0,2*math.pi, true, "#336699"]); // Fügen Sie eine Spalte für Spielbeschreibung hinzu shuoming = new ltextfield (); shuoming.x = 20; shuoming.y = 10; Shuoming.Text = 'Klicken Sie auf den Kreis links, um zu schießen, und der Abstand zwischen der Maus und der Mitte des Kreises steuert die Schießfestigkeit. Backlayer.Addchild (Shuoming); // Fügen Sie die Bewertungsspalte hinzu und klicken Sie auf Rate Bar defen = new ltextfield (); defen.x = 200; defen.y = 100; Defen.Text = 'Punktzahl: 0'; backlayer.addchild (defen); mingzhong = new ltextfield (); Mingzhong.x = 280; mingzhong.y = 100; mingzhong.text = 'Hit -Rate: 0%'; Backlayer.Addchild (Mingzhong); // Level Anzeige Guanqia = new ltextfield (); Guanqia.x = 120; Guanqia.y = 100; Guanqia.Text = 'Level:'+Checkpoint; Backlayer.Addchild (Guanqia); // Mausereignis hinzufügen Klicken Sie auf die Maus, um einen kleinen Ball -Backlayer hinzuzufügen. // Tastaturereignis // Levent.AdDeVentListener (Fenster, lkeyboardEvent.key_down, down); } function createBox (e) {if ((e.Offsetx-point.x)*(e.Offsetx-point.x)+(e.offsety-point.y)*(e.offsety-point.y)> 40*40) return; var box01 = neuer 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], true, "orange"); Box01.AddBodyCircle (16,0,0,1,1,0,5,0,6); var Angle = math.atan2 (E.offsety-point.y, e.offsetx-point.x); var forc = (math.sqrt ((point.ye.offsety)*(point.ye.offsety)+(e.offsetx-point.x)*(e.offsetx-point.x))/20)*330; var vec = new lglobal.box2d.b2vec2 (Kraft*math.cos (Winkel), Kraft*Math.sin (Winkel)); box01.box2dbody.applyforce (vec, box01.box2dbody.getworldCenter ()); Funktion check () {if (box01.x <610 && box01.x> 450 && box01.y <400 && box01.y> 180) {Checkpoint ++; AIM ++; alle ++; Defen.Text = 'Score:'+AIM; mingzhong.text = 'Hit -Rate:'+math.floor (AIM/All*100)+'%'; if (Checkpoint == 2) {// zweite Stufe Rail = new lsprite (); Backlayer.Addchild (Schiene); Rail.Graphics.Drawrect (1, "#CC3300", [220,135,10,255], True, "#CC3300"); Rail = new lsprite (); backlayer.addchild (raill); Rail.AddBodyvertices ([[[[220,135], [230.135], [230,390], [220,390]]], 0,0,0,0,5,0,4,0,5); } else if (checkpoint == 3) {// Die dritte Stufe backlayer.removechild (Rail); backlayer.removechild (raill); Rail = new lsprite (); Backlayer.Addchild (Schiene); Rail.Graphics.Drawrect (1, "#CC3300", [220,35,10,355], True, "#CC3300"); Rail = new lsprite (); backlayer.addchild (raill); Rail.AddBodyvertices ([[[[220,35], [230,35], [230,390], [220,390]]], 0,0,0,0,5,0,4,0,5); } else if (Checkpoint == 4) {// Die vierte Stufe backlayer.removechild (Rail); backlayer.removechild (raill); Rail = new lsprite (); Backlayer.Addchild (Schiene); Rail.Graphics.Drawrect (1, "#CC3300", [10.180.200,10], True, "#CC3300"); Rail = new lsprite (); backlayer.addchild (raill); Rail.AddBodyvertices ([[[10,180], [220,180], [220,190], [10,190]]], 0,0,0,0,5,0,4,0,5); } else if (Checkpoint> 4) {// checkpoint = 4; ALERT ('endlich geklärt!'); } Guanqia.text = 'Level:'+Checkpoint; } else {all ++; mingzhong.text = 'Hit -Rate:'+math.floor (AIM/All*100)+'%'; }} setTimeout (Check, 2600); } // Tastatur drücken Sie die Mocke-Mündungsfunktion nach unten (e) {if (e.keycode == '37') {// linke Punkt.x- = 10; } else if (e.keycode == '39') {// rechter Punkt.x+= 10; } else if (e.keycode == '38') {// up point.y- = 10; } else if (e.keycode == '40') {// down point.y+= 10; } backlayer.removechild (Kreis); Circle = new lsprite (); backlayer.addchild (Kreis); Circle.Graphics.Drawarc (1, "#336699", [point.x, point.y, 40,0,2*math.pi, true, "#336699"]); } </script> </body> </html>Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.