javascript - html5 canvas javascript等待用户输入

Question

我对 JavaScript 很陌生。我正在开发一款网页游戏。我正在尝试使用 for 循环让玩家输入他们的名字并通过单击选择游戏片段。我正在努力编写代码来等待用户输入(单击游戏 block 图像)，然后再继续下一个玩家。

function GetPlayerNames(){
  for (var i=1; i<=NumberPlayers; i++) {

    ctxPlayers.fillStyle =  "blue";
    ctxPlayers.textAlign = "center";
    var PlayerName = prompt("Name");
    ctxPlayers.fillText (PlayerName + " Select Game Piece", cnvPlayers.width/2,cnvPlayers.height* (1/6));

    // here i want to wait for a player to click on a game piece image

  };
};

在 vb.net 版本中，我使用 do while 循环和 application.doevents。据我所知，JavaScript 没有等效的解决方案，但我希望有一个相当简单的解决方案，让我能够完成同样的任务。

提前致谢。

Answer 1

问题是您正在使用prompt，它会停止脚本的执行，然后您需要等待点击，但没有办法像您一样停止执行可以通过提示。

更好的方法是每次更改名称或单击图像时检查所有玩家名称和图像的值。

不会给你任何代码，了解你会如何做，它应该足以让你开始。因此，请不要将提示与点击监听器结合使用，而是创建一个输入字段。

这是一个 super 简单的例子:

// keeping our input elements in a variable
var inputs = document.getElementsByTagName('input');

// loop over them to attach them a keyup listener
for(var i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener('keyup', checkNames);
}

// this function is called on each keyup event (and once in the beginning)
function checkNames() {
  var playersReady = 0;
  for(var i = 0; i < inputs.length; i++) {
    if (inputs[i].value != "") {
      playersReady++; // increment the value if the input is not empty
    }
  }

  // output the message
  document.getElementById('status').textContent = "Waiting for " +
    (inputs.length - playersReady) + " more player" + 
    (inputs.length - playersReady == 1 ? "" : "s") + // this line is just for pluralizing
    "..." + 
    (inputs.length - playersReady == 0 ? "The game can start now!" : "");
}

// initial call, just so we get the first status message
// without needing a keyup event first
checkNames();

<input type="text" placeholder="Player1 name" />
<input type="text" placeholder="Player2 name" />
<input type="text" placeholder="Player3 name" />
<p id="status"></p>

您可以通过添加图像来扩展此示例，并跟踪选择了多少图像，类似于我跟踪非空玩家名称的方式。

一旦您对此感到满意，更高级的任务就是尝试直接在 Canvas 上为玩家名称创建框并监听它们的焦点和键盘输入，但这完全是另一个问题......