使用 requestFrameAnimation 制作的小游戏（请参阅代码笔）的循环以一个用户输入的命令延迟执行

Question

https://codepen.io/cornel777/pen/GRZWEMq

嗨，谁能告诉我为什么这段代码运行有延迟？

更具体地说，在第一个PROMPT输入方向后，红圈没有移动（即使控制台日志写正确的值 - 播放器元素的 subtracted/added top/left）。

第一个用户输入的方向值（例如左）在提示并提交下一个之后执行。

所以玩家总是会在一个用户输入的命令延迟后移动。

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Escape</title>
  <link rel="stylesheet" type="text/css" href="RPG.css">
</head>
<body>

<h1  id="title">Escape!!!</h1>

  <div class="board">
    <div id="player"></div>
    <div id="exitRound"></div>
    <div id="exitTriang"></div>
    <div id="exitSquare"></div>
  </div>


<button onclick="play()" class="restart">START</button>

<script>
    // var board = document.getElementById("board");
    var player = document.getElementById("player");
    // var exit1 = document.getElementById("exitTriang");
    var exit2 = document.getElementById("exitRound");
    // var exit3 = document.getElementById("exitSquare");
// play();
    function play() {

        confirm('ready?');

        var posT = player.offsetTop;
        var posL = player.offsetLeft;
        var posT1 = exit2.offsetTop;
        var posL1 = exit2.offsetLeft;
        var x = player.offsetParent;


        console.log(posT, posL, posT1, posL1);
        console.log("offsetParent is " + x + "because it has position css property, otherwise it is body");



        while (posT !== posT1 && posL !== posL1) {
            console.log(posT !== posT1 && posL !== posL1);
            var direction = prompt("Enter direction:\n left, right, up, down");


            switch (direction) {
                case 'left':
                    player.style.left = (posL - 50) + 'px';
                    console.log(player.style.left = (posL - 50) + 'px');
                    posL = posL - 50;
                    break;
                case 'right':
                    player.style.left = (posL + 50) + 'px';
                    break;
                case 'up':
                    player.style.top = (posT - 50) + 'px';
                    break;
                case 'down':
                    player.style.top = (posT + 50) + 'px';
                    break;
                default:
                    alert("you need to move!");
                    break;
            }
        }

        if (posT === posT1 && posL === posL1) {
            alert("YOU WIN!!!");
        }
    }



</script>

</body>
</html>

Answer 1

我猜线程被阻塞了，css 没有立即完成执行。

建议的解决方案如下：

https://codepen.io/abozanona/pen/oNxZeLY

    // var board = document.getElementById("board");
    var player = document.getElementById("player");
    // var exit1 = document.getElementById("exitTriang");
    var exit2 = document.getElementById("exitRound");
    // var exit3 = document.getElementById("exitSquare");
    // play();


    function gameLoop() {
        var posT = player.offsetTop;
        var posL = player.offsetLeft;
        var posT1 = exit2.offsetTop;
        var posL1 = exit2.offsetLeft;

        var direction = prompt("Enter direction:\n left, right, up, down");
        switch (direction) {
            case 'left':
                player.style.left = (posL - 50) + 'px';
                console.log(player.style.left = (posL - 50) + 'px');
                setTimeout(gameLoop, 500);
                break;
            case 'right':
                player.style.left = (posL + 50) + 'px';
                setTimeout(gameLoop, 500);
                break;
            case 'up':
                player.style.top = (posT - 50) + 'px';
                setTimeout(gameLoop, 500);
                break;
            case 'down':
                player.style.top = (posT + 50) + 'px';
                setTimeout(gameLoop, 500);
                break;
            default:
                alert("you need to move!");
                setTimeout(gameLoop, 500);
                break;
        }
        if (posT === posT1 && posL === posL1) {
            alert("YOU WIN!!!");
            return; // gets out of a loop
        }
    }

我现在正在使用 setTimeout(gameLoop, 500); 给主线程 500 毫秒的时间来应用 css 对 DOM 的更改，然后再阻塞线程。

使用 requestFrameAnimation 制作的小游戏（请参阅代码笔）的循环以一个用户输入的命令延迟执行

A loop form a small game (see codepen) made with requestFrameAnimation executes with one user-inputted command delay

javascript

prompt

delay

switch-statement