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 相关文章推荐
js类型转换与引用类型详解(Boolean_Number_String)
Mar 07 Javascript
jQuery增加与删除table列的方法
Mar 01 Javascript
用JS实现轮播图效果(二)
Jun 26 Javascript
jQuery调用Webservice传递json数组的方法
Aug 06 Javascript
javascript中的后退和刷新实现方法
Nov 10 Javascript
AngularJS中run方法的巧妙运用
Jan 04 Javascript
微信小程序 侧滑删除(左滑删除)
May 23 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
Oct 16 Javascript
微信小程序template模板实例详解
Oct 27 Javascript
解析Vue2 dist 目录下各个文件的区别
Nov 22 Javascript
webstorm添加*.vue文件支持
May 08 Javascript
小程序实现分类页
Jul 12 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
博士208HAF收音机实习报告
2021/03/02 无线电
PHP 开源框架22个简单简介
2009/08/24 PHP
yii2实现 &quot;上一篇,下一篇&quot; 功能的代码实例
2017/02/04 PHP
laravel 框架执行流程与原理简单分析
2020/02/01 PHP
Jquery 滑入滑出效果实现代码
2010/03/27 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
使用JavaScript 编写简单计算器
2014/11/24 Javascript
Jquery 实现弹出层插件
2015/01/28 Javascript
vue实现图书管理demo详解
2017/10/17 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
2017/10/21 Javascript
微信小程序实现人脸识别
2018/05/25 Javascript
jQuery实现的简单手风琴效果示例
2018/08/29 jQuery
AngularJS上传文件的示例代码
2018/11/10 Javascript
vuex实现数据状态持久化
2019/11/11 Javascript
使用pkg打包ThinkJS项目的方法步骤
2019/12/30 Javascript
vue Cli 环境删除与重装教程 - 版本文档
2020/09/11 Javascript
[02:02:38]VG vs Mineski Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
Python元组操作实例分析【创建、赋值、更新、删除等】
2017/07/24 Python
OpenCV HSV颜色识别及HSV基本颜色分量范围
2019/03/22 Python
Python按照list dict key进行排序过程解析
2020/04/04 Python
解决django migrate报错ORA-02000: missing ALWAYS keyword
2020/07/02 Python
一个非常简单好用的Python图形界面库(PysimpleGUI)
2020/12/28 Python
c/c++某大公司的两道笔试题
2014/02/02 面试题
abstract是什么意思
2012/02/12 面试题
艺术应用与设计专业个人的自我评价
2013/11/19 职场文书
财务科科长岗位职责
2014/03/10 职场文书
开工仪式主持词
2014/03/20 职场文书
会议室标语
2014/06/21 职场文书
收入及婚姻状况证明
2014/11/20 职场文书
艺术节开幕词
2015/01/28 职场文书
2015年创先争优活动总结
2015/03/27 职场文书
2015年社区消防安全工作总结
2015/10/14 职场文书
八年级数学教学反思
2016/02/17 职场文书
《曾国藩家书》读后感——读家书,立家风
2019/08/21 职场文书
导游词之任弼时故居
2020/01/07 职场文书
微软Win11有哪些隐藏功能? windows11多个功能汇总
2021/11/21 数码科技