JavaScript模拟实现自由落体效果

本文实例为大家分享了js实现自由落体效果的具体代码，供大家参考，具体内容如下

1.效果图


2.实现分析

利用Canvas画圆球、地面；

1.下落过程

物理知识回顾，物体下落过程（不计损耗）由重力势能转换成动能

重力势能 Ep = mgh

动能  Ek = (1/2)mv^2

速度右0增加至gt

此间需要计算浏览器每次渲染的圆球y坐标

y = (1/2)gt^2

2.反弹过程

动能转化成重力势能

速度是逐渐减少直至为0

本打算设置 y = (1/2)g(t-t1)^2，t1为下落或者反弹消耗的时长

但是实际呈现的效果却不尽人意，应该是反弹位移计算有误，经反复思考无果（若哪位大拿有更好的实现方式欢迎评论告知）

所以决定将下落过程的位移保存在一个数组里，待反弹时再逐一取出赋值

3.代码实现

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
  body {
   padding: 0;
   margin: 0;
   background-color: rgba(0, 0, 0, 1);
  }
  #canvas{
   display: block;
   margin: 10px auto;
  }
 </style>
</head>
<body>
<canvas id="canvas" width="600" height="600">your browser is not support canvas</canvas>
<script type="text/javascript">
 //自由落体 H=(gt^2)/2 动能 Ek=(mv^2)/2 重力势能:Ep = mgh
 let x=300,y=60,     //圆心坐标
  minHeight = 60,    //最小下落位移
  maxHeight = 446,   //最大下落位移
  dir = true;     //dir true下落，false为弹起
 (function(){
  let canvas= document.getElementById('canvas');
  let ctx = canvas.getContext('2d');
  draw(ctx);
 })();
 function draw(ctx){
  let currentTime = new Date().getTime();  //开始毫秒数,折返记录一次currentTime
  let arr_y = [];        //设置下落位移的数组
  window.requestAnimationFrame(function init(){
   if(dir){
    if(y >= maxHeight){
     dir = false;
     currentTime = new Date().getTime();
    }else{
     y = y + Math.pow((new Date().getTime() - currentTime)/1000,2)*10/2;
     arr_y.push(y);
    }
   }else{
    if(y <= minHeight){
     dir = true;
     currentTime = new Date().getTime();
    }else{
     y = arr_y.splice(-1,1)[0] || 60;
    }
   }
   drawArc(ctx,x,y);
   requestAnimationFrame(init);
  });
 }
 //绘制圆球和地面
 function drawArc(ctx,x,y){
  ctx.clearRect(0, 0, 600, 600);
  ctx.beginPath();
  ctx.arc(x,y,50,0,Math.PI*2);
  ctx.fillStyle='#98adf0';
  ctx.fill();
  ctx.save();
  ctx.beginPath();
  ctx.strokeStyle = '#ffffff';
  ctx.moveTo(0,500);
  ctx.lineTo(600,500);
  ctx.lineWidth = 4;
  ctx.stroke();
  ctx.closePath();
  ctx.save();
 }
</script>
</body>
</html>

4.结语

虽然只是一个简单的下落和弹起，但是为了弹起位移的实现整整花费本人6天的时间（主要是每天都思考怎么计算弹起位移）

主要开始的思路一直关注在

下落位移 （开口线上抛物线方程）

y = (1/2)gt^2

思考反弹的位移应该改是将抛物线沿x轴右移t1，得出

y = (1/2)g(t-t1)^2

有兴趣的同学可以试试看看效果

