用php计算自由落体,JavaScript模拟自由落体
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
body {
padding: 0;
margin: 0;
background-color: rgba(0, 0, 0, 1);
}
#canvas{
display: block;
margin: 10px auto;
}
your browser is not support canvas
//自由落体 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();
}
4.结语
虽然只是一个简单的下落和弹起,但是为了弹起位移的实现整整花费本人6天的时间(主要是每天都思考怎么计算弹起位移)
主要开始的思路一直关注在
下落位移 (开口线上抛物线方程)
y = (1/2)gt^2
思考反弹的位移应该改是将抛物线沿x轴右移t1,得出
y = (1/2)g(t-t1)^2
有兴趣的同学可以试试看看效果
浏览器渲染反弹的效果不尽人意,所以一直没想出计算的位移方法,故使用数组实现
用php计算自由落体,JavaScript模拟自由落体相关推荐
- 模拟自由落体运动的小球
基于VS2019 EasyX插件 C/C++ 生成一个模拟自由落体运动的小球 #include <iostream> #include <graphics.h> #in ...
- git 沙河游戏节点图, 自由沙盒模拟git, 各类交互git命令
git学习练习总资源链接: https://try.github.io/ (练习已通,有document) 本沙盒游戏教学:https://learngitbranching.js.org/?demo ...
- 模拟运行php,window_PHP+Javascript模拟Matrix画面, 直接存为*.php文件运行即 - phpStudy...
PHP+Javascript模拟Matrix画面 直接存为*.php文件运行即可. $color_back="#000000"; $number_w=8; $number_h=6; ...
- javascript模拟微积分的底层求和运算
现计算曲线在定义域[0,3.17]段,曲线与x轴所围成的图形的面积. 用积分公式 根据上篇文章的讲述,用JavaScript模拟该积分的计算 核心代码如下: function paraCurve(x) ...
- Javascript模拟c#中arraylist操作(学习分享)
最近在看javascript,在<javascript高级编程>中也学到了不少东西.但是在这里要感谢博客园的"汤姆大叔" 的无私奉献,他的关于javascript相关博 ...
- [小笔记]TypeScript/JavaScript模拟Python中的Range函数
[小笔记]TypeScript/JavaScript 模拟Python中的Range函数 李俊才/CSDN博客 CSDN用户名:jcLee95 邮箱:291148484@163.com 原创不易,感谢 ...
- 【JavaScript】JavaScript模拟实现面向对象一张图帮助你深刻理解原型链和原型对象
文章目录 一.JavaScript模拟面向对象 1.函数是类 2.函数中各种变量的声明 3.关于函数内的this 小结:JavaScript中函数是什么? 4.练习:面向对象思想编写Complex类 ...
- JavaScript模拟实现先进先出、先进后出效果
JavaScript模拟实现先进先出.先进后出效果 JavaScript模拟实现先进先出.先进后出效果
- JavaScript - 模拟键盘输入支付密码
JavaScript - 模拟键盘输入支付密码 Max.Bai 2016-12-29 0x00: 发生了什么事 我做自动化测试的时候,需要自动化在页面上输入这个密码,什么样子的,看下面: 有没有很像支 ...
最新文章
- Go runtime的调度器
- numpy学习3:对象属性和基本数据类型
- HDU - 5015 233 Matrix(矩阵快速幂)
- 覃超:从湘西到Facebook,硅谷只是技术人生的一小站
- STL源码剖析 数值算法 copy_backward 算法
- java接收rowtype类型_Java PhysType.getJavaRowType方法代码示例
- linux .net core 后台执行,.NET Core基于Generic Host实现后台任务方法教程
- 换行 输出txt_编程短文:Bash echo如何原生输出带空格的字符串而不换行
- 列表元素循环移位中Python切片的妙用
- 【须弥SUMERU】宜信分布式安全服务编排实践
- AndroidSDK下载及安装
- SecureCRT信号灯超时问题解决办法
- 淘宝爬登录、取个人资料、微博绑定、收货地址、支付宝绑定设置、安全设置等信息、购物车、收藏宝贝和店铺、个人积分、退款维权、我的足迹...
- delphi打印pdf文件_在Delphi应用程序中使用Adobe Acrobat(PDF)文件
- Pomelo MMORPG
- PHP短网址缩短源码 短网址生成系统源码
- C语言 输入一个正整数,判断它是素数还是合数
- 洗地机哪个品牌好用,洗地机十大品牌分享
- word如何添加行号_如何将行号添加到Microsoft Word文档
- mysql没有exe_MySQL解压之后没有exe程序,怎么解决,怎么安装访问
热门文章
- 什么无线桥接一直正在链接服务器,路由器桥接成功无法从副路由器上网怎么办【解决方法】...
- Rasa课程、Rasa培训、Rasa面试、Rasa实战系列之 Countvectors and Spelling Errors
- 2023跨专业考研计算机,2023考研跨专业如何备考
- 护理学跨考计算机专业,什么是跨专业考研?
- word文档如何在标题前面加上对应的层级数字编号
- Whitelabel Error Page(2)之Internal Server Error
- Kotlin第三章:AndroidUI简介
- 每周分享第 23 期
- D妹上新|DoH和DoT开始公测啦!
- HTML中如何将字体加粗-前端入门