js H5 canvas投篮小游戏
桂志新
本文向大家介绍js H5 canvas投篮小游戏，包括了js H5 canvas投篮小游戏的使用技巧和注意事项，需要的朋友参考一下
本文实例为大家分享了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">loading......</div>
<script 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,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/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,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");//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 框半径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=new 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);
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=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='关卡：'+checkpoint;
backLayer.addChild(guanqia);
//加入鼠标事件 点击鼠标增加小球
backLayer.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.y-e.offsetY)*(point.y-e.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){//第二关
rail=new LSprite();
backLayer.addChild(rail);
rail.graphics.drawRect(1,"#cc3300",[220,135,10,255],true,"#cc3300");
raill=new LSprite();
backLayer.addChild(raill);
raill.addBodyVertices([[[220,135],[230,135],[230,390],[220,390]]],0,0,0,0.5,0.4,0.5);
}else if(checkpoint==3){//第三关
backLayer.removeChild(rail);
backLayer.removeChild(raill);
rail=new LSprite();
backLayer.addChild(rail);
rail.graphics.drawRect(1,"#cc3300",[220,35,10,355],true,"#cc3300");
raill=new LSprite();
backLayer.addChild(raill);
raill.addBodyVertices([[[220,35],[230,35],[230,390],[220,390]]],0,0,0,0.5,0.4,0.5);
}else if(checkpoint==4){//第四关
backLayer.removeChild(rail);
backLayer.removeChild(raill);
rail=new LSprite();
backLayer.addChild(rail);
rail.graphics.drawRect(1,"#cc3300",[10,180,200,10],true,"#cc3300");
raill=new LSprite();
backLayer.addChild(raill);
raill.addBodyVertices([[[10,180],[220,180],[220,190],[10,190]]],0,0,0,0.5,0.4,0.5);
}else if(checkpoint>4){//通关
checkpoint=4;
alert('终于通关了！');
}
guanqia.text='关卡：'+checkpoint;
}else{
all++;
mingzhong.text='命中率：'+Math.floor(aim/all*100)+'%';
}
}
setTimeout(check,2600);
}
//键盘按下 移动枪口
function down(e){
if(e.keyCode=='37'){//left
point.x-=10;
}else if(e.keyCode=='39'){//right
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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
类似资料：
-
题目描述： 你现在是一场采用特殊赛制投篮大赛的记录员。这场比赛由若干回合组成，过去几回合的得分可能会影响以后几回合的得分。 比赛开始时，记录是空白的。你会得到一个记录操作的字符串列表 ops，其中 ops[i] 是你需要记录的第 i 项操作，ops 遵循下述规则： 整数 x - 表示本回合新获得分数 x "+" - 表示本回合新获得的得分是前两次得分的总和。 "D" - 表示本回合新获得的得分是前
-
初面 1.自我介绍 2.学生经历里最有成就感的事情and最遗憾的事情 3.向你的朋友推荐一款游戏 4.平时玩游戏多吗？玩什么游戏？ 5.未来三年行业规划 6.之前都是数分实习，为什么要来广告投放 7.为什么要来游戏行业？ 8.三个词形容别人对你的印象 9.实习当中最大的挑战 10.再给一次机会，怎么应对那个挑战 二面 1⃣️了解一些广告投放平台吗？ 2⃣️有了解过投放相关的工作吗？（工作内容、理解
-
问题内容： 和之间的关系/差异是什么？将它们设置为不同的值会怎样？ 根据Gradle文档： 是“编译Java源代码时要使用的Java版本兼容性”。 是“为其生成类的Java版本”。 我的理解是，它将生成与特定版本的Java兼容的Java字节码，这是功能的子集吗？ 问题答案： 并映射到和在javac的。Source基本上是源语言级别，而target是所生成的字节码级别。 更多细节可以在javac 的
-
所以我为我的课做了一个抽动练习作业。我已经成功地创建了一个简单的Tic Tac Toe程序，但不知何故，检查绘制的方法有时并不正确。如果所有东西都填满了，但没有赢家，那就是平局。但如果除第0行第1列外，其他所有内容都已填满，则即使该框仍为空白，它仍将显示“Draw”。如果你不明白我的意思，就试着把所有的东西都填满，但不是赢，即使最后一个框没有填满，它也会说“平局”。我在代码中做错了什么？？？？驱动
-
问题内容： 每次尝试添加时， 都会出现以下错误 问题答案： 清除gradle缓存->删除整个文件夹->项目目录。不用担心它将被重新创建。这同样适用于- >主目录。 您还可以转到文件->无效->缓存/重新启动。
-
本文向大家介绍javascript版2048小游戏，包括了javascript版2048小游戏的使用技巧和注意事项，需要的朋友参考一下 没有技术含量，只是用来练习代码逻辑的。为了代码结构清晰，我把逻辑控制部分写在全局变量里，用户界面操作封装在UI对象里，大概就这样了。仅供参考。工作时候，我的编码风格有人吐槽太乱了，所以我想试着写一个不是那么乱的东西出来。。 以上就是本文所述的全部内容了，希望大家能