이 기사에서는 참조를 위해 H5 Canvas 촬영 미니 게임의 구현 코드를 공유합니다. 특정 내용은 다음과 같습니다
<! docType html> <html> <head> <메타 charset = "utf-8"> </title> </head> <body onload = "init (19, 'mylegend', 820,500, main, levent.init)"> <div id = "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, premy, gameover = false, all = 0, bitmap = 1; var point = {x : 100, y : 250}; var imglist = {}; var imgdata = new Array ({이름 : 'face', path : '../ jQueryTest/images/l8.png'}); 함수 main () {lloadmanage.load (imgdata); lglobal.box2d = 새로운 lbox2d (); 백 레이어 = 새로운 lsprite (); AddChild (백 레이어); // 벽 세트를 작성 // 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,20], True, "#CC3300"; // 2 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 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 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], [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); // 원을 추가하여 클릭 이벤트를 추가하여 작은 공 CIRCLE = new 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 = 'score : 0'; Backlayer.addchild (defen); Mingzhong = New Ltextfield (); mingzhong.x = 280; Mingzhong.y = 100; Mingzhong.text = '적중률 : 0%'; Backlayer.addchild (Mingzhong); // 레벨 디스플레이 guanqia = new ltextfield (); guanqia.x = 120; guanqia.y = 100; guanqia.text = 'level :'+checkpoint; Backlayer.addchild (Guanqia); // 마우스 이벤트 추가 마우스를 클릭하여 작은 공 백 레이어를 추가하십시오. AddeventListener (lmouseevent.mouse_down, createbox); // 키보드 이벤트 // levent.addeventListener (창, lkeyboardevent.key_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 = 새로운 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 = new lglobal.box2d.b2vec2 (힘*math.cos (각도), 힘*math.sin (각도)); 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) {// 두 번째 레벨 레일 = new lsprite (); Backlayer.addchild (Rail); 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,0.5,0.4,0.5); } else if (checkpoint == 3) {// 세 번째 레벨 백 레이어 .removeChild (Rail); Backlayer.RemoveChild (Raill); RAIL = NEW LSPRITE (); Backlayer.addchild (Rail); 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,0.5,0.4,0.5); } else if (checkpoint == 4) {// 네 번째 레벨 백 레이어 .removeChild (Rail); Backlayer.RemoveChild (Raill); RAIL = NEW LSPRITE (); Backlayer.addchild (Rail); 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,0.5,0.4,0.5); } else if (checkpoint> 4) {// checkpoint = 4; 경고 ( '마침내 청소!'); } guanqia.text = 'level :'+checkpoint; } else {all ++; mingzhong.text = '적중률 :'+math.floor (AIM/ALL*100)+'%'; }} settimeout (Check, 2600); } // 키보드 이동 총구 기능을 누르십시오 (e) {if (e.keyCode == '37') {// 왼쪽 point.x- = 10; } else if (e.keyCode == '39') {// 오른쪽 point.x+= 10; } else if (e.keyCode == '38') {// up point.y- = 10; } else if (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을 더 지원하기를 바랍니다.