js+html5实现的自由落体运动效果代码
2016-01-28 00:00
886 查看
本文实例讲述了js+html5实现的自由落体运动效果。分享给大家供大家参考,具体如下:
运行效果截图如下:
具体代码如下:
更多关于JavaScript运动相关内容感兴趣的读者可查看本站专题:《JavaScript运动效果与技巧汇总》
希望本文所述对大家JavaScript程序设计有所帮助。
javascript弹性运动效果简单实现方法
javascript多物体运动实现方法分析
javascript匀速运动实现方法分析
JavaScript缓冲运动实现方法(2则示例)
JS运动相关知识点小结(附弹性运动示例)
JavaScript拖拽、碰撞、重力及弹性运动实例分析
JavaScript运动减速效果实例分析
javascript实现10个球随机运动、碰撞实例详解
jQuery+canvas实现的球体平抛及颜色动态变换效果
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
运行效果截图如下:
具体代码如下:
<!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程序设计有所帮助。
您可能感兴趣的文章:
javascript 实现自由落体的方块效果javascript弹性运动效果简单实现方法
javascript多物体运动实现方法分析
javascript匀速运动实现方法分析
JavaScript缓冲运动实现方法(2则示例)
JS运动相关知识点小结(附弹性运动示例)
JavaScript拖拽、碰撞、重力及弹性运动实例分析
JavaScript运动减速效果实例分析
javascript实现10个球随机运动、碰撞实例详解
jQuery+canvas实现的球体平抛及颜色动态变换效果
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
相关文章推荐
- js+canvas绘制五角星的方法
- JavaScript黑洞数字之运算路线查找算法(递归算法)实例
- 基于javascript实现checkbox复选框实例代码
- JavaScript统计字符串中每个字符出现次数完整实例
- 谈一谈javascript闭包
- js+canvas简单绘制圆圈的方法
- js+canvas绘制矩形的方法
- 基于JavaScript的操作系统你听说过吗?
- Javascript复制实例详解
- 探讨JavaScript语句的执行过程
- JS prototype笔记
- JS构造函数模式和原型模式笔记
- js瀑布流,实现图片自适应显示
- bean和json相互转换的工具(基于谷歌的gson)
- JavaScript 权威指南学习记录
- js正则表达式
- EL+servlet+jsp实现简单的投票程序版本二
- Three.js typescript definitely typed 文件
- Swipe JS – 移动WEB页面内容触摸滑动类库
- js 自定义滑块 实现文字滚动+透明度变化