[突发奇想的JS小案例] 2 重力模拟

好奇小圈

已于 2022-10-12 03:55:09 修改

阅读量965

点赞数

分类专栏：突发奇想的JS小案例文章标签： javascript 前端 css3

于 2021-11-16 16:18:54 首次发布

本文链接：https://blog.csdn.net/lbwnbdedede/article/details/121358412

版权

突发奇想的JS小案例专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了一个JavaScript新手如何创建一个互动效果，允许用户通过鼠标拖动方块，松开鼠标后方块将按照二次方速度下落。代码中利用了鼠标事件监听拖动和释放，并应用简单的物理公式模拟重力。此外，还设置了边界检查以限制方块的移动范围。作者设想未来可能以此为基础实现类似愤怒小鸟的游戏。

摘要由CSDN通过智能技术生成

前言

作者是一个JavaScript新手，偶尔想到一些有趣的小案例分享

一、效果展示

请添加图片描述

可以利用鼠标拖动舞台中的方块，松开鼠标时方块会按照二次方的速度（简单的物理公式x=x₀-1/2×gt²）降落

二、代码与思路

1.代码

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .room {
            position: relative;
            width: 100%;
            height: 600px;
            background-color: white;
            box-shadow: 0 -5px 5px #bbbbbb inset;
            ;
        }

        .box {
            position: absolute;
            width: 80px;
            height: 60px;
            background-color: #111;
        }
    </style>
</head>

<body>
    <div class="room">
        <div class="box"></div>
    </div>

    <script>
        var flag = 0;
        let room = document.querySelector('.room');
        let box = document.querySelector('.box');
        var mx = 0;
        var my = 0;
        box.style.left = 100 + 'px';
        box.style.top = 100 + 'px';
        room.style.width = window.innerWidth + 'px';


        function animate(obj) {
            var k = 0.01;
            var timer = setInterval(function () {
                let y = parseInt(obj.style.top);
                if (y + 9.8 * k * k > 540) {
                    obj.style.top = 540 + 'px';
                }
                else {
                    obj.style.top = y + 9.8 * k * k + 'px';
                }

                k = k + 0.015;
                room.style.width = window.innerWidth + 'px';
                if (y >= 540 || flag == 1) {
                    clearInterval(timer);
                }
                // console.log(k + "," + y)
            }, 10);
        }




        //鼠标点击移动事件
        box.addEventListener('mousedown', function (e) {
            room.style.width = window.innerWidth + 'px';
            let x = e.clientX;
            let y = e.clientY;
            let Ox = e.offsetX;
            let Oy = e.offsetY;
            box.style.left = x - Ox + 'px';
            box.style.top = y - Oy + 'px';
            flag = 1;
            mx = e.offsetX;
            my = e.offsetY;
        });
        //利用父级元素，防止鼠标移动过快而脱离目标
        room.addEventListener('mousemove', function (e) {

            if (flag > 0) {
                let x = e.clientX;
                let y = e.clientY;
                if (e.clientX < mx) {
                    x = mx;
                }
                else if (e.clientX > window.innerWidth - 80 + mx) {
                    x = window.innerWidth - 80 + mx;
                    console.log(x)
                }
                else { }
                if (e.clientY < my) {
                    y = my;
                }
                else if (e.clientY > 540 + my) {
                    y = 540 + my;
                }
                else { }
                let Ox = mx;
                let Oy = my;
                box.style.left = x - Ox + 'px';
                box.style.top = y - Oy + 'px';
                // console.log(x + "," + y + "," + Ox + "," + Oy)
                // console.log(window.innerWidth)
            }
        });
        //利用文档脱离移动
        document.addEventListener('mouseup', function (e) {
            flag = 0;
            animate(box);
        });


    </script>
</body>

</html>

2.思路

有两个块元素组成，分别是背景和小方块。
在这里插入图片描述

为了限制小方块的拖动范围，增加了判断语句


            if (flag > 0) {
                let x = e.clientX;
                let y = e.clientY;
                if (e.clientX < mx) {
                    x = mx;
                }
                else if (e.clientX > window.innerWidth - 80 + mx) {
                    x = window.innerWidth - 80 + mx;
                    console.log(x)
                }
                else { }
                if (e.clientY < my) {
                    y = my;
                }
                else if (e.clientY > 540 + my) {
                    y = 540 + my;
                }
                else { }

重力部分才用到了定时器，于鼠标松开后调用，于鼠标按下时清除定时器。

        function animate(obj) {
            var k = 0.01;
            var timer = setInterval(function () {
                let y = parseInt(obj.style.top);
                if (y + 9.8 * k * k > 540) {
                    obj.style.top = 540 + 'px';
                }
                else {
                    obj.style.top = y + 9.8 * k * k + 'px';
                }

                k = k + 0.015;
                room.style.width = window.innerWidth + 'px';
                if (y >= 540 || flag == 1) {
                    clearInterval(timer);
                }
                // console.log(k + "," + y)
            }, 10);
        }