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如何判断用户是否是用微信浏览器
Jun 05 Javascript
JavaScript中的数组操作介绍
Dec 30 Javascript
JavaScript DOM事件(笔记)
Apr 08 Javascript
jQuery页面刷新(局部、全部)问题分析
Jan 09 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
May 30 Javascript
微信小程序 swiper组件轮播图详解及实例
Nov 16 Javascript
canvas学习之API整理笔记(一)
Dec 29 Javascript
Angular模板表单校验方法详解
Aug 11 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
Dec 29 Javascript
jquery实现选项卡切换代码实例
May 14 jQuery
vue store之状态管理模式的详细介绍
Jun 13 Javascript
layui使用label标签的方法
Sep 14 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
PHP在获取指定目录下的目录,在获取的目录下面再创建文件,多平台
2011/08/03 PHP
定义php常量的详解
2013/06/09 PHP
7个鲜为人知却非常实用的PHP函数
2015/07/01 PHP
Yii2使用自带的UploadedFile实现的文件上传
2016/06/20 PHP
Mac下php 5升级到php 7的步骤详解
2017/04/26 PHP
jquery教程ajax请求json数据示例
2014/01/13 Javascript
JavaScript不刷新实现浏览器的前进后退功能
2014/11/05 Javascript
Jquery 分页插件之Jquery Pagination
2015/08/25 Javascript
深入学习JavaScript对象
2015/10/13 Javascript
详解js中==与===的区别
2017/01/08 Javascript
AngularJS自定义指令实现面包屑功能完整实例
2017/05/17 Javascript
angularJs的ng-class切换class
2017/06/23 Javascript
Angular2 自定义validators的实现方法
2017/07/05 Javascript
使用webpack3.0配置webpack-dev-server教程
2018/05/29 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
2018/07/13 Javascript
Angular PWA使用的Demo示例
2019/01/31 Javascript
vue添加class样式实例讲解
2019/02/12 Javascript
如何换个角度使用VUE过滤器详解
2019/09/11 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
2020/11/06 Javascript
Python制作CSDN免积分下载器
2015/03/10 Python
进一步探究Python的装饰器的运用
2015/05/05 Python
python 打印出所有的对象/模块的属性(实例代码)
2016/09/11 Python
Python实现解析Bit Torrent种子文件内容的方法
2017/08/29 Python
一道python走迷宫算法题
2018/01/22 Python
浅析python打包工具distutils、setuptools
2018/04/20 Python
使用实现pandas读取csv文件指定的前几行
2018/04/20 Python
python3+PyQt5实现自定义分数滑块部件
2018/04/24 Python
浅谈python下tiff图像的读取和保存方法
2018/12/04 Python
django的auth认证,authenticate和装饰器功能详解
2019/07/25 Python
Python+Dlib+Opencv实现人脸采集并表情判别功能的代码
2020/07/01 Python
HTML5 3D旋转相册的实现示例
2019/12/03 HTML / CSS
Bally澳大利亚官网:瑞士奢侈品牌
2018/11/01 全球购物
军训 自我鉴定
2014/02/03 职场文书
加强作风建设工作总结
2014/10/23 职场文书
综合素质评价个性与发展自我评价
2015/03/06 职场文书
Java实现添加条码或二维码到Word文档
2022/06/01 Java/Android