js+html5实现的自由落体运动效果代码


Posted in Javascript onJanuary 28, 2016

本文实例讲述了js+html5实现的自由落体运动效果。分享给大家供大家参考,具体如下:

运行效果截图如下:

js+html5实现的自由落体运动效果代码

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>canvas自由落体</title>
 <script type="text/javascript" >
  var canvasheight = 500;
  var canvaswidth = 500;
  var g = 9.8;
  var plusV = 0.5;
  function Block(vo, x, y, width, height, g, context) {
   var _self = this;
   _self.vo = vo || 0;
   _self.x = x;
   _self.y = y;
   _self.prevX = x;
   _self.prevY = y;
   _self.g = g;
   _self.height = height;
   _self.width = width;
   _self.prevTime = new Date().getTime();
   context.fillStyle = "black";
   _self.down = function () {
    var time = (new Date().getTime() - _self.prevTime) / 200,
     y = _self.vo * time + 1 / 2 * _self.g * time * time + _self.y;
    //console.log("down:time=" + time + ":y=" + y + ":" + _self.vo);
    if (y + _self.height >= canvasheight) {
     _self.g--;
     _self.vo = _self.g * time;
     _self.prevTime = new Date().getTime();
     _self.up();
    } else {
     context.clearRect(_self.prevX, _self.prevY - 1, _self.prevX + _self.height, _self.prevY + _self.width);
     context.fillRect(_self.x, y, _self.width, _self.height);
     _self.prevX = x;
     _self.prevY = y;
     setTimeout(function () {
      _self.down();
     }, 30);
    }
   }
   _self.up = function () {
    var time = (new Date().getTime() - _self.prevTime) / 200,
     v = _self.vo - _self.g * time,
     y = canvasheight - _self.height - _self.vo * time + 1 / 2 * _self.g * time * time;
    //console.log("up:time=" + time + ":v=" + v);
    if (v <= 0) {
     _self.vo = 0;
     _self.y = y;
     _self.prevTime = new Date().getTime();
     if (y + _self.height < canvasheight) {
      _self.down();
     } else {
      return;
     }
    } else {
     context.clearRect(_self.prevX, _self.prevY - 1, _self.prevX + _self.height , _self.prevY + _self.width);
     context.fillRect(x, y, _self.width, _self.height);
     _self.prevX = x;
     _self.prevY = y;
     setTimeout(function () {
      _self.up();
     }, 30);
    }
   }
  }
  window.onload = function () {
   var canvas = document.getElementById('canvas');
   var context = canvas.getContext('2d');
   height = canvas.offsetHeight;
   var block = new Block(0, 100, 0, 20, 20, g, context);
   block.down();
  }
 </script>
</head>
<body>
<center>
<canvas id="canvas" width="500" height="500" style="background:#DDDDDD" ></canvas>
</center>
<input type="button" value="stop" onclick="stop()" />
<input type="button" value="start" onclick="start()" />
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(6)
Dec 23 Javascript
jquery select(列表)的操作(取值/赋值)
Mar 16 Javascript
jquery移除button的inline onclick事件(已测试及兼容浏览器)
Jan 25 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
Apr 01 Javascript
EasyUI学习之DataGird分页显示数据
Dec 29 Javascript
JS实现的点击表头排序功能示例
Mar 27 Javascript
vue轮播图插件vue-concise-slider的使用
Mar 13 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
Apr 10 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
Apr 28 Javascript
JS一次前端面试经历记录
Mar 19 Javascript
vue 子组件修改data或调用操作
Aug 07 Javascript
vue $router和$route的区别详解
Dec 02 Vue.js
js判断上传文件后缀名是否合法
Jan 28 #Javascript
Angular中$compile源码分析
Jan 28 #Javascript
实例讲解JS中setTimeout()的用法
Jan 28 #Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
Jan 28 #Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
Jan 28 #Javascript
基于javascript实现动态显示当前系统时间
Jan 28 #Javascript
jQuery实现div随意拖动的实例代码(通用代码)
Jan 28 #Javascript
You might like
递归列出所有文件和目录
2006/10/09 PHP
PHP编码规范之注释和文件结构说明
2010/07/09 PHP
php获取URL中带#号等特殊符号参数的解决方法
2014/09/02 PHP
CodeIgniter使用smtp服务发送html邮件的方法
2015/06/10 PHP
php基础教程
2015/08/26 PHP
php基于协程实现异步的方法分析
2019/07/17 PHP
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
2012/06/14 Javascript
使用jsonp完美解决跨域问题
2014/11/27 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
2015/11/26 Javascript
Bootstrap CSS布局之代码
2016/12/17 Javascript
vue中Axios的封装与API接口的管理详解
2018/08/09 Javascript
angularJs中json数据转换与本地存储的实例
2018/10/08 Javascript
小程序实现悬浮搜索框
2019/07/12 Javascript
JAVA面试题 static关键字详解
2019/07/16 Javascript
uni-app如何实现增量更新功能
2020/01/03 Javascript
Python正则表达式的使用范例详解
2014/08/08 Python
Python使用QQ邮箱发送Email的方法实例
2017/02/09 Python
python3下使用cv2.imwrite存储带有中文路径图片的方法
2018/05/10 Python
Python中的元组介绍
2019/01/28 Python
Python控制Firefox方法总结
2019/06/03 Python
pytorch在fintune时将sequential中的层输出方法,以vgg为例
2019/08/20 Python
python lambda函数及三个常用的高阶函数
2020/02/05 Python
HTML5中input输入框默认提示文字向左向右移动的示例代码
2020/09/10 HTML / CSS
世界上最大的售后摩托车零配件超市:J&P Cycles
2017/12/08 全球购物
家佳咖啡店创业计划书
2013/12/27 职场文书
读书心得体会
2013/12/28 职场文书
校园创业策划书
2014/01/14 职场文书
团日活动总结
2014/04/28 职场文书
2014年党课学习材料
2014/05/11 职场文书
应急处置方案
2014/06/16 职场文书
学习教师敬业奉献模范事迹材料思想汇报
2014/09/19 职场文书
教师党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
《为人民服务》教学反思
2016/02/20 职场文书
奶茶店的创业计划书该怎么写?
2019/07/15 职场文书
《合作意向书》怎么写?
2019/08/20 职场文书
“爱眼护眼,提前预防近视”倡议书3篇
2019/10/30 职场文书