这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 js+html5 实现的自由落体运动效果, 通过 JavaScript 结合 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 程序设计有所帮助。
(adsbygoogle = window.adsbygoogle || []).push({});
来源: http://www.phperz.com/article/17/0701/267316.html