重力运动

最新推荐文章于 2024-01-02 10:27:03 发布

伊人至尚

最新推荐文章于 2024-01-02 10:27:03 发布

阅读量350

点赞数

分类专栏： JavaScripy 文章标签： DOM 重力回弹抛物线

本文链接：https://blog.csdn.net/smileshang1224/article/details/103046469

版权

JavaScripy 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

重力运动

重力加速运动

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>重力运动</title>
    <style type="text/css">
        .box {
            width: 900px;
            height: 600px;
            border: solid 1px black;
            margin: 50px auto;
            position: relative;
        }

        .a {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: red;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="a"></div>
    </div>
</body>
<script type="text/javascript">
    // 元素的获取
    var oa = document.querySelector(".a");

    var t;
    var speed = 2;
    var target = 500;

    document.onclick = function () {
        // 开始之前先清除定时器
        clearInterval(t);
        t = setInterval(() => {
            //重力运动,就是加速,每次计时器执行都将步长增加,实现加速
            speed++;
            // 判断每一步还够不够一步 ；判断是否到终点，没有到终点继续往下走
            // 目标 - 当前 < 步长
            if (target - oa.offsetTop < speed) {
                clearInterval(t);
                // 最后一步不够一步了，强行拉回来让它到目标
                oa.style.top = target + "px";
            // 没有到终点继续往下走
            } else {
                oa.style.top = oa.offsetTop + speed + "px";
            }
            console.log(1)
        }, 30)
    }

</script>

</html>

重力回弹运动

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box {
            width: 900px;
            height: 600px;
            border: solid 1px black;
            margin: 50px auto;
            position: relative;
        }

        .a {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: red;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="a"></div>
    </div>
</body>
<script type="text/javascript">
    // 元素的获取
    var oa = document.querySelector(".a");

    var t;
    var speed = 2;
    var target = 500;

    document.onclick = function () {
        // 开始之前先清除定时器
        clearInterval(t);
        t = setInterval(() => {
            //重力运动,就是加速,每次计时器执行都将步长增加,实现加速
            speed++;
            // 判断每一步还够不够一步 ；判断是否到终点，没有到终点继续往下走
            // 目标 - 当前 < 步长
            if (target - oa.offsetTop < speed) {
                // 为了回弹这时候就不可以再清除计时器了
                // clearInterval(t);
                // 强行拉回来最后一步不够一步了，强行拉回来让它到目标
                oa.style.top = target + "px";

                // 回弹就是在原本要清除计时器的位置(到底了),将步长取反
                // speed = -speed;
                // 从2开始的，第一步就走了2px，当它弹起到定点的时候速度必须是0，这个时候弹起来的时候
                // 就比落下来的时候多走了两步，落下的时候也没有落到最底下，是落到了倒数第二个那个位置，
                // 因为最后一步是强行拉回去的，也就是说落下的时候又少了最后半步，而弹起来的时候是从最底下开始弹的，
                // 重力回弹,每次弹起的步长进行衰减（五分之一）
                speed = -speed * 0.8;
                // 步长小于0.5了四舍五入取不到1了就弹不起来了。发生偏差取绝对值速度
                if (Math.abs(speed) < 1) {
                    // 清除计时器
                    clearInterval(t)
                }
            // 没有到终点继续往下走
            } else {
                oa.style.top = oa.offsetTop + speed + "px";
            }
            console.log(1)
        }, 30)
    }

</script>

</html>

重力回弹—抛物线

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		.box {
			width: 900px;
			height: 600px;
			border: solid 1px black;
			margin: 50px auto;
			position: relative;
		}

		.a {
			width: 100px;
			height: 100px;
			border-radius: 50%;
			background: red;
			position: absolute;
			left: 0;
			top: 0;
		}
	</style>
</head>

<body>
	<div class="box">
		<div class="a"></div>
	</div>
</body>
<script type="text/javascript">
	//		重力-重力弹回-重力回弹抛物线
	var oa = document.querySelector(".a");

	var t;
	var speed = 2;
	var target = 500;

	//		除了垂直位置,再操作左右位置,需要单独设置一套信息
	var speedL = 10;
	var targetR = 800;

	document.onclick = function () {
		clearInterval(t)
		t = setInterval(() => {
			speed++;

			if (target - oa.offsetTop < speed) {
				oa.style.top = target + "px";
				speed = -speed * 0.8;

				if (Math.abs(speed) < 1) {
					clearInterval(t);
				}
			} else {
				oa.style.top = oa.offsetTop + speed + "px";
			}
			// 左右操作
			// 判断是否到右边,决定右边的回弹
			if (targetR - oa.offsetLeft < speedL) {
				// 强行设置到目标
				oa.style.left = targetR + "px";
				speedL = -speedL;
				// 设置left之前,要先判断计时器是否要被清除，不被清除再设置left。为了点击的时候小球再走
			} else if (Math.abs(speed) > 1) {
				// 因为左右是两套分支,设置left会执行两次,为了保证执行两次是一次的效果,所以步长再设置时,要减半
				oa.style.left = oa.offsetLeft + speedL / 2 + "px";
			}

			if (oa.offsetLeft < 0) {
				// 强行设置到 0
				oa.style.left = 0 + "px";
				speedL = -speedL;

			} else if (Math.abs(speed) > 1) {
				oa.style.left = oa.offsetLeft + speedL / 2 + "px";
			}

		}, 30)
	}
</script>

</html>

重力回弹一直弹—来回弹

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box {
            width: 900px;
            height: 600px;
            border: solid 1px black;
            margin: 50px auto;
            position: relative;
        }

        .a {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: red;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="a"></div>
    </div>
</body>
<script type="text/javascript">
    var oa = document.querySelector(".a");

    var t;

    var speed = 2;
    var target = 500;


    //		除了垂直位置,再操作左右位置,需要单独设置一套信息
    var speedL = 10;
    var targetR = 800;

    document.onclick = function () {
        clearInterval(t)
        t = setInterval(() => {
            // speed++;
            // 上下操作
            if (target - oa.offsetTop < speed) {
                oa.style.top = target + "px";
                speed = -speed * 0.8;

                if (Math.abs(speed) < 1) {
                    clearInterval(t);
                }
            } else {
                oa.style.top = oa.offsetTop + speed / 2 + "px";
            }

            if (oa.offsetTop < 0) {
                // 强行设置到 0
                oa.style.top = 0 + "px";
                speed = -speed;

            } else if (Math.abs(speed) < 1) {
                oa.style.top = oa.offsetTop + speed / 2 + "px";
            }


            // 左右操作
            // 判断是否到右边,决定右边的回弹
            if (targetR - oa.offsetLeft < speedL) {
                // 强行设置到目标
                oa.style.left = targetR + "px";
                speedL = -speedL;
                // 设置left之前,要先判断计时器是否要被清除，不被清除再设置left。为了点击的时候小球再走
            } else if (Math.abs(speed) > 1) {
                // 因为左右是两套分支,设置left会执行两次,为了保证执行两次是一次的效果,所以步长再设置时,要减半
                oa.style.left = oa.offsetLeft + speedL / 2 + "px";
            }

            if (oa.offsetLeft < 0) {
                // 强行设置到 0
                oa.style.left = 0 + "px";
                speedL = -speedL;

            } else if (Math.abs(speed) > 1) {
                oa.style.left = oa.offsetLeft + speedL / 2 + "px";
            }

        }, 30)
    }
</script>

</html>

伊人至尚

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
重力运动

重力运动重力加速运动<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>重力运动</title> <style type="text/css"> .box { width: 90...
复制链接

扫一扫

专栏目录