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 相关文章推荐
跨域表单提交状态的变相判断代码
Nov 12 Javascript
json原理分析及实例介绍
Nov 29 Javascript
无刷新上传文件并返回自定义值
Jun 11 Javascript
JS日期加减,日期运算代码
Nov 05 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
Aug 11 Javascript
PHP+jquery+ajax实现分页
Dec 09 Javascript
vue.js利用defineProperty实现数据的双向绑定
Apr 28 Javascript
vue2.x select2 指令封装详解
Oct 12 Javascript
JS实现提交表单前的数字及邮箱校检功能
Nov 13 Javascript
js原生实现移动端手指滑动轮播图效果的示例
Jan 02 Javascript
利用Vue2.x开发实现JSON树的方法
Jan 04 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
Sep 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下操作Linux消息队列完成进程间通信的方法
2010/07/24 PHP
如何让thinkphp在模型中自动完成session赋值小教程
2014/09/05 PHP
Yii2实现让关联字段支持搜索功能的方法
2016/08/10 PHP
关于php 高并发解决的一点思路
2017/04/16 PHP
php如何实现数据库的备份和恢复
2020/11/30 PHP
静态的动态续篇之来点XML
2006/12/23 Javascript
javascript Array对象基础知识小结
2010/11/16 Javascript
设置checkbox为只读(readOnly)的两种方式
2013/10/11 Javascript
JavaScript编写连连看小游戏
2015/07/07 Javascript
JavaScript阻止回车提交表单的方法
2015/12/30 Javascript
VUEJS实战之构建基础并渲染出列表(1)
2016/06/13 Javascript
js实现自动轮换选项卡
2017/01/13 Javascript
微信小程序表单验证功能完整实例
2017/12/01 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
2018/09/04 Javascript
微信小程序-可移动菜单的实现过程详解
2019/06/24 Javascript
详解小程序如何动态绑定点击的执行方法
2019/11/26 Javascript
9种方法优化jQuery代码详解
2020/02/04 jQuery
基于Vue的侧边目录组件的实现
2020/02/05 Javascript
浅谈webpack构建工具配置和常用插件总结
2020/05/11 Javascript
[15:58]DOTA2国际邀请赛采访专栏:Tongfu.Sansheng&KingJ,DK.rOtk
2013/08/08 DOTA
Python和GO语言实现的消息摘要算法示例
2015/03/10 Python
使用IPython来操作Docker容器的入门指引
2015/04/08 Python
用Python的SimPy库简化复杂的编程模型的介绍
2015/04/13 Python
Python实现截屏的函数
2015/07/26 Python
浅析使用Python操作文件
2017/07/31 Python
PyQt5重写QComboBox的鼠标点击事件方法
2019/06/25 Python
python笔记_将循环内容在一行输出的方法
2019/08/08 Python
Python3从零开始搭建一个语音对话机器人的实现
2019/08/23 Python
python 实现视频 图像帧提取
2019/12/10 Python
Python3如何使用多线程升程序运行速度
2020/08/11 Python
苹果Mac升级:MacSales.com
2017/11/20 全球购物
英国Boots旗下太阳镜网站:Boots Designer Sunglasses
2018/07/07 全球购物
xml有哪些解析技术?区别是什么
2016/04/26 面试题
盛大二次面试题
2016/11/18 面试题
小学生寒假家长评语
2014/04/16 职场文书
交通事故协议书范本
2014/11/18 职场文书