บทความนี้แบ่งปันรหัสการใช้งานของ H5 Canvas การถ่ายภาพมินิเกมสำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> </title> </head> <body onload = "init (19, 'mylegend', 820,500, main, levent.init)"> <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 var point = {x: 100, y: 250}; var imglist = {}; var imgdata = อาร์เรย์ใหม่ ({ชื่อ: 'face', เส้นทาง: '../ jQueryTest/images/l8.png'}); ฟังก์ชั่นหลัก () {lloadManage.load (imgdata); lglobal.box2d = ใหม่ lbox2d (); backlayer = new lsprite (); addchild (backlayer); // สร้างชุดของผนัง // backlayer.graphics.drawrect (1, "#cc3300", [0,0,800,10], จริง, "#cc3300"); backlayer.graphics.drawrect (1, "#CC3300", [790,0,10,400], จริง, "#CC3300"); backlayer.graphics.drawrect (1, "#CC3300", [0,0,10,400], จริง, "#CC3300"); backlayer.graphics.drawrect (1, "#CC3300", [0,0,10,400], จริง, "#CC3300"); backlayer.graphics.drawrect (1, "#CC3300", [0,0,10,400], จริง, "#CC3300"); backlayer.graphics.drawrect (1, "#CC3300", [0,390,800,10], จริง, "#CC3300"); backlayer.graphics.drawrect (1, "#cc3300", [450,187,50,3], จริง, "#cc3300"); // 1 backlayer.graphics.drawrect (1, "#CC3300" backlayer.graphics.drawrect (1, "#cc3300", [447,187,3,210], จริง, "#cc3300"); // 3 backlayer.graphics.drawrect (1, "#cc3300" backlayer.graphics.drawrect (1, "#cc3300", [541,137,70,3], จริง, "#cc3300"); // 5 backlayer.graphics.drawrect (1,#cc3300 " lsprite (); backlayer.addchild (clayer); // ผ่านอาร์เรย์พิกัดจุดสุดยอดเพิ่มผนังด้านบนล่างซ้ายและขวา 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] [[500,170], [503,170], [503,190], [500,190]], [[447,187], [450,187], [450,397], [447,397], [538,87], [541,87] [[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); // เพิ่มวงกลมเพื่อเพิ่มเหตุการณ์คลิกเพื่อปรากฏวงกลมบอลขนาดเล็ก = ใหม่ lsprite (); backlayer.addchild (วงกลม); 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 = new ltextfield (); defen.x = 200; defen.y = 100; defen.text = 'คะแนน: 0'; backlayer.addchild (defen); Mingzhong = ใหม่ ltextfield (); Mingzhong.x = 280; Mingzhong.y = 100; mingzhong.text = 'อัตราการเข้าชม: 0%'; backlayer.addchild (Mingzhong); // การแสดงระดับ guanqia = new ltextfield (); guanqia.x = 120; guanqia.y = 100; guanqia.text = 'ระดับ:'+จุดตรวจ; backlayer.addchild (Guanqia); // เพิ่มเหตุการณ์เมาส์คลิกที่เมาส์เพื่อเพิ่มลูกบอลขนาดเล็ก backlayer.addeventListener (lmousevent.mouse_down, createBox); // คีย์บอร์ดเหตุการณ์ // levent.addeventListener (หน้าต่าง, lkeyboardevent.key_down, ลง); } function createBox (e) {if ((e.offsetx-point.x)*(e.offsetx-point.x)+(e.offsety-point.y)*(e.offsety-point.y)> 40*40) คืน; var box01 = 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 force = (math.sqrt ((point.ye.offsety)*(point.ye.offsety)+(e.offsetx-point.x)*(e.offsetx-point.x)/20)*330; var Vec = ใหม่ lglobal.box2d.b2vec2 (force*math.cos (มุม), แรง*math.sin (มุม)); Box01.Box2dbody.applyForce (VEC, Box01.Box2dbody.getWorldCenter ()); ฟังก์ชั่นตรวจสอบ () {ถ้า (box01.x <610 && box01.x> 450 && box01.y <400 && box01.y> 180) {checkpoint ++; AIM ++; ทั้งหมด ++; defen.text = 'คะแนน:'+AIM; mingzhong.text = 'อัตราการเข้าชม:'+math.floor (AIM/All*100)+'%'; if (checkpoint == 2) {// rail ระดับที่สอง = ใหม่ lsprite (); backlayer.addchild (ราง); Rail.Graphics.DrawRect (1, "#CC3300", [220,135,10,255], จริง, "#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) {// backlayer ระดับที่สาม removeChild (ราง); backlayer.removechild (Raill); Rail = new lsprite (); backlayer.addchild (ราง); Rail.Graphics.DrawRect (1, "#CC3300", [220,35,10,355], จริง, "#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); } อื่นถ้า (checkpoint == 4) {// backlayer ระดับที่สี่.removeChild (ราง); backlayer.removechild (Raill); Rail = new lsprite (); backlayer.addchild (ราง); Rail.Graphics.DrawRect (1, "#CC3300", [10,180,200,10], จริง, "#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); } อื่นถ้า (จุดตรวจสอบ> 4) {// จุดตรวจสอบ = 4; การแจ้งเตือน ('เคลียร์ในที่สุด!'); } guanqia.text = 'ระดับ:'+จุดตรวจ; } else {ทั้งหมด ++; mingzhong.text = 'อัตราการเข้าชม:'+math.floor (AIM/All*100)+'%'; }} settimeout (ตรวจสอบ, 2600); } // คีย์บอร์ดกดฟังก์ชันปากกระบอกปืนที่เคลื่อนที่ลง (e) {ถ้า (e.kecomped == '37') {// left point.x- = 10; } อื่นถ้า (e.kecompode == '39') {// right point.x+= 10; } อื่นถ้า (e.kecompode == '38') {// up point.y- = 10; } อื่นถ้า (e.keycode == '40') {// down point.y+= 10; } backlayer.removeChild (วงกลม); circle = new lsprite (); backlayer.addchild (วงกลม); circle.graphics.drawarc (1, "#336699", [point.x, point.y, 40,0,2*math.pi, true, "#336699"]); } </script> </body> </html>ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น