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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JS+canvas实现的五子棋游戏【人机大战版】
本文实例讲述了JS+canvas实现的五子棋游戏.分享给大家供大家参考,具体如下: 运行效果图: html代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>五子棋</title> <link rel="stylesheet" type="text/css" href="css
-
javascript和HTML5利用canvas构建猜牌游戏实现算法
让我猜猜你心中的牌,先随机生成27张牌,不能重复列出三列牌,然后记住其中一张,然后点击牌所在的列,多次就可以猜出你想的牌. 如果是9张只要猜2次,如果是27张就是猜3次. 实现方法(27张): 如果点击了第三列,那就是说牌一定在这9张里面,就把第三列的9张牌平均给每列分3张,假设编号为123,456,789 再点击一次,如果点击第二列,那么猜的牌就在456里面,再分到三列,4,5,6 再点击一次,就可以知道牌是哪个了. 实现算法: 我是使用一维数组实现,第一次猜第三列就把第三列的数据和0,1,2
-
JS+Canvas实现的俄罗斯方块游戏完整实例
本文实例讲述了JS+Canvas实现的俄罗斯方块游戏.分享给大家供大家参考,具体如下: 试玩(没有考虑兼容低版本浏览器): ********************************************************************** 9月3日更新: 修复了隐藏的比较深的BUG 加上暂停.再来一次功能 速度随分数增高而递减 添加log日志 ****************************************************************
-
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
这只是一个简单的JAVAscript和HTML5小程序,没有实现人机对战. 五子棋棋盘落子点对应的二维数组.数组的元素对应落子点.比如数组元素值为0表示该元素对应的落子点没有棋子,数组元素值为1表示该元素对应的落子点有白棋子,数组元素值为2表示该元素对应的落子点有黑棋子: 判断五子棋赢棋的算法是通过对五子棋棋盘落子点对应的二维数组的操作来实现的. 判断五子棋赢棋算法 下边的函数可以实现判断五子棋赢棋的算法,也可以按照教材中相应的算法实现. 其中函数的参数xx.yy为数组下标,chess数组实现五
-
原生JS+Canvas实现五子棋游戏实例
一.功能模块 先看下现在做完的效果: 线上体验:https://wj704.github.io/five_game.html 主要功能模块为: 1.人机对战功能 2.悔棋功能 3.撤销悔棋功能 二.代码详解 2.1 人机对战功能实现 从效果图可以看到,棋盘的横竖可以放的位置为15*15,通过canvas画棋盘: //绘画棋盘 var drawChessBoard = function(){ for(var i = 0; i < 15; i++){ context.moveTo(15 + i *
-
JavaScript实现打地鼠小游戏
在写这个打地鼠的游戏开始首先要清楚每一步该做什么 然后再一步一步搭好框架再完善功能. 1.创建table三行三列,用来存放坑(图片) 2.获得所有的图片标签 3.老鼠的动作有①.冒出来 4.②. 老鼠跑了 5.③.老鼠被打死了 6.完善功能 一.首先实现第一步,用table创建一个三行三列的坑 <div id = "content"> <h2>打地鼠</h2><br/> <table id = "background&qu
-
JavaScript用200行代码制作打飞机小游戏实例
我去,我的图片分数被这个录屏软件的水印盖上了,扎心. 这个程序的文件以及代码全部上传到了github 程序下载链接传送门 这是自己第一次通过js写的小游戏,那个时候对象的原理跟结构体的概念不是特别的清晰,所以没用对象来写,所以直接导致后期我对这个程序进行修改的时候出现问题,太过于复杂了,我终于了解什么叫做牵一发动全身了.所以这个程序教会我一定一定要用对象的思想处理以后的问题,尤其是这种带属性明显的东西. 当然你要问我图片怎么来的我只能说都是我自己画的所以这可是原创的原创. 代码部分我是通过一个大
-
纯JS实现五子棋游戏兼容各浏览器(附源码)
纯JS五子棋(各浏览器兼容) 效果图: 代码下载 HTML代码 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;"> <title>五子棋</title> <link rel="stylesheet" type="text/
-
JS实现的走迷宫小游戏完整实例
本文实例讲述了JS实现的走迷宫小游戏.分享给大家供大家参考,具体如下: 先来看看运行效果截图: 完整实例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml
-
javascript HTML5 canvas实现打砖块游戏
本文实例编写的一个小游戏,基于HTML5中的canvas.游戏主要是小球反弹击打小方块.在代码中主要实现了小方块的生成,键盘键事件的监听,小球的移动和碰壁之后的反弹以及怎样消除小方块等方法.代码使用到了一个js脚本库 游戏开发流程: 1.创建画布: 将画布放在div标签里面,这样可以控制画布居中的位置,再对div标签加上一些样式比如border和border-radius,这样一来使其看上去像手机,利于观看. <div id="main"> <!--将画布嵌在div块
-
20行js代码实现的贪吃蛇小游戏
前言 最近在csdn上看到一位大神用20行代码就写出了一个贪吃蛇的小游戏,感觉被惊艳到了,就试着读了一下这段代码,阅读过程中不断为作者写法的巧妙而叫绝,其中我发现自己对运算符优先级和一些js的技巧不是很清楚,所以看完之后决定把思路分享出来,方便和我一样的小白学习. 我对代码稍稍做了些修改,并添加了一些注释,方便理解. 示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="
-
原生JavaScript编写canvas版的连连看游戏
本文实例为大家分享了JavaScript编写canvas版的连连看游戏的具体实现代码,供大家参考,具体内容如下 效果图: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #box{ /*border: 1px solid #D1D1D1; */ overflow: hidden; pos