2021-06-23 自由落体运动,抛物线运动和缓冲运动的实现

.box {width: 656px;height: 681px;border: 2px solid #000;background: seashell;position: relative;
}
.ball1,.ball2,.ball3 {width: 60px;height: 60px;background: tomato;border-radius: 50%;position: absolute;top: 0;left: 0;
}
.ball2 {background: violet;left: 100px;
}
.ball3 {background: yellow;left: 200px;
}
.line {width: 658px;height: 25px;background: #000;position: absolute;bottom: 0;
}

js:

var box = document.querySelector(".box");
var ball1 = document.querySelector(".ball1");
var ball2 = document.querySelector(".ball2");
var ball3 = document.querySelector(".ball3");
var line = document.querySelector(".line");
var inputs = document.querySelectorAll("input");//定义垂直和水平上的速度
var topSpeed = 5,leftSpeed = 25;
//定义垂直和水平方向上的边界值
var topTarget = box.offsetHeight - ball1.offsetHeight - line.offsetHeight,leftTarget = box.offsetWidth - ball1.offsetWidth;
// console.log(topTarget, leftTarget); //600 600
var timer = "";
inputs[0].addEventListener("click", function() {clearInterval(timer);timer = setInterval(() => {topSpeed += 5;console.log(topSpeed);if (ball1.offsetTop + topSpeed >= topTarget) {topSpeed = -topSpeed * 0.8; //触底后反弹并减小其值ball1.style.top = topTarget + "px";if (Math.abs(topSpeed) < 3) clearInterval(timer); //设置停止条件} else {ball1.style.top = ball1.offsetTop + topSpeed + "px"; //令小球下落}}, 100);
});
inputs[1].addEventListener("click", function() {clearInterval(timer);timer = setInterval(() => {topSpeed += 5;// console.log(topSpeed);// console.log(ball2.offsetLeft);if (ball2.offsetTop + topSpeed >= topTarget) {topSpeed = -topSpeed * 0.8;ball2.style.top = topTarget + "px";if (Math.abs(topSpeed) < 3) clearInterval(timer); //设置停止条件} else {ball2.style.top = ball2.offsetTop + topSpeed + "px"; //设置垂直方向上的移动:自由落体ball2.style.left = ball2.offsetLeft + leftSpeed + "px"; //设置水平方向上的移动:匀速往返// console.log(ball2.offsetLeft);}//设置水平方向上的边界if ((ball2.offsetLeft + leftSpeed) >= leftTarget) leftSpeed = -leftSpeed;if ((ball2.offsetLeft + leftSpeed) <= 0) leftSpeed = -leftSpeed;}, 100);
});
inputs[2].addEventListener("click", function() {clearInterval(timer);timer = setInterval(() => {topSpeed = (topTarget - ball3.offsetTop) / 10; //设置垂直方向上的速度递减topSpeed = topSpeed > 0 ? Math.ceil(topSpeed) : Math.floor(topSpeed);// console.log("topSpeed=", topSpeed);if (ball3.offsetTop + topSpeed >= topTarget) {clearInterval(timer); //设置运动的停止条件} else {// console.log("ball3.offsetTop=", ball3.offsetTop);ball3.style.top = ball3.offsetTop + topSpeed + "px"; //设置小球的移动}}, 100);
});

效果

2021-06-23 自由落体运动,抛物线运动和缓冲运动的实现相关推荐

自由落体和抛物线运动
自由落体是个加速的过程,让速度递加,再给速度个系数,减小速度即可抛物线是在自由落体的前提下left也会变,速度,速度系数 js函数 //自由落体和抛物线运动 function fallMove(ob ...
DOM实现元素拖拽，滚轮事件和特效动画缓冲运动处理
目录元素拖拽实现(点击拖动可视屏幕任意位置) DOM滚轮事件处理滚轮事件绑定滚轮事件方向滚轮事件兼容滚轮缩放图片案例实现特效动画缓冲运动单向缓冲运动反复缓冲运动简单的封装透明度处 ...
C++入门——仿真小球自由落体运动和抛物线运动
参考 <C和C++游戏趣味编程> 童真仿真自由落体的小球实现小球受重力影响加速下落后,碰到地面反弹的效果代码如下: #include <graphics.h> #incl ...
模拟自由落体运动的小球
基于VS2019 EasyX插件 C/C++ 生成一个模拟自由落体运动的小球 #include <iostream> #include <graphics.h> #in ...
pygame里面物体闪烁运动_教师资格【试讲示范】高中物理试讲答辩——《自由落体运动》试讲稿答辩...
试讲备课纸教学过程各位考官: 大家好,我是高中物理组的***号考生,我试讲的题目是<自由落体运动>,下面开始我的试讲. 一.导入新课同学们,老师手里现在拿着一个小笔记本和一张纸,现在 ...
手把手教你用Python来模拟绘制自由落体运动过程中的抛物线（附源码）
前言前几天有个叫[-berry]的粉丝在问了一道关于自由落体运动过程中产生的抛物线作图的问题,如下图所示. 当某个物体以初速度v水平抛出,其轨迹为一条抛物线,模拟绘制这条抛物线.用高中物理知识,我们 ...
lammps案例：分子自由落体运动模拟
大家好,我是小马老师. 本文分享一个比较有意思的lammps案例:分子的自由落体运动. lammps提供了fix gravity命令可设置分子或者原子的加速度. 语法规则为: fix ID group ...
在OpenGL中创建一个球体动画，使球体在窗口内做自由落体运动，并在撞击地面后能够返回原来高度
这是计算机图形学基础的一道单元练习题,看题的时候觉得没什么,写出来才发现其中大有门道,其中有几个值得关注的地方: 首先如果你是以窗口底部为地面的话,你会发现小球在第二次下落时无法回弹,这就很恶心了,做 ...
matlab小球水平抛出,如何用Matlab制作小球自由落体运动的动画
第一堂课布置了一个Mission Impossible作业,要求学生们用Matlab制作一个动画,模拟小球的自由落体运动. 以下将整个任务的问题解决的过程分享如下: 步骤一,这是一个动画的制作过程,以 ...

2021-06-23 自由落体运动,抛物线运动和缓冲运动的实现

目录

思路

自由落体运动

抛物线运动

缓冲运动

代码

html:

css:

js:

效果

2021-06-23 自由落体运动,抛物线运动和缓冲运动的实现相关推荐

最新文章

热门文章