使用requestFrameAnimation制作的小型游戏请参见代码笔的循环执行，需要一个用户输入的命令延迟

编程问答 2022-08-14

问题描述

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

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

更具体地说，在第一个 PROMPT 输入方向之后，红色圆圈不会移动（即使控制台日志写入了正确的值-减去/加上的数字播放器元素的顶部/左侧）。

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

因此，播放器将始终以一个用户输入的命令延迟进行移动。

    <!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>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

delayjavascriptpromptswitch-statement