js运动
一、模拟重力场的js实现
思路分析:1.模拟重力场的实现,要完成的四个方向是多方向运动+碰撞检测+重力加速度+能量的损失。
2.首先要声明一个元素来控制他的运动,并设置定位为绝对定位(相对于页面文档),方便操作他的运动。
3.实现多方向的运动就是既要改变这个dom的left,又要改变他的top,从而形成一个合力来改变。
4.实现碰撞的检测:就是比如说当碰撞到底部的时候,速度反向,同时设置相对应的实时left或者是top与之相对应(避免出现滚动条)。
5.重力加速度的实现:只要在每次定时器进行运行的时候都进行y方向的重力加速度的变化就可以。
6.能量的损失:在实际情况中,不可能会一直运动下去,所以说我们在模拟的时候,忽略在运动过程中损失**,在每次碰撞过程之后将ispeedx以及ispeedy都将其减小**。
代码实现bug:1.应该在最后在碰撞损失之后再进行速度的设定,不应该在一开始就已经设置dom.style.left以及top。
2.记住在一开始要清空定时器,避免多次点击导致定时器的累加。
3.定时器在设定之后一定要设置清空的条件判断,否则定时器将会一直存在。
代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>重力场模拟</title>
<style>
div {
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
top: 0;
left: 0;
}