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 XML操作 封装类
Jul 01 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
Jul 17 Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
Mar 04 Javascript
jQuery实现下滑菜单导航效果代码
Aug 25 Javascript
Javascript中的Prototype到底是什么
Feb 16 Javascript
AngularJs Modules详解及示例代码
Sep 01 Javascript
Bootstrap table右键功能实现方法
Feb 20 Javascript
JavaScript 中的 this 简单规则
Sep 19 Javascript
利用js实现前后台传送Json的示例代码
Mar 29 Javascript
Vue render深入开发讲解
Apr 13 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
Mar 12 Javascript
详解Vue的七种传值方式
Feb 08 Vue.js
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
深入for,while,foreach遍历时间比较的详解
2013/06/08 PHP
php内核解析:PHP中的哈希表
2014/01/30 PHP
PHP比较运算符的详细介绍
2015/09/29 PHP
解决laravel中日志权限莫名变成了root的问题
2019/10/17 PHP
在JavaScript中通过URL传递汉字的方法
2007/04/09 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
2013/11/19 Javascript
js 实现菜单左右滚动显示示例介绍
2013/11/21 Javascript
js setTimeout()函数介绍及应用以倒计时为例
2013/12/12 Javascript
js中哈希表的几种用法总结
2014/01/28 Javascript
jQuery带箭头提示框tooltips插件集锦
2014/11/17 Javascript
javascript框架设计之框架分类及主要功能
2015/06/23 Javascript
深入解析JavaScript编程中的this关键字使用
2015/11/09 Javascript
JSON与String互转的实现方法(Javascript)
2016/09/27 Javascript
js数字计算 误差问题的快速解决方法
2017/02/28 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
2017/06/26 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
2017/10/16 Javascript
使用axios实现上传图片进度条功能
2017/12/21 Javascript
配置eslint规范项目代码风格
2019/03/11 Javascript
详解关于webpack多入口热加载很慢的原因
2019/04/24 Javascript
详解微信小程序用定时器实现倒计时效果
2019/04/30 Javascript
小程序根据手机机型设置自定义底部导航距离
2019/06/04 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
2019/08/26 Javascript
QML实现圆环颜色选择器
2019/09/25 Javascript
[18:16]sakonoko 2017年卡尔集锦
2018/02/06 DOTA
使用BeautifulSoup爬虫程序获取百度搜索结果的标题和url示例
2014/01/19 Python
Python解析xml中dom元素的方法
2015/03/12 Python
Python开发中爬虫使用代理proxy抓取网页的方法示例
2017/09/26 Python
Python使用min、max函数查找二维数据矩阵中最小、最大值的方法
2018/05/15 Python
Django 后台带有字典的列表数据与页面js交互实例
2020/04/03 Python
python判断正负数方式
2020/06/03 Python
基于python的opencv图像处理实现对斑马线的检测示例
2020/11/29 Python
应届生求职简历的自我评价怎么写
2013/10/23 职场文书
中专毕业生自荐信范文
2013/11/28 职场文书
消防安全汇报材料
2014/02/08 职场文书
2014年师德师风工作总结
2014/11/25 职场文书
2015新学期开学寄语
2015/02/26 职场文书