原生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 相关文章推荐
代码生成器 document.write()
Apr 15 Javascript
javascript实现动态CSS换肤技术的脚本
Jun 29 Javascript
html组件不可输入(只读)同时任何组件都有效
Apr 01 Javascript
js格式化输入框内金额、银行卡号
Feb 01 Javascript
利用JS轻松实现获取表单数据
Dec 06 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
Feb 12 Javascript
jQuery ajax调用webservice注意事项
Oct 08 jQuery
在vue项目中,使用axios跨域处理
Mar 07 Javascript
webpack4 + react 搭建多页面应用示例
Aug 03 Javascript
vue forEach循环数组拿到自己想要的数据方法
Sep 21 Javascript
JavaScript修改注册表实例代码
Jan 05 Javascript
JavaScript选择器函数querySelector和querySelectorAll
Nov 27 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 默默经典版本
2009/08/04 PHP
PHP中file_exists函数不支持中文名的解决方法
2014/07/26 PHP
Javascript客户端将指定区域导出到Word、Excel的代码
2008/10/22 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
2012/11/08 Javascript
详谈LABJS按需动态加载js文件
2015/05/07 Javascript
Javascript中typeof 用法小结
2015/05/12 Javascript
基于JavaScript的操作系统你听说过吗?
2016/01/28 Javascript
微信小程序 利用css实现遮罩效果实例详解
2017/01/21 Javascript
如何从0开始用node写一个自己的命令行程序
2018/12/29 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
2019/01/30 Javascript
js设置默认时间跨度过程详解
2019/07/17 Javascript
JS三级联动代码格式实例详解
2019/12/30 Javascript
jQuery实现聊天对话框
2020/02/08 jQuery
解决Antd 里面的select 选择框联动触发的问题
2020/10/24 Javascript
用Python解析XML的几种常见方法的介绍
2015/04/09 Python
Python访问纯真IP数据库脚本分享
2015/06/29 Python
Python实现比较扑克牌大小程序代码示例
2017/12/06 Python
对Python信号处理模块signal详解
2019/01/09 Python
python 中的列表生成式、生成器表达式、模块导入
2019/06/19 Python
无惧面试,带你搞懂python 装饰器
2020/08/17 Python
Python配置pip国内镜像源的实现
2020/08/20 Python
scrapy在python爬虫中搭建出错的解决方法
2020/11/22 Python
h5页面唤起app如果没安装就跳转下载(iOS和Android)
2020/06/03 HTML / CSS
英国简约舒适女装品牌:Great Plains
2018/07/27 全球购物
武汉英思工程科技有限公司&ndash;ORACLE面试测试题目
2012/04/30 面试题
仓库保管员岗位职责
2013/12/20 职场文书
企业总经理职责
2014/02/02 职场文书
公司司机岗位职责范本
2014/03/03 职场文书
社区文艺活动方案
2014/08/19 职场文书
运输公司工作总结
2015/08/11 职场文书
诚信教育主题班会
2015/08/13 职场文书
行政后勤人员工作计划应该怎么写?
2019/08/16 职场文书
修辞手法有哪些?
2019/08/29 职场文书
Ajax常用封装库——Axios的使用
2021/05/08 Javascript
关于EntityWrapper的in用法
2022/03/22 Java/Android
Python实现仓库管理系统
2022/05/30 Python