html5 canvas javascript等待用户输入

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

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版本我用while循环与application.doevents做。这是我的understanidng JavaScript没有相同的，但我希望有一个相当简单的解决方案，将允许我完成相同的。

在此先感谢。

来源

2015-04-28 goryef

如果你不熟悉JavaScript，那么学习它。这个问题不知何故要求人们为你写代码。这不是StackOverflow应该如何工作的。 – Leo

我不是要求代码。我正在寻找指导。 – goryef

问题是您正在使用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>

您可以通过添加图片，并跟踪有多少人的扩展这个例子中选择，类似于我如何跟踪非空玩家的名字。

一旦你舒服的是，更多的高级任务是尝试直接在画布上创造了球员的名字框和倾听他们的焦点和键盘输入，但是这是一个整体的另一个问题...

来源

2015-04-28 01:17:53 Shomz

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

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

就您而言，您的大部分重码将被附加到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()的绘制/更新函数应该使用这些变量来执行强烈的计算。

例如，如果您正在制作角色散步，请让所有走路/下降等等每帧发生一次。只需跟踪按钮是否被按下（或操纵杆倾斜了多少等）

原因很简单：绘图每帧发生一次，但输入事件可能发生多次。您只想每次画到屏幕上画一次屏幕。另外，输入事件可以在的任何时间发生在。您不希望在显示器需要帧之前的十分之一毫秒内发生大的计算。你希望尽可能早在框架内发生。

来源

2015-04-28 01:29:34 ScottMichaud

我认为你在这里过于宽泛，没有关注这个问题。 – Shomz

啊好的。谢谢。 – ScottMichaud

html5 canvas javascript等待用户输入

回答

相关问题