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 相关文章推荐
javascript获取当前ip的代码
May 10 Javascript
ASP中Sub和Function的区别说明
Aug 30 Javascript
基于Jquery制作的幻灯片图集效果打包下载
Feb 12 Javascript
JS 实现导航栏悬停效果(续)
Sep 24 Javascript
js实现双击图片放大单击缩小的方法
Feb 17 Javascript
JavaScript返回网页中锚点数目的方法
Apr 03 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
Jul 11 Javascript
vue构建单页面应用实战
Apr 10 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
Apr 13 Javascript
微信小程序实现图片滚动效果示例
Dec 05 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
Mar 04 Javascript
前端js中的事件循环eventloop机制详解
May 15 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函数addslashes和mysql_real_escape_string的区别
2014/04/22 PHP
PHP开源开发框架ZendFramework使用中常见问题说明及解决方案
2014/06/12 PHP
thinkPHP自动验证、自动添加及表单错误问题分析
2016/10/17 PHP
JS 无限级 Select效果实现代码(json格式)
2011/08/30 Javascript
js获取浏览器基本信息大全
2014/11/27 Javascript
浅谈JS日期(Date)处理函数
2014/12/07 Javascript
jQuery中 attr() 方法使用小结
2015/05/03 Javascript
js限制文本框只能输入中文的方法
2015/08/11 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
2015/10/31 Javascript
你有必要知道的25个JavaScript面试题
2015/12/29 Javascript
基于socket.io+express实现多房间聊天
2016/03/17 Javascript
原生和jQuery的ajax用法详解
2017/01/23 Javascript
基于JS实现数字动态变化显示效果附源码
2019/07/18 Javascript
JavaScript中的类型检查
2020/02/03 Javascript
AJAX XMLHttpRequest对象创建使用详解
2020/08/20 Javascript
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
JavaScript枚举选择jquery插件代码实例
2020/11/17 jQuery
使用go和python递归删除.ds store文件的方法
2014/01/22 Python
Python Requests模拟登录实现图书馆座位自动预约
2018/04/27 Python
python3.6生成器yield用法实例分析
2019/08/23 Python
Python程序控制语句用法实例分析
2020/01/14 Python
浅谈ROC曲线的最佳阈值如何选取
2020/02/28 Python
selenium+python配置chrome浏览器的选项的实现
2020/03/18 Python
canvas像素点操作之视频绿幕抠图
2018/09/11 HTML / CSS
乌克兰电子产品和家用电器购物网站:TOUCH
2019/08/09 全球购物
Viking比利时:购买办公用品
2019/10/30 全球购物
本科生学习总结的自我评价
2013/10/02 职场文书
计算机本科生自荐信
2013/10/15 职场文书
写自荐信有哪些不宜?
2013/10/17 职场文书
网站设计师的岗位职责
2013/11/21 职场文书
2014道德模范事迹材料
2014/02/16 职场文书
毕业生写求职信的要点
2014/03/04 职场文书
毕业生实习证明
2014/09/19 职场文书
2015社区健康教育工作总结
2015/05/20 职场文书
区域销售大会开幕词
2016/03/04 职场文书
python引入其他文件夹下的py文件具体方法
2021/05/23 Python