html5画布javascript等待用户输入

我对javascript非常陌生。 我在做一个网络游戏。我试图使用for循环让玩家输入他们的名字，并通过点击选择游戏。我正在努力编写代码，等待用户输入（单击游戏块图像），然后再转到下一个玩家

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

  };
};

函数GetPlayerNames（）{

---

对于（var i=1；i而言，问题在于您使用的是

提示符

，它会停止脚本的执行，然后您需要等待单击，但无法像使用

提示符

那样停止执行

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

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

下面是一个超级简单的示例：

//将输入元素保存在变量中
var inputs=document.getElementsByTagName（'input'）；
//在其上循环以将其附加到一个键控侦听器
对于（变量i=0；i

不是必需的。当输入发生时，浏览器将调用附加到这些事件的JavaScript函数。简单地说，浏览器有自己的主循环，在一组标准化的条件下调用代码

假设有人按下键盘上的某个按钮。按下并释放按钮时，浏览器将触发

keydown

和

keydup

事件。此外，如果使用语句

窗口。requestAnimationFrame（yourFunction）；

，则

yourFunction（）

将在下一帧中尽早调用。如果

yourFunction（）

也调用

window.requestAnimationFrame（yourFunction）；

，则

yourFunction（）

将成为主循环

function yourClickHandler() {
  //Whatever happens when your gamepiece is clicked.
}

/*
 *  This attaches the click event to some element that you use as your gamepiece.
 *  If you're using Canvas, you will attach it to the canvas (instead of #GamePiece
 *  and then need to figure out what is in the pixel that you clicked on in it.
 */

document.getElementById("#GamePiece").addEventListener("click", yourClickHandler, false);

在您的情况下，大多数繁重的代码将附加到

mousedown

、

mouseup

或

单击事件。您不需要主循环

function yourClickHandler() {
  //Whatever happens when your gamepiece is clicked.
}

/*
 *  This attaches the click event to some element that you use as your gamepiece.
 *  If you're using Canvas, you will attach it to the canvas (instead of #GamePiece
 *  and then need to figure out what is in the pixel that you clicked on in it.
 */

document.getElementById("#GamePiece").addEventListener("click", yourClickHandler, false);

你的游戏可以在用户点击之间休眠，除非你需要复杂的动画和CSS转换等无法完成的东西。如果这是一种基于回合的策略，那么你可以让游戏看起来被点击，然后休眠，然后给它一个目的地，然后休眠，然后选择其他东西，然后休眠。等等

如果您确实需要复杂的动画和东西…

然后，最好让
您的ClickHandler（）
尽可能少地执行。只需设置一个变量并返回即可。基于
requestAnimationFrame（）
的绘图/更新函数应该使用这些变量来执行密集的计算

例如，如果你正在进行角色行走，让所有的行走/跌倒等每帧发生一次。只需跟踪按钮是否按下（或操纵杆倾斜多远等）

原因很简单：绘制每帧发生一次，但输入事件可能会发生多次。您希望每次绘制到监视器时只在屏幕上绘制一次。此外，输入事件可以在任何时候发生。您不希望在监视器需要该帧之前的十分之一毫秒发生大型计算。您希望这样做尽可能早地在框架中出现。
如果您不熟悉JavaScript，那么就学习它。这个问题不知何故是要求人们为您编写代码。这不是StackOverflow应该如何工作。我不是在要求代码。我是在寻求指导。我认为您在这里过于宽泛，没有关注这个问题。