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.代码实现
<!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
有兴趣的同学可以试试看看效果
浏览器渲染反弹的效果不尽人意,所以一直没想出计算的位移方法,故使用数组实现
欢迎纠错~
JavaScript模拟自由落体的更多相关文章
- 使用CSS3动画模拟实现小球自由落体效果
使用纯CSS代码模拟实现小球自由落体效果: html代码如下: <div id="ballDiv"> <div id="ball">&l ...
- Javascript摸拟自由落体与上抛运动 说明!
JavaScript 代码 //**************************************** //名称:Javascript摸拟自由落体与上抛运动! //作者:Gloot //邮箱 ...
- javascript---在自由落体实现
实现一些简单的物业自由落体需要理解: clientHeight:浏览器客户机的整体高度 offsetHeight:物(实例div)高低 offsetTop:从对象client最顶层的距离 简单demo ...
- canvas动画:自由落体运动
经过前面的文章,我们已经能够在canvas画布上画出各种炫酷的图形和画面,但是这些画面都是禁止的,怎么样才能让他们动起来呢? 如何绘制基本图形可以参考:canvas基本图形绘制 如何对基本图形移动旋转 ...
- 洛谷——P1033 自由落体
P1033 自由落体 题目描述 在高为 H 的天花板上有 n 个小球,体积不计,位置分别为 0,1,2,….n-1.在地面上有一个小车(长为 L,高为 K,距原点距离为 S1).已知小球下落距离计算公 ...
- js实现自由落体
实现自由落体运动需要理解的几个简单属性: clientHeight:浏览器客户端整体高度 offsetHeight:对象(比如div)的高度 offsetTop:对象离客户端最顶端的距离 <!d ...
- Javascript模拟继承(赠送.net吐槽一段)
首先吐槽一句,今年的就业形势很不乐观啊,特别是搞.net的(相对java),特特别是还没出校门没有正式工作经验的,找个实习很难,前些天接了个面试电话,上来就质疑我“你一个在校大学生怎么可能做了那么多项 ...
- Android游戏开发:物理游戏之重力系统开发--圆形自由落体Demo
本节为大家提供有关物理游戏的知识,讲解了一个简单的圆形自由落体Demo的编写.. Java代码 package com.himi; import java.util.Random; import ja ...
- 用原生javascript模拟经典FC游戏公路争霸
#用原生javascript模拟经典FC游戏公路争霸 前几天看了园子里面的随笔 [原生javascript开发仿微信打飞机小游戏](http://www.cnblogs.com/Mr-Nobody/p ...
随机推荐
- MybatisMapper 映射框架(增删改查 原始模式)
//增删改查 package TestDemo; import java.io.IOException; import java.io.InputStream; import java.util.Da ...
- Python3实战系列之五(获取印度售后数据项目)
问题:续接上一篇.说干咱就干呀,勤勤恳恳写程序呀! 目标:此篇我们试着把python程序打包成.exe程序.这样就可以在服务器上运行了.实现首篇计划列表功能模块的第二步: 2.将python程序转为 ...
- 孤岛营救问题 (BFS+状压)
https://loj.ac/problem/6121 BFS + 状压 写过就好想,注意细节debug #include <bits/stdc++.h> #define read rea ...
- HTML之<meta>使用和说明
关于<meta>,我们都不陌生,随意打开一个网页查看源代码就可以看到<head>里出现它的身影. 简单来说,<meta>是描述 HTML 文档的元数据.例如网页描述 ...
- Media Queries 媒体查询常见设备断点
按需调整断点 一.谷歌后摘抄的一部分媒体查询 /*#region SmartPhones */ /* SmartPhones */@media only screen and (min-device- ...
- [ZJOI2019]语言
树链剖分入门题吧 一个非常直观的想法是使用树剖将一条链拆成\(log^2n\)个矩形,套用矩形面积并算法即可得到一个垃圾的3个log过不去算法 为了得到一个两个log的做法,我们观察一下拆出来的矩形的 ...
- 「LOJ2000~2023」各省省选题选做
「LOJ2000~2023」各省省选题选做 「SDOI2017」数字表格 莫比乌斯反演. 「SDOI2017」树点涂色 咕咕咕. 「SDOI2017」序列计数 多项式快速幂. 我们将超过 \(p\) ...
- vue高级组件之provide / inject
转载:https://blog.csdn.net/Garrettzxd/article/details/81407199 在vue中不同组件通信方式如下 1.父子组件,通过prop 2.非父子组件,通 ...
- IPv6技术详解:基本概念、应用现状、技术实践(上篇)
本文来自微信技术架构部的原创技术分享. 1.前言 普及IPV6喊了多少年了,连苹果的APP上架App Store也早已强制IPV6的支持,然并卵,因为历史遗留问题,即使在IPV4地址如果饥荒的情况下, ...
- Servlet案例1:用户登录
数据库准备: CREATE DATABASE web; USE web; CREATE TABLE users( id INT PRIMARY KEY AUTO_INCREMENT, username ...