元素移动不流畅

Question

我现在只学习 JavaScript 4 天，我想制作吃豆人 :D。

现在我的吃豆人（目前它只是一个按钮）应该每 100 毫秒移动 2 个像素，但它在 1 秒内只移动 20 个像素。

在我的脚本中有两个 setInterval() 嵌套。可能就是这个问题

有人可以帮助我吗？提前致谢！

无论如何这是我的代码：

<html lang="de">
    <head>
        <title>Pac Man</title>
        <meta charset="UTF-8">

        <style>
            #pacman {
                margin: 10px;
                top: 0;
                position: absolute;
            }
            td {
                background-color: green;
                height: 50px;
                width: 50px;
            }
            table {
                border-spacing: 0;
                margin: 200px;
            }
            td.wall {
                background-color: darkgreen;
            }
        </style>

        <script>
            walls = document.querySelectorAll(".wall");
            positionX = 10;
            positionY = 10;
            movingX = 0;
            movingY = 0;

            document.addEventListener("keydown", function(event) {
                if (event.keyCode == 87) { // W
                    movingX = 0;
                    movingY = -2;
                }
                if (event.keyCode == 83) { // S
                    movingX = 0;
                    movingY = 2;
                }
                if (event.keyCode == 65) { // A
                    movingX = -2;
                    movingY = 0;
                }
                if (event.keyCode == 68) { // D
                    movingX = 2;
                    movingY = 0;
                }
                if (event.keyCode == 27) { // ESCAPE
                    movingX = 0;
                    movingY = 0;
                }
            });
            
            

        </script>
    </head>
    <body>
        <table>
            <tr>
                <td class="wall">

                </td>
                <td>

                </td>
                <td class="wall">

                </td>
            </tr>
            <tr>
                <td>

                </td>
                <td class="wall">

                </td>
            </tr>
        </table>
        <button id="pacman">Top</button>
    </body>
    <script>
        let walls = document.querySelectorAll(".wall");

        setInterval(function() {
            checkAndMove();
        }, 1000);

        function checkAndMove() {
            if (checkWalls() == 1) {
                for (i = 0; i < 10; i++){
                    setTimeout(function() {
                        move();
                    }, 100);
                }
            }
        }
        function checkWalls() {
            for (i = 0; i < walls.length; i++) {
                rect = walls[i].getBoundingClientRect();
                if ((positionX + (movingX * 30)) > rect.left &&
                    (positionX + (movingX * 30)) < rect.right &&
                    (positionY + (movingY * 30)) > rect.top &&
                    (positionY + (movingY * 30)) < rect.bottom) {

                    return false;
                }
            }
            return 1;
        }
        function move() {
            document.getElementById("pacman").style.marginTop = (positionY += movingY) + "px";
            document.getElementById("pacman").style.marginLeft = (positionX += movingX) + "px";
        }
        
    </script>
</html>```

Answer 1

您在 checkAndMove 中缺少一个 100 * i。

通过添加 100 * i，setTimeout 将设置为 100 毫秒间隔：0 毫秒、100 毫秒、200 毫秒、300 毫秒、400 毫秒、500 毫秒、600 毫秒、700 毫秒、800 毫秒和 900 毫秒。

function checkAndMove() {
  if (checkWalls() == 1) {
    for (i = 0; i < 10; i++) {
      setTimeout(function() {
        move();
      }, 100 * i); // 100 * i added here
    }
  }
}

不过，我建议在 setInterval 之外使用 setTimeout。你可以有一个 setInterval 每 100ms 运行一次，它也运行 move()。有更高级的方法可以做到这一点，但如果您正在试验，我相信现在这已经足够了。

元素移动不流畅

Element isn't moving smoothly

javascript

setinterval

pacman