この記事では、参照のためにミニゲームを撮影するH5キャンバスの実装コードを共有しています。特定のコンテンツは次のとおりです
< src = "js/box2dweb-2.1.a.3.js"> </scrip> <script src = "js/lufylegend-1.10.1.js"> </script> <script> <script> <text/javascript "> var backlayer、clayer、敵、ゲームオーバー= fals = all = 0、aim = 0、bitmap、ceckpoint = 1; var point = {x：100、y：250}; var imglist = {}; var imgdata = new Array（{name： 'face'、path： '../ jquerytest/images/l8.png'}）; function main（）{lloadmanage.load（imgdata）; lglobal.box2d = new 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,333,103]、true "＃cc3300"）; backlayer.graphics.drawrect（1、 "＃cc3300"、[541,137,70,3]、true、 "＃cc3300"）; // 5 backlayer.graphics.drawrect（1、 "＃cc3300"、[611,137,33,3,3,263] lsprite（）; backlayer.addchild（clayer）; //頂点座標配列を介して、上、下、左、右の壁を追加しますvar shapearray = [// [[0,0]、[800,0]、[800,10]、[0,10]]、[[790,0]、[800,0]、[800,400]、[790,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,190]、[541,190]、[541,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）; //円を追加してクリックイベントを追加して小さなボールサークル= 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）; //スコアリング列を追加し、ヒットレートbar defen = new Ltextfield（）; defen.x = 200; defen.y = 100; defen.text = 'スコア：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（window、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 = 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,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（angle）、force*math.sin（angle））; box01.box2dbody.applyforce（vec、box01.box2dbody.getworldcenter（））; function check（）{if（box01.x <610 && box01.x> 450 && box01.y <400 && box01.y> 180）{checkpoint ++; AIM ++; all ++; defen.text = 'スコア：'+aim; mingzhong.text = 'ヒットレート：'+math.floor（aim/all*100）+'％'; if（checkpoint == 2）{// 2番目のレベルrail = new lsprite（）; backlayer.addchild（rail）; rail.graphics.drawrect（1、 "＃cc3300"、[220,135,10,255]、true、 "＃cc3300"）; rail = new lsprite（）; backlayer.addchild（raill）; Rail.AddBodyEvertices（[[[[[220,135]、[230,135]、[230,390]、[220,390]]]、0,0,0,0,0.5,0.4,0.5）; } else if（checkpoint == 3）{//第3レベルのbacklayer.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.5,0.4,0.5）; } else if（checkpoint == 4）{// 4番目のレベルBacklayer.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.AddBodyEvertices（[[[[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）+'％'; }} setimeout（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）; 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をもっとサポートすることを願っています。