js H5 canvas投籃小游戲
更新時(shí)間：2016年08月18日 10:41:07 作者：BaYang
這篇文章主要為大家詳細(xì)介紹了JavaScript結(jié)合H5 canvas實(shí)現(xiàn)投籃小游戲的具體代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了H5 canvas投籃小游戲?qū)崿F(xiàn)代碼，供大家參考，具體內(nèi)容如下
<!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);
//通過(guò)頂點(diǎn)坐標(biāo)數(shù)組，加入上下左右四面墻
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);
//加入圓 用來(lái)添加點(diǎn)擊事件來(lái)出現(xiàn)小球
circle=new LSprite();
backLayer.addChild(circle);
circle.graphics.drawArc(1,"#336699",[point.x,point.y,40,0,2*Math.PI,true,"#336699"]);
//添加游戲說(shuō)明欄
shuoming=new LTextField();
shuoming.x=20;
shuoming.y=10;
shuoming.text='點(diǎn)擊左側(cè)圓圈進(jìn)行投籃,鼠標(biāo)和圓心的距離控制投籃力度';
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);
//關(guān)卡顯示
guanqia=new LTextField();
guanqia.x=120;
guanqia.y=100;
guanqia.text='關(guān)卡：'+checkpoint;
backLayer.addChild(guanqia);
//加入鼠標(biāo)事件 點(diǎn)擊鼠標(biāo)增加小球
backLayer.addEventListener(LMouseEvent.MOUSE_DOWN,createBox);
//鍵盤(pán)事件
//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){//第二關(guān)
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){//第三關(guān)
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){//第四關(guān)
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){//通關(guān)
checkpoint=4;
alert('終于通關(guān)了！');
}
guanqia.text='關(guān)卡：'+checkpoint;
}else{
all++;
mingzhong.text='命中率：'+Math.floor(aim/all*100)+'%';
}
}
setTimeout(check,2600);
}
//鍵盤(pán)按下 移動(dòng)槍口
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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 原生JS+Canvas實(shí)現(xiàn)五子棋游戲?qū)嵗?/a>
- Javascript和HTML5利用canvas構(gòu)建Web五子棋游戲?qū)崿F(xiàn)算法
- 純JS實(shí)現(xiàn)五子棋游戲兼容各瀏覽器(附源碼)
- JS+Canvas實(shí)現(xiàn)的俄羅斯方塊游戲完整實(shí)例
- 原生JavaScript編寫(xiě)canvas版的連連看游戲
- javascript HTML5 canvas實(shí)現(xiàn)打磚塊游戲
- javascript和HTML5利用canvas構(gòu)建猜牌游戲?qū)崿F(xiàn)算法
- JS實(shí)現(xiàn)的走迷宮小游戲完整實(shí)例
- JavaScript用200行代碼制作打飛機(jī)小游戲?qū)嵗?/a>
- 20行js代碼實(shí)現(xiàn)的貪吃蛇小游戲
- JavaScript實(shí)現(xiàn)打地鼠小游戲
- JS+canvas實(shí)現(xiàn)的五子棋游戲【人機(jī)大戰(zhàn)版】
相關(guān)文章
關(guān)于微信小程序?qū)崿F(xiàn)云支付那些事兒
我們?cè)谧鲂〕绦蛑Ц断嚓P(guān)的開(kāi)發(fā)時(shí),總會(huì)遇到這些難題,下面這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)云支付那些事兒,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2021-09-09
這篇文章主要介紹了使用js繪制幾何圖形教程，本文主要是教大家繪制圓、弧、扇形,需要的朋友可以參考下
2015-01-01 
在做網(wǎng)頁(yè)時(shí)（其實(shí)是網(wǎng)頁(yè)木馬呵呵），最讓人煩惱的是自己辛辛苦苦寫(xiě)出來(lái)的客戶端IE運(yùn)行的JAVASCRIPT代碼常常被別人輕易的拷貝，實(shí)在讓自己的心里有點(diǎn)不是滋味，要知道自己寫(xiě)點(diǎn)東西也挺累的
2008-06-06 
今天小編就為大家分享一篇淺談layer彈出層按鈕顏色修改方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-09-09 
《javascript設(shè)計(jì)模式》學(xué)習(xí)筆記一：Javascript面向?qū)ο蟪绦蛟O(shè)計(jì)對(duì)象成員的定義分析
這篇文章主要介紹了《javascript設(shè)計(jì)模式》學(xué)習(xí)筆記Javascript面向?qū)ο蟪绦蛟O(shè)計(jì)對(duì)象成員的定義,結(jié)合實(shí)例形式分析了《javascript設(shè)計(jì)模式》中JavaScript面向?qū)ο蟪绦蛟O(shè)計(jì)的原理、定義、用法及操作注意事項(xiàng),需要的朋友可以參考下
2020-04-04 
js 動(dòng)態(tài)為textbox添加下拉框數(shù)據(jù)源的方法
這篇文章主要介紹了js 動(dòng)態(tài)為textbox添加下拉框數(shù)據(jù)源的方法,需要的朋友可以參考下
2014-04-04 
js 轉(zhuǎn)json格式的字符串為對(duì)象或數(shù)組(前后臺(tái))的方法
下面小編就為大家?guī)?lái)一篇js 轉(zhuǎn)json格式的字符串為對(duì)象或數(shù)組(前后臺(tái))的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-11-11 
javascript作用域鏈(Scope Chain)用法實(shí)例解析
這篇文章主要介紹了javascript作用域鏈(Scope Chain)用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了javascript作用域鏈(Scope Chain)的概念、功能與相關(guān)使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-11-11 
如何在TypeScript中正確的遍歷一個(gè)對(duì)象
在TypeScript里面,也會(huì)遇到需要遍歷對(duì)象的時(shí)候,下面這篇文章主要給大家介紹了關(guān)于如何在TypeScript中正確的遍歷一個(gè)對(duì)象的相關(guān)資料,需要的朋友可以參考下
2022-03-03