تشترك هذه المقالة في رمز التنفيذ الخاص بـ H5 Canvas Shooting Mini Game للرجوع إليه. المحتوى المحدد كما يلي
<! doctype html> <html> <head> <meta charset = "utf-8"> </title> </title> </head> <body onload = "init (19 ، 'mylegend' ، 820،500 ، main ، levent.in)"> <div id = "mylegend"> 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 ، reemy ، gameover ، all = 0 ، aim ، var point = {x: 100 ، y: 250} ؛ var imglist = {} ؛ var imgdata = new array ({name: 'face' ، path: '../ jQueryTest/Images/l8.png'}) ؛ وظيفة Main () {lloadManage.load (imgdata) ؛ lglobal.box2d = جديد lbox2d () ؛ backlayer = new lsprite () ؛ addchild (backlayer) ؛ // إنشاء مجموعة من الجدران // 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] ، true ، "#cc3300") ؛ backlayer.graphics.drawrect (1 ، "#cc3300" ، [447،187،3،210] ، true ، "#cc3300") ؛ // 3 backlayer.graphics.drawRect (1 ، "#cc3300" ، [538،87،3.103] backlayer.graphics.drawrect (1 ، "#cc3300" ، [541،137،70،3] ، true ، "#cc3300") ؛ // 5 backlayer.graphics.drawRect (1 ، "#cc3300" ، [611،137،3،263] lsprite () ؛ backlayer.addchild (Clayer) ؛ // من خلال صفيف إحداثيات القمة ، أضف الجدران العلوية والسفلية واليسرى واليسرى varapearray = [// [[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 ، [[541،137] ، [611،137] ، [611،140] ، [541،140]] ، [[611،137] ، [614،137] ، [614،400] ، [611،400]]] ؛ Clayer.AddBodyVterices (ShapeArray ، 0،0،0،5.5،0.4،0.5) ؛ // أضف دائرة لإضافة حدث نقرة لإظهار دائرة الكرة الصغيرة = New LSPrite () ؛ backlayer.addchild (Circle) ؛ Circle.Graphics.Drawarc (1 ، "#336699" ، [point.x ، point.y ، 40،0،2*Math.pi ، true ، "#336699"]) ؛ // إضافة عمود وصف لعبة shuoming = new ltextfield () ؛ shuoming.x = 20 ؛ shuoming.y = 10 ؛ shuoming.text = 'انقر على الدائرة على اليسار لتصوير ، والمسافة بين الماوس ومركز الدائرة تتحكم في قوة التصوير "؛ backlayer.addchild (shuoming) ؛ // أضف عمود التسجيل واضغط على شريط معدل defen = جديد ltextfield () ؛ defen.x = 200 ؛ defen.y = 100 ؛ defen.text = 'Score: 0' ؛ backlayer.addchild (defen) ؛ Mingzhong = new ltextfield () ؛ Mingzhong.x = 280 ؛ Mingzhong.y = 100 ؛ mingzhong.text = "معدل ضرب: 0 ٪ '؛ backlayer.addchild (Mingzhong) ؛ // عرض مستوى guanqia = جديد ltextfield () ؛ guanqia.x = 120 ؛ Guanqia.y = 100 ؛ guanqia.text = 'المستوى:'+نقطة تفتيش ؛ backlayer.addchild (Guanqia) ؛ // إضافة حدث الماوس انقر فوق الماوس لإضافة كرة صغيرة backlayer.addeventListener (lmouseevent.mouse_down ، createBox) ؛ // keyboard event // levent.addeventListener (window ، lkeyboardevent.key_down ، down) ؛ } الدالة 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 ، "Orange" ، [16،16،16،0،360*Math.PI/180] ، True ، "Orange") ؛ Box01.AddbodyCircle (16،0،0،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 (قوة*math.cos (زاوية) ، قوة*math.sin (angle)) ؛ box01.box2dbody.applyforce (VEC ، box01.box2dbody.getWorldCenter ()) ؛ وظيفة check () {if (box01.x <610 && box01.x> 450 && box01.y <400 && box01.y> 180) {checkpoint ++ ؛ AIM ++ ؛ الكل ++ ؛ defen.text = 'Score:'+AIM ؛ mingzhong.text = 'معدل ضرب:'+math.floor (AIM/all*100)+'٪' ؛ if (checkpoint == 2) {// Second Level Rail = new lsprite () ؛ backlayer.addchild (السكك الحديدية) ؛ Rail.Graphics.DrawRect (1 ، "#CC3300" ، [220،135،10،255] ، True ، "#CC3300") ؛ السكك الحديدية = جديد LSPrite () ؛ backlayer.addchild (Raill) ؛ Rail.AddBodyVertices ([[[[[220،135] ، [230،135] ، [230،390] ، [220،390]]] ، 0،0،0،0،0.5،0.4،0.5) ؛ } آخر إذا (checkpoint == 3) {// المستوى الثالث backlayer.removechild (السكك الحديدية) ؛ backlayer.removechild (Raill) ؛ السكك الحديدية = جديد LSPrite () ؛ backlayer.addchild (السكك الحديدية) ؛ Rail.Graphics.DrawRect (1 ، "#CC3300" ، [220،35،10،355] ، True ، "#CC3300") ؛ السكك الحديدية = جديد LSPrite () ؛ backlayer.addchild (Raill) ؛ Rail.AddBodyVertices ([[[[[220،35] ، [230،35] ، [230،390] ، [220،390]]] ، 0،0،0،0،0.5،0.4،0.5) ؛ } آخر إذا (checkpoint == 4) {// المستوى الرابع backlayer.removechild (Rail) ؛ backlayer.removechild (Raill) ؛ السكك الحديدية = جديد LSPrite () ؛ backlayer.addchild (السكك الحديدية) ؛ Rail.Graphics.DrawRect (1 ، "#CC3300" ، [10،180،200،10] ، True ، "#CC3300") ؛ السكك الحديدية = جديد LSPrite () ؛ backlayer.addchild (Raill) ؛ Rail.AddBodyVterices ([[[[10،180] ، [220،180] ، [220،190] ، [10،190]]] ، 0،0،0،0.5،0.4،0.5) ؛ } آخر إذا (checkpoint> 4) {// checkpoint = 4 ؛ تنبيه ("تم مسحه أخيرًا!") ؛ } guanqia.text = 'المستوى:'+نقطة تفتيش ؛ } آخر {all ++ ؛ mingzhong.text = 'معدل ضرب:'+math.floor (AIM/all*100)+'٪' ؛ }} setTimeOut (تحقق ، 2600) ؛ } // لوحة المفاتيح اضغط على وظيفة Moving Muzzle Down (e) {if ( } آخر إذا (e.KeyCode == '39') {// point.x+= 10 ؛ } آخر إذا (e.KeyCode == '38') {// up point.y- = 10 ؛ } آخر إذا (e.KeyCode == '40') {// down point.y+= 10 ؛ } backlayer.removechild (Circle) ؛ Circle = New LSPrite () ؛ backlayer.addchild (Circle) ؛ Circle.Graphics.Drawarc (1 ، "#336699" ، [point.x ، point.y ، 40،0،2*Math.pi ، true ، "#336699"]) ؛ } </script> </body> </html>ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.