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 相关文章推荐
Ucren Virtual Desktop V2.0
Nov 07 Javascript
JS判断元素为数字的奇异写法分享
Aug 01 Javascript
js实现倒计时时钟的示例代码
Dec 17 Javascript
js 获取元素下面所有li的两种方法
Apr 14 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
Aug 22 Javascript
JS实现支持多选的遍历下拉列表代码
Aug 20 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
Sep 18 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
Nov 18 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
Mar 01 Javascript
vue组件库的在线主题编辑器的实现思路
Apr 03 Javascript
vue+swiper实现左右滑动的测试题功能
Oct 30 Javascript
JavaScript流程控制(循环)
Dec 06 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 MPDF中文乱码的解决方式
2015/12/08 PHP
PHP面向对象学习之parent::关键字
2017/01/18 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
用Javascript读取中文COOKIE的解决办法
2007/02/15 Javascript
js 绑定带参数的事件以及手动触发事件
2010/04/27 Javascript
javascript获取ckeditor编辑器的值(实现代码)
2013/11/18 Javascript
JavaScript获取当前页面上的指定对象示例代码
2014/02/28 Javascript
javascript面向对象之定义成员方法实例分析
2015/01/13 Javascript
jQuery实现的动态伸缩导航菜单实例
2015/05/07 Javascript
jQuery展示表格点击变色、全选、删除
2017/01/05 Javascript
微信小程序 利用css实现遮罩效果实例详解
2017/01/21 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
2017/02/13 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
2017/11/03 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
2018/03/01 Javascript
基于vue和react的spa进行按需加载的实现方法
2018/09/29 Javascript
基于form-data请求格式详解
2019/10/29 Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
2020/06/24 Javascript
Element Popover 弹出框的使用示例
2020/07/26 Javascript
[05:08]2014DOTA2国际邀请赛 Hao专访复仇的胜利很爽
2014/07/15 DOTA
[01:53]2016完美“圣”典风云人物:Maybe专访
2016/12/05 DOTA
小小聊天室Python代码实现
2016/08/17 Python
Android分包MultiDex策略详解
2017/10/30 Python
python接口自动化(十六)--参数关联接口后传(详解)
2019/04/16 Python
python自定义函数实现最大值的输出方法
2019/07/09 Python
python多线程共享变量的使用和效率方法
2019/07/16 Python
python 将dicom图片转换成jpg图片的实例
2020/01/13 Python
Python统计文本词汇出现次数的实例代码
2020/02/27 Python
使用django自带的user做外键的方法
2020/11/30 Python
C#实现启动一个进程
2016/10/01 面试题
黄河象教学反思
2014/02/10 职场文书
仓管员岗位责任制
2014/02/19 职场文书
建筑工地标语
2014/06/18 职场文书
单位实习鉴定评语
2015/01/04 职场文书
教师廉洁自律个人总结
2015/02/10 职场文书
学习保证书100字
2015/02/26 职场文书
2015年大学宣传部工作总结
2015/05/26 职场文书