This article shares the implementation code of H5 canvas shooting mini game for your reference. The specific content is as follows
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body onload="init(19,'mylegend',820,500,main,)">
<div >loading......</div>
<script src="js/Box2dWeb-2.."></script>
<script src="js/lufylegend-1.10."></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/images/'}
);
function main(){
(imgData);
LGlobal.box2d=new LBox2d();
backLayer=new LSprite();
addChild(backLayer);
//Build a set of walls //(1,"#cc3300",[0,0,800,10],true,"#cc3300");
(1,"#cc3300",[790,0,10,400],true,"#cc3300");
(1,"#cc3300",[0,0,10,400],true,"#cc3300");
(1,"#cc3300",[0,390,800,10],true,"#cc3300");
(1,"#cc3300",[450,187,50,3],true,"#cc3300");//1
(1,"#cc3300",[500,170,3,20],true,"#cc3300");//2
(1,"#cc3300",[447,187,3,210],true,"#cc3300");//3
(1,"#cc3300",[538,87,3,103],true,"#cc3300");//4 Box radius 35 (1,"#cc3300",[541,137,70,3],true,"#cc3300");//5
(1,"#cc3300",[611,137,3,263],true,"#cc3300");//6
cLayer=new LSprite();
(cLayer);
//Add the upper, lower, left and right walls through the vertex coordinate array 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]]
];
(shapeArray,0,0,0,0.5,0.4,0.5);
//Add a circle to add a click event to appear small balls circle=new LSprite();
(circle);
(1,"#336699",[,,40,0,2*,true,"#336699"]);
//Add a game instructions bar shuoming=new LTextField();
=20;
=10;
='Click the left circle to shoot, the distance between the mouse and the center of the circle controls the shooting strength';
(shuoming);
//Add score column and hit rate column defen=new LTextField();
=200;
=100;
='Score: 0';
(defen);
mingzhong=new LTextField();
=280;
=100;
='Hit rate: 0%';
(mingzhong);
//Level display guanqia=new LTextField();
=120;
=100;
='Level:'+checkpoint;
(guanqia);
//Add a mouse event Click the mouse to add a ball (LMouseEvent.MOUSE_DOWN,createBox);
//Keyboard event //(window,LKeyboardEvent.KEY_DOWN,down);
}
function createBox(e){
if(()*()+()*()>40*40)return;
var box01=new LSprite();
='mybox';
=;
=;
(box01);
(1,"orange",[16,16,16,0,360*/180],true,"orange");
(16,0,0,1,1,0.5,0.6);
var angle=Math.atan2(,);
var force=((()*()+()*())/20)*330;
var vec=new LGlobal.box2d.b2Vec2(force*(angle),force*(angle));
box01.(vec,box01.());
function check(){
if(<610&&>450&&<400&&>180){
checkpoint++;
aim++;
all++;
='Score:'+aim;
='Hit rate:'+(aim/all*100)+'%';
if(checkpoint==2){//The second level rail=new LSprite();
(rail);
(1,"#cc3300",[220,135,10,255],true,"#cc3300");
raill=new LSprite();
(raill);
([[[220,135],[230,135],[230,390],[220,390]]],0,0,0,0.5,0.4,0.5);
}else if(checkpoint==3){//The third level (rail);
(raill);
rail=new LSprite();
(rail);
(1,"#cc3300",[220,35,10,355],true,"#cc3300");
raill=new LSprite();
(raill);
([[[220,35],[230,35],[230,390],[220,390]]],0,0,0,0.5,0.4,0.5);
}else if(checkpoint==4){//The fourth level (rail);
(raill);
rail=new LSprite();
(rail);
(1,"#cc3300",[10,180,200,10],true,"#cc3300");
raill=new LSprite();
(raill);
([[[10,180],[220,180],[220,190],[10,190]]],0,0,0,0.5,0.4,0.5);
}else if(checkpoint>4){//Perform the checkpoint=4;
alert('Finally passed the level! ');
}
='Level:'+checkpoint;
}else{
all++;
='Hit rate:'+(aim/all*100)+'%';
}
}
setTimeout(check,2600);
}
//Press the keyboard to move the gun function down(e){
if(=='37'){//left
-=10;
}else if(=='39'){//right
+=10;
}else if(=='38'){//up
-=10;
}else if(=='40'){//down
+=10;
}
(circle);
circle=new LSprite();
(circle);
(1,"#336699",[,,40,0,2*,true,"#336699"]);
}
</script>
</body>
</html>
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.