html5 canvas javascript等待用户输入

Question

我对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

  };
};

在vb.net版本中，我使用application.doevents进行了while循环。 这是我的基本javascript没有等效功能，但我希望有一个相当简单的解决方案，使我能够完成同样的工作。

提前致谢。

Answer 1

问题是您使用的是prompt ，它会停止脚本的执行，然后您需要等待单击，但是没有办法像prompt那样停止执行。

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

不会为您提供任何代码，学习您将如何做，这应该足以让您入门。 因此，请勿将提示与点击侦听器结合使用，而应创建一个输入字段。

这是一个超级简单的示例：

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

您可以通过添加图像并跟踪选择多少个图像来扩展此示例，这与我跟踪非空播放器名称的方法类似。

一旦您对此感到满意，将需要尝试一些更高级的任务，即尝试直接在画布上为玩家名称创建框并在其上侦听焦点和键盘输入，但这是另一个问题……

Answer 2

不需要。 当发生输入时，浏览器将调用您附加到这些事件的JavaScript函数。 简而言之，浏览器有其自己的主循环，该循环在一组标准条件下调用您的代码。

假设有人按下键盘上的某物。 当按下并释放按钮时，浏览器将触发keydown和keyup事件。 另外，如果使用语句window.requestAnimationFrame(yourFunction); ，那么yourFunction()将在下一帧中尽早调用。 如果yourFunction()也调用window.requestAnimationFrame(yourFunction); ，则yourFunction()将成为您的主循环。

在您的情况下，大多数mousedown代码将附加到mousedown ， mouseup或click事件上。 您不需要主循环。

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过渡等无法完成的工作，否则您的游戏只能在用户单击之间进入睡眠状态。 例如，如果这是一种基于回合的策略，那么您只需让棋子看起来像是被点击，然后入睡，然后为其指定目的地，然后入睡，然后选择其他内容，然后入睡即可。 等等。

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

然后最好让yourClickHandler()做得尽可能少 。 除了设置变量然后返回，请尝试执行其他操作。 您基于requestAnimationFrame()的绘制/更新函数应该使用这些变量来执行密集的计算。

例如，如果您要行走角色，则每帧使所有行走/跌落等发生一次。 只需跟踪是否按下按钮（或操纵杆倾斜多远等）即可。

原因很简单：每帧绘制一次，但是输入事件可能发生多次。 您只想在屏幕上绘制一次，每次绘制一次。 此外，输入事件可以发生在任何时间 。 您不希望在监视器需要该帧之前进行十分之一毫秒的大计算。 您希望这种情况尽早在框架中发生。