我有一个小型游戏，其中回合玩家必须达到回合退出 While循环内的Switch不执行香草

如何解决我有一个小型游戏，其中回合玩家必须达到回合退出 While循环内的Switch不执行香草

我有一个小型游戏，其中 PLAYER 回合必须进入 EXIT 回合。我在While循环中有一个Switch，用于通过 PROMPT 读取路线。如果删除While循环，则开关将按预期执行，只有我必须手动重新启动它。在While循环中，它坏了！

这是带有 VanillaJs 脚本的 HTML 。问题是，当While循环到位时Switch不会移动播放器，但是console.log会读取正确的结果。

CodePen： https://codepen.io/cornel777/pen/vYGxgEB

    <!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');
                    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>

解决方法

之所以发生这种情况，是因为JavaScript实际上是如何工作的。 JavaScript是单线程的，这意味着它只有一个调用堆栈。您的while循环阻止了此调用堆栈，从不让浏览器使用红球的更新值“重新绘制” dom。

但是，在窗口对象上有一个方法可以通知浏览器您希望执行动画。是window.requestAnimationFrame()

现在，我们需要稍微重组一下代码。

让我们创建将您的游戏逻辑从播放功能提取到gameLoop功能

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

  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');
      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!!!");
    return; // gets out of a loop
  }
  window.requestAnimationFrame(gameLoop);
}

仔细看一下函数的结尾。在这里，我使用window.requestAnimationFrame调用gameLoop函数，从而在此处进行实际循环。并且当满足赢得游戏的条件时，if语句内部的返回将停止循环。

if (posT === posT1 && posL === posL1) {
  alert("YOU WIN!!!");
  return; // gets out of a loop
}
window.requestAnimationFrame(gameLoop);

最后一件事是播放功能，现在它只是以window.requestAnimationFrame(gameLoop)

开始循环

    function play() {
      confirm('ready?');
      window.requestAnimationFrame(gameLoop);
    }

这是整个代码：

<!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?');
      window.requestAnimationFrame(gameLoop);
    }

    function gameLoop() {
      var posT = player.offsetTop;
      var posL = player.offsetLeft;
      var posT1 = exit2.offsetTop;
      var posL1 = exit2.offsetLeft;
      var x = player.offsetParent;
      
      var direction = prompt("Enter direction:\n left,down");
      switch (direction) {
        case 'left':
          player.style.left = (posL - 50) + 'px';
          console.log(player.style.left = (posL - 50) + 'px');
          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!!!");
        return; // gets out of a loop
      }
      window.requestAnimationFrame(gameLoop);
    }
  </script>

</body>

</html>

我有一个小型游戏，其中回合玩家必须达到回合退出 While循环内的Switch不执行香草

如何解决我有一个小型游戏，其中回合玩家必须达到回合退出 While循环内的Switch不执行香草

解决方法

相关推荐