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之ESC(第二类混淆)
May 06 Javascript
javascript中的继承实例代码
Apr 27 Javascript
jquery应该如何来设置改变按钮input的onclick事件
Dec 10 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
Apr 18 Javascript
模拟多级复选框效果的jquery代码
Aug 13 Javascript
js计算字符串长度包含的中文是utf8格式
Oct 15 Javascript
For循环中分号隔开的3部分的执行顺序探讨
May 27 Javascript
JQuery实现鼠标移动图片显示描述层的方法
Jun 25 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
Aug 25 Javascript
基于react后端渲染模板引擎noox发布使用
Jan 11 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
Jul 13 Javascript
js利用拖放实现添加删除
Aug 27 Javascript
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
simplehtmldom Doc api帮助文档
2012/03/26 PHP
php遍历目录方法小结
2015/03/10 PHP
PHP调用Mailgun发送邮件的方法
2017/05/04 PHP
php 中phar包的使用教程详解
2018/10/26 PHP
JavaScript 浏览器验证代码(来自discuz)
2010/07/17 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
2013/06/21 Javascript
node.js中的fs.createReadStream方法使用说明
2014/12/17 Javascript
浅谈javascript中字符串String与数组Array
2014/12/31 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
2015/08/21 Javascript
JS冒泡事件与事件捕获实例详解
2016/11/25 Javascript
简单理解js的prototype属性及使用
2016/12/07 Javascript
微信小程序中实现一对多发消息详解及实例代码
2017/02/14 Javascript
用react-redux实现react组件之间数据共享的方法
2018/06/08 Javascript
利用原生的JavaScript实现简单拼图游戏
2018/11/18 Javascript
小程序登录/注册页面设计的实现代码
2019/05/24 Javascript
微信小程序实现点击卡片 翻转效果
2019/09/04 Javascript
npm 语义版本控制详解
2019/09/10 Javascript
Vue v-bind动态绑定class实例方法
2020/01/15 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
2020/08/07 Javascript
jenkins自动构建发布vue项目的方法步骤
2021/01/04 Vue.js
Python Web开发模板引擎优缺点总结
2014/05/06 Python
python-opencv在有噪音的情况下提取图像的轮廓实例
2017/08/30 Python
python安装教程
2018/02/28 Python
Python实现微信消息防撤回功能的实例代码
2019/04/29 Python
PyTorch之图像和Tensor填充的实例
2019/08/18 Python
Python timer定时器两种常用方法解析
2020/01/20 Python
Python利用PyPDF2库获取PDF文件总页码实例
2020/04/03 Python
python3中celery异步框架简单使用+守护进程方式启动
2021/01/20 Python
bonprix匈牙利:女士、男士和儿童服装
2019/07/19 全球购物
MUGLER官方网站:蒂埃里·穆勒香水
2019/11/26 全球购物
医院办公室主任职责
2013/12/29 职场文书
房屋公证委托书
2014/04/03 职场文书
酒店收银员岗位职责
2015/04/07 职场文书
2015年国庆节演讲稿范文
2015/07/30 职场文书
2016年大学迎新晚会工作总结
2015/10/15 职场文书
Windows中Redis安装配置流程并实现远程访问功能
2021/06/07 Redis