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 相关文章推荐
IE中createElement需要注意的一个问题
Jul 13 Javascript
js判断IE6/IE7/FF的代码[XMLHttpRequest]
Feb 16 Javascript
jQuery setTimeout()函数使用方法
Apr 07 Javascript
js检测浏览器版本、核心、是否移动端示例
Apr 24 Javascript
JavaScript小技巧整理篇(非常全)
Jan 26 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
Jul 14 Javascript
Vue.js开发环境搭建
Nov 10 Javascript
慕课网题目之js实现抽奖系统功能
Sep 19 Javascript
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
JavaScript继承定义与用法实践分析
May 28 Javascript
浅析vue中的provide / inject 有什么用处
Nov 10 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
Aug 10 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
海河写的 Discuz论坛帖子调用js的php代码
2007/08/23 PHP
PHP实现登录搜狐广告获取广告联盟数据的方法【附demo源码】
2016/10/14 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
载入进度条 效果
2006/07/08 Javascript
动态调用css文件——jquery的应用
2007/02/20 Javascript
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
2007/10/23 Javascript
js 数值项目的格式化函数代码
2010/05/14 Javascript
分享20款好玩的jQuery游戏
2011/04/17 Javascript
JS删除数组元素的函数介绍
2013/03/27 Javascript
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
2013/09/16 Javascript
iframe子页面获取父页面元素的方法
2013/11/05 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
2014/04/16 Javascript
JavaScript比较两个对象是否相等的方法
2015/02/06 Javascript
javascript日期操作详解(脚本之家整理)
2015/09/05 Javascript
BootStrap glyphicons 字体图标实现方法
2016/05/01 Javascript
JS+Canvas绘制时钟效果
2020/08/20 Javascript
浅谈js的html元素的父节点,子节点
2016/08/06 Javascript
JavaScript中数组slice和splice的对比小结
2016/09/22 Javascript
使用jquery.qrcode.js生成二维码插件
2016/10/17 Javascript
Bootstrap popover用法详解
2016/12/22 Javascript
深入理解Angularjs中的$resource服务
2016/12/31 Javascript
微信小程序 基础组件与导航组件详细介绍
2017/02/21 Javascript
vue2.0 elementUI制作面包屑导航栏
2018/02/22 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
2018/03/08 Javascript
Servlet返回的数据js解析2种方法
2019/12/12 Javascript
关于javascript中的promise的用法和注意事项(推荐)
2021/01/15 Javascript
跟老齐学Python之list和str比较
2014/09/20 Python
Python实现对字典分别按键(key)和值(value)进行排序的方法分析
2018/12/19 Python
python文件操作的简单方法总结
2019/11/07 Python
解决pytorch多GPU训练保存的模型,在单GPU环境下加载出错问题
2020/06/23 Python
如何用Python徒手写线性回归
2021/01/25 Python
入党积极分子思想汇报范文
2014/01/05 职场文书
英语专业学生个人求职信
2014/01/28 职场文书
优秀党员获奖感言
2014/02/18 职场文书
法律七进实施方案
2014/03/15 职场文书
2016预备党员培训心得体会
2016/01/08 职场文书