js+html5实现的自由落体运动效果代码

209 阅读 0 评论 138 点赞

我是靠谱客的博主缓慢马里奥，这篇文章主要介绍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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!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>