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运动效果与技巧汇总》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • JS实现匀加速与匀减速运动的方法示例

    本文实例讲述了JS实现匀加速与匀减速运动的方法.分享给大家供大家参考,具体如下: /* * 动画帧函数 * * */ var requestFrame=function(){ var prefixList=['webkit','moz','ms']; var func; for(var i=0;i<prefixList.length;i++){ func=window[prefixList[i]+"RequestAnimationFrame"]; if(func){ return

  • javascript实现10个球随机运动、碰撞实例详解

    本文实例讲述了javascript实现10个球随机运动.碰撞的方法.分享给大家供大家参考.具体如下: 学了一段时间的javascript了,做过一些小案例,目前最有难度的就是10个小球随机碰撞效果,这不,把它上上来与大家分享一下,相信不少和我一样的菜鸟在开始上手编程时都会有不少的困惑,希望它能给一些人带来帮助. 效果要求:10个小球在页面随机移动,碰到窗口边界或其他小球都会反弹 思路: 1.10个小球是10个div; 2.碰窗口反弹,定义vx vy为小球的移动变量,以及一个弹力变量bounce(

  • JS实现匀速运动的代码实例

    JS实现匀速运动的代码实例

    效果: 思路: 利用setInerval()计时器,进行运动.然后关键的一点是在最后停止的时候给它一个填充缝隙的判断. 代码: 复制代码 代码如下: <head runat="server">    <title></title>    <style type="text/css">        #div1        {            width: 100px;            height: 10

  • js实现缓冲运动效果的方法

    本文实例讲述了js实现缓冲运动效果的方法.分享给大家供大家参考.具体分析如下: 该实例可实现一开始速度很快,然后慢下来,直到停止的效果. 要点: var speed = (target-box.offsetLeft)/8; 目标点减去元素的当前位置的值除以8,因为offsetleft的值是一直在变大,所以速度的值也是一直的变小 speed = speed>0?Math.ceil(speed):Math.floor(speed); 正向速度的时候向上取整,反向速度的时候向下取整 代码: <!DO

  • js简单实现点击左右运动的方法

    本文实例讲述了js简单实现点击左右运动的方法.分享给大家供大家参考.具体分析如下: 这里可实现点击向右,方块向右移动,点击向左,方块向左移动的效果 可以用setInterval来实现过多长时间,div移动多长的距离来实现运动效果. 要点一:如果元素的左边距离小于目标距离,则是正向移动,否则是负向移动 if(run.offsetLeft <target){ speed = 2; }else{ speed = -2; } 要点二:如果元素的左边距离等于目标距离,停止定时器,否则,元素的左边距离等于现

  • JavaScript拖拽、碰撞、重力及弹性运动实例分析

    本文实例讲述了JavaScript拖拽.碰撞.重力及弹性运动实现方法.分享给大家供大家参考,具体如下: js拖拽.碰撞与重力实现代码: window.onload=function () { var oDiv=document.getElementById('div1'); var lastX=0; var lastY=0; oDiv.onmousedown=function (ev) { var oEvent=ev||event; var disX=oEvent.clientX-oDiv.of

  • Javascript实现重力弹跳拖拽运动效果示例

    演示地址: http://www.ihuxu.com/project/gcdmove/ 调用示例: var GCDM = gcdMove(oDiv,100,0); GCDM.startMove();//开始运动 GCDM.stopMove();//结束运动 该段JS代码已经封装好了,代码如下: 简要说明 - obj为要改动的对象元素,通常为某个div:iSpeedX,iSpeedY为div出师的横向(右侧),竖向(下)的初始速度,当然也可以设为零. 复制代码 代码如下: /** * @Desc

  • Js实现简单的小球运动特效

    废话不多说了,直接给大家贴js代码了,具体代码如下所示: <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="content-type" content="text/html;charset=utf-"/> </head> <body style="background:pink;"

  • js运动动画的八个知识点

    今天简单的学了一下js运动动画,记录一下自己的心得体会,分享给大家. 下面是我整理出来的结果. 知识点一:速度动画. 1.首先第一步实现速度运动动画,封装一个函数,用到的知识是setInterval(function(){ 复制代码 代码如下: oDiv.style.left=oDiv.offsetLeft+10+"px"; },30). 对于这里为什么要用到offsetLeft,我特意百度了一下,我得到的有用信息是: a.offsetLeft和left的相同之处都是表示子节点相对于父

  • 使用JavaScript 实现对象 匀速/变速运动的方法

    实例1--控制一个对象的匀速移动和停止 HTML: 复制代码 代码如下: <input id="btn" type="button" value=" Move It ! "/>    <div id="d1">        <img id="i1" src="1.jpg" alt/>    </div> JS:实现向右运动 复制代码 代码

  • Javascript模拟加速运动与减速运动代码分享

    加速运动,即一个物体运动时速度越来越快:减速运动,即一个物体运动时速度越来越慢.现在用Javascript来模拟这两个效果,原理就是用setInterval或setTimeout动态改变一个元素与另外一个元素的距离,如xxx.style.left或xxx.style.marginLeft,然后每次运动后都使速度增加,这样加速运动的效果就出现了,减速运动是同样的道理. 下面是两个示例: 加速运动 复制代码 代码如下: <!DOCTYPE html> <html> <head&g

随机推荐