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等待用戶輸入

回答

相關問題