浏览器渲染反弹的效果不尽人意，所以一直没想出计算的位移方法，故使用数组实现

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • javascript 实现自由落体的方块效果

    你可以试着按下鼠标左键,然后拖拽出一个方块后释放,看效果 Simple xhtml page div.container{ position:absolute; border:1px solid #333; font-size:0px; filter: alpha(opacity=60); opacity: 0.6; } =dc-dh){clearInterval(self.dropId);self.fade();} self.node.style.top = Math.min(dt+(++se

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

    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/x

  • JavaScript模拟实现自由落体效果

    JavaScript模拟实现自由落体效果

    本文实例为大家分享了js实现自由落体效果的具体代码,供大家参考,具体内容如下 1.效果图 2.实现分析 利用Canvas画圆球.地面: 1.下落过程 物理知识回顾,物体下落过程(不计损耗)由重力势能转换成动能 重力势能 Ep = mgh 动能  Ek = (1/2)mv^2 速度右0增加至gt 此间需要计算浏览器每次渲染的圆球y坐标 y = (1/2)gt^2 2.反弹过程 动能转化成重力势能 速度是逐渐减少直至为0 本打算设置 y = (1/2)g(t-t1)^2,t1为下落或者反弹消耗的时长

  • jQuery模拟物体自由落体运动(附演示与demo源码下载)

    jQuery模拟物体自由落体运动(附演示与demo源码下载)

    本文实例讲述了jQuery模拟物体自由落体运动的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示效果. 完整实例代码点击此处本站下载. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=

  • Javascript摸拟自由落体与上抛运动原理与实现方法详解

    本文实例讲述了Javascript摸拟自由落体与上抛运动原理与实现方法.分享给大家供大家参考,具体如下: JavaScript 代码 //**************************************** //名称:Javascript摸拟自由落体与上抛运动! //作者:Gloot //邮箱:glootz@gmail.com // QQ:345268267 //网站:http://www.cnblogs.com/editor/ //操作:在页面不同地方点几下 //*********

  • JavaScript模拟鼠标右键菜单效果

    JavaScript模拟鼠标右键菜单效果

    本文实例为大家分享了JavaScript模拟鼠标右键菜单的具体代码,供大家参考,具体代码如下 效果图: 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>右键菜单</title> <style type="text/css"> *{ margin: 0; padd

  • JavaScript模拟实现键盘打字效果

    $(function () { var input_type = { init:function ($obj) { this.name = $obj.html().split("") this.length = this.name.length; this.i = 0; }, pri:function () { var $this = this //在此处只能使用闭包,因为windown.settimeout使函数的this指向object windown,而非原型链的this对象.而

  • JavaScript模拟实现网易云轮播效果

    JavaScript模拟实现网易云轮播效果

    1.div宽度直接与浏览器界面宽度一致:width:100% 2.怎么让图片在一个绝对定位的盒子中垂直居中显示? 继续加绝对定位.然后改变top,和left的值 3.采用外置的js文件,需要等到页面加载完毕:window.οnlοad=function(){} 4.添加和移除元素的类名:先获取DOM对象,然后通过classList.add('current')(里面不需要加.)和classList.remove()即可添加类型和删除类名. 5.事件委托: 比如有100个li,每个li都有相同的c

  • 利用JavaScript模拟京东快递单号查询效果

    利用JavaScript模拟京东快递单号查询效果

    1.上面放大框开始是隐藏的,当输入单号后,就显示,并且里面的内容是输入框的内容的字体的放大 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi

  • JavaScript模拟实现新浪下拉菜单效果

    JavaScript模拟实现新浪下拉菜单效果

    思考:首先在CSS布局上就出错了,导致后面设置JS时就有很大的问题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"

  • JavaScript模拟实现"双11"限时秒杀效果

    JavaScript模拟实现"双11"限时秒杀效果

    目录 [案例]限时秒杀 一.全局作用域 二.弹出对话框和窗口 prompt()方法 confirm()方法 open()方法 三.窗口位置和大小 四.框架操作 五.定时器 [案例]限时秒杀 代码实现思路: ① 设计限时秒杀页面. ② 指定限时秒杀的结束时间,及其对应的毫秒数. ③ 获取当前时间的毫秒数. ④ 计算当前与秒杀结束的时间差,大于0,计算剩余的天时分秒:否则结束秒杀. ⑤ 利用定时器完成秒杀的倒计时功能. ⑥ 利用两位数字显示秒杀的时间. 代码实现 <!DOCTYPE html> &

随机推荐