原生js结合html5制作小飞龙的简易跳球


Posted in Javascript onMarch 30, 2015

演示地址:http://runjs.cn/detail/yjpvqhal

html代码

<html>
  <head>
    <meta charset="utf-8"/>
    <title>小飞龙的跳球</title>
  </head>
  <body onload="init()">
    <canvas id="game" width="400" height="400" style="border:1px solid #c3c3c3">
      你的游览器不支持html5的画布元素,请升级到IE9+或使用firefox、chrome这类高级的智能游览器!
    </canvas>
    <script>
      var canvas = document.getElementById('game');
      var ctx = canvas.getContext('2d');
      var grad;
      //盒子的起始位置和大小以及球的半径
      var box = {x:20,y:20,w:350,h:350,r:20};
      //球的中心位置和偏移位置
      var inbox = {//box内的限制范围
          bx:(box.w+box.x-box.r),
          by:(box.h+box.y-box.r),
          ix:box.x+(box.r*2),
          iy:box.y+(box.r*2)
        };
      //球的初始位置和变化位置  
      var ball = {x:50,y:50,vx:4,vy:8};
      var img = new Image();
      img.src = 'images/qiuqiu.png';
      var hue = [[255,0,0],[255,255,0],[0,255,0],[0,255,255],[0,0,255],[255,0,0]];
      function init(){
        grad = ctx.createLinearGradient(box.x,box.y,box.w,box.h);
        for(var i=0;i<hue.length;i++){
          var color = 'rgb('+hue[i][0]+','+hue[i][1]+','+hue[i][2]+')';
          grad.addColorStop(i/hue.length,color);
        }
        ctx.lineWidth = box.r;
        ctx.fillStyle = 'rgb(200,0,50)';
        ctx.fillStyle = grad;
        moveBall();
        setInterval(moveBall,50);
      }  
      //碰撞检测并重新确定球的位置
      function moveBallEndCheck(){
        var nx = ball.x + ball.vx;
        var ny = ball.y + ball.vy;
        if(nx > inbox.bx){//当前x大于上边框边界
          ball.vx = -ball.vx;//球的变化x坐标当前当前变化x坐标的负数
          nx = inbox.bx;//当前位置为上边框的位置
        }
        if(nx < inbox.ix){//当前位置小于下边框
          nx = inbox.ix;//当前位置为下边框的x
          ball.vx = -ball.vx;//球的变化x坐标翻转取负
        }
        if(ny > inbox.by){
          ny = inbox.by;
          ball.vy = -ball.vy;
        }
        if(ny < inbox.iy){
          ny = inbox.iy;
          ball.vy = -ball.vy;
        }
        ball.x = nx;
        ball.y = ny;
      }
      function moveBall(){
        ctx.clearRect(box.x,box.y,box.w,box.h);
        moveBallEndCheck();
        ctx.beginPath();
        //console.log(ball.x+"\t"+ball.y+"\t"+ball.vx+"\t"+ball.vy+"\t"+(ball.x-box.r)+"\t"+(ball.y-box.r));
        ctx.drawImage(img,(ball.x-box.r),(ball.y-box.r));
        ctx.fillRect(box.x,box.y,box.r,box.h);
        ctx.fillRect((box.x+box.w-box.r),box.y,box.r,box.h);
        ctx.fillRect(box.x,box.y,box.w,box.r);
        ctx.fillRect(box.x,(box.y+box.h-box.r),box.w,box.r);
        ctx.closePath();
        ctx.fill();
      }
    </script>
  </body>
</html>

演示图片

原生js结合html5制作小飞龙的简易跳球

以上所述就是本文的全部代码,希望大家能够喜欢。

Javascript 相关文章推荐
ExtJs 3.1 XmlTreeLoader Example Error
Feb 09 Javascript
JavaScript 函数replace深入了解
Mar 14 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
Dec 16 Javascript
jQuery实现自定义事件的方法
Apr 17 Javascript
JS button按钮实现submit按钮提交效果
Nov 01 Javascript
canvas实现动态小球重叠效果
Feb 06 Javascript
Javascript之深入浅出prototype
Feb 06 Javascript
原生js实现简单的Ripple按钮实例代码
Mar 24 Javascript
JavaScript图片处理与合成总结
Mar 04 Javascript
使用FileReader API创建Vue文件阅读器组件
Apr 03 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
Apr 04 Javascript
微信小程序--获取用户地理位置名称(无须用户授权)的方法
Apr 29 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
Mar 30 #Javascript
浅谈类似于(function(){}).call()的js语句
Mar 30 #Javascript
jquery实现右键菜单插件
Mar 29 #Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
Mar 28 #Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
Mar 28 #Javascript
JQuery调用绑定click事件的3种写法
Mar 28 #Javascript
对Web开发中前端框架与前端类库的一些思考
Mar 27 #Javascript
You might like
PHP截取中文字符串的问题
2006/07/12 PHP
php基础教程 php内置函数实例教程
2012/08/21 PHP
php检测useragent版本示例
2014/03/24 PHP
php命令行写shell实例详解
2018/07/19 PHP
Javascript自定义排序 node运行 实例
2013/06/05 Javascript
JS调用CS里的带参方法实例
2013/08/01 Javascript
处理及遍历XML文档DOM元素属性及方法整理
2013/08/23 Javascript
用js来刷新当前页面保留参数的具体实现
2013/12/23 Javascript
使用coffeescript编写node.js项目的方法汇总
2015/08/05 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
2020/08/27 Javascript
ReactNative Image组件使用详解
2017/08/07 Javascript
js实现1,2,3,5数字按照概率生成
2017/09/12 Javascript
使用react实现手机号的数据同步显示功能的示例代码
2018/04/03 Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
2018/09/08 Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
2019/04/02 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
2019/04/28 Javascript
如何让微信小程序页面之间的通信不再变困难
2019/06/03 Javascript
js实现页面导航层级指示效果
2020/08/25 Javascript
JS实现拖动模糊框特效
2020/08/25 Javascript
Python动态生成多维数组的方法示例
2018/08/09 Python
Python lambda表达式用法实例分析
2018/12/25 Python
详解python数据结构和算法
2019/04/18 Python
TensorFlow实现简单的CNN的方法
2019/07/18 Python
Python中url标签使用知识点总结
2020/01/16 Python
5行Python代码实现图像分割的步骤详解
2020/05/25 Python
使用keras实现BiLSTM+CNN+CRF文字标记NER
2020/06/29 Python
捷克电器和DJ设备网上商店:Electronic-star
2017/07/18 全球购物
COSETTE官网:奢华,每天
2020/03/22 全球购物
SCHIESSER荷兰官方网站:德国内衣专家
2020/10/09 全球购物
党员2014两会学习心得体会
2014/03/17 职场文书
中国梦演讲稿5分钟
2014/08/19 职场文书
优秀党员事迹材料
2014/12/18 职场文书
鲁滨逊漂流记读书笔记
2015/06/26 职场文书
终止合同协议书范本
2016/03/22 职场文书
浅谈Python数学建模之整数规划
2021/06/23 Python
如何更改Win11声音输出设备?Win11声音输出设备四种更改方法
2022/04/08 数码科技