JavaScript模拟自由落体

el09xccxy 发布于2019-08-23 11:33 / 2536人阅读

摘要：效果图实现分析利用画圆球地面下落过程物理知识回顾，物体下落过程不计损耗由重力势能转换成动能重力势能动能速度右增加至此间需要计算浏览器每次渲染的圆球坐标反弹过程动能转化成重力势能速度是逐渐减少直至为本打算设置，为下落或者反弹消耗的时长但是实

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.代码实现




    
    Title

4.结语

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

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

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

y = (1/2)gt^2

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

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

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

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

云服务器 GPU云服务器自由落体自由落体运动自由落体的小球自由

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97117.html

简单理解JavaScript中的闭包

摘要：闭包在我理解是一种比较抽象的东西。所以我写了一篇博文来方便自己理解闭包。那么现在我们可以解释一下闭包的第一个定义在计算机科学中，闭包是引用了自由变量的函数。循环中创建闭包在我们使用的关键字之前，闭包的一个常见问题就出现在循环中创建闭包。零. 前言从我开始接触前端时就听说过闭包，但是一直不理解闭包究竟是什么。上网看了各种博客，大家对闭包的说法不一。闭包在我理解是一种比较抽象的东西。所...

sihai 2019-08-20 11:27 评论0 收藏0
javasscript - 收藏集 - 掘金

摘要：跨域请求详解从繁至简前端掘金什么是为什么要用是的一种使用模式，可用于解决主流浏览器的跨域数据访问的问题。异步编程入门道典型的面试题前端掘金在界中，开发人员的需求量一直居高不下。 jsonp 跨域请求详解——从繁至简 - 前端 - 掘金什么是jsonp？为什么要用jsonp?JSONP(JSON with Padding)是JSON的一种使用模式，可用于解决主流浏览器的跨域数据访问的问题...

Rango 2019-08-20 17:15 评论0 收藏0
js 闭包的使用技巧

摘要：闭包的学术定义先来参考下各大权威对闭包的学术定义百科闭包，又称词法闭包或函数闭包，是引用了自由变量的函数。所以，有另一种说法认为闭包是由函数和与其相关的引用环境组合而成的实体。前言上一章讲解了闭包的底层实现细节，我想大家对闭包的概念应该也有了个大概印象，但是真要用简短的几句话来说清楚，这还真不是件容易的事。这里我们就来总结提炼下闭包的概念，以应付那些非专人士的心血来潮。闭包的学术...

dendoink 2019-08-21 11:17 评论0 收藏0
javascript中关于作用域和闭包

摘要：在代码执行时，对应的作用域链常常是保持静态的。当语句执行完毕后，会把作用域链恢复到原始状态。在全局作用域中创建的函数，其作用域链会自动成为全局作用域中的一员。列表项目前言学习了javascript已经很久了，关于这个语言中的这两个特性也是早已耳熟能详，但是在实际的使用的过程中或者是遇到相关的问题的时候，还是不能很好的解决。因此我觉得很有必要深入的学习并且记录这个问题，以便在今后的...

zacklee 2019-08-21 17:10 评论0 收藏0
【简单好玩】细胞自动机小游戏

摘要：当前细胞为存活状态时，当周围有个以上的存活细胞时，该细胞变成死亡状态。康威生命游戏的自由有了核心的算法游戏规则，康威生命就是一个具有生命的自由游戏。文件导出导入当然加了扩展功能，保存自己喜欢的细胞自动机成文件。细胞自动机备注：文末有自己用Javascript简单实现的网页版细胞自动机（还挺好玩）什么是细胞自动机 showImg(https://segmentfault.com/i...

yagami 2019-08-20 14:02 评论0 收藏0