js H5 canvas投篮小游戏


Posted in Javascript onAugust 18, 2016

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
拖动Html元素集合 Drag and Drop any item
Dec 22 Javascript
一个可以兼容IE FF的加为首页与加入收藏实现代码
Nov 02 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
Apr 15 Javascript
通过伪协议解决父页面与iframe页面通信的问题
Apr 05 Javascript
JS使用正则表达式除去字符串中重复字符的方法
Nov 05 Javascript
js判断PC端与移动端跳转
Dec 24 Javascript
Angularjs实现上传图片预览功能
Sep 01 Javascript
微信小程序返回多级页面的实现方法
Oct 27 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
Dec 01 Javascript
解决vue 打包发布去#和页面空白的问题
Sep 04 Javascript
JavaScript对象原型链原理解析
Jan 22 Javascript
JS FormData对象使用方法实例详解
Feb 12 Javascript
jQuery过滤选择器经典应用
Aug 18 #Javascript
jQuery表单事件实例代码分享
Aug 18 #Javascript
Angularjs结合Bootstrap制作的一个TODO List
Aug 18 #Javascript
AngularJS 执行流程详细介绍
Aug 18 #Javascript
AngularJS国际化详解及示例代码
Aug 18 #Javascript
ECMAScript6轮播图实践知识总结
Aug 17 #Javascript
jQuery 全选 全部选 反选 实现代码
Aug 17 #Javascript
You might like
php自动给网址加上链接的方法
2015/06/02 PHP
如何使用PHP Embed SAPI实现Opcodes查看器
2015/11/10 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
一个cssQuery对象 javascript脚本实现代码
2009/07/21 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
2013/12/04 Javascript
jQuery插件slides实现无缝轮播图特效
2015/04/17 Javascript
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
2015/12/03 Javascript
微信小程序 页面跳转传参详解
2016/10/28 Javascript
Vue.js系列之vue-router(上)(3)
2017/01/03 Javascript
详解前后端分离之VueJS前端
2017/05/24 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
2017/08/18 Javascript
关于Mac下安装nodejs、npm和cnpm的教程
2018/04/11 NodeJs
vue使用showdown并实现代码区域高亮的示例代码
2019/10/17 Javascript
jQuery实现手风琴效果(蒙版)
2020/01/11 jQuery
用Python脚本来删除指定容量以上的文件的教程
2015/05/04 Python
Python守护进程用法实例分析
2015/06/04 Python
使用Python的Twisted框架构建非阻塞下载程序的实例教程
2016/05/25 Python
深入理解python中的atexit模块
2017/03/07 Python
Tensorflow 利用tf.contrib.learn建立输入函数的方法
2018/02/08 Python
python如何使用unittest测试接口
2018/04/04 Python
Python Flask上下文管理机制实例解析
2020/03/16 Python
python正则表达式的懒惰匹配和贪婪匹配说明
2020/07/13 Python
CSS3按钮鼠标悬浮实现光圈效果源码
2016/09/11 HTML / CSS
HTML5 常用语法一览(列举不支持的属性)
2010/01/26 HTML / CSS
html table呈现个人简历以及单元格宽度失效的问题解决
2021/01/22 HTML / CSS
一套PHP的笔试题
2013/05/31 面试题
模具设计与制造专业应届生求职信
2013/10/18 职场文书
节约电力资源的建议书
2014/03/12 职场文书
婚纱摄影师求职信范文
2014/04/17 职场文书
经贸专业毕业生求职信范文
2014/05/01 职场文书
幽默自我介绍演讲稿
2014/08/21 职场文书
物业前台接待岗位职责
2015/04/03 职场文书
淘宝客服专员岗位职责
2015/04/07 职场文书
Python获取江苏疫情实时数据及爬虫分析
2021/08/02 Python
MySQL中的隐藏列的具体查看
2021/09/04 MySQL
golang语言指针操作
2022/04/14 Golang