如何在JS中製作Hang子手遊戲

-1

我想在JS中製作hang子手遊戲。我有以下功能工作。計算機顯示我的數組中的隨機單詞。我打印按下屏幕上的按鍵，並在用戶鬆動之前給用戶10個按鍵。我遇到的問題是讓數組顯示在var possibleWord部分，因此它顯示爲空格或破折號。提前謝謝你的幫助。如何在JS中製作Hang子手遊戲

//Computer picks random word to guess 
 
function getItem() { 
 
    //Possible words to guess 
 
    var words = ['jason', 'kaitlyn', 'lora', 'matthew']; 
 
    document.getElementById("wordGuess").innerHTML = words[Math.floor(Math.random() * words.length)]; 
 

 
    //Displays possible words blank spaces 
 
    var possibleWord = "J A S O N"; 
 
    var blankSpaces = ""; 
 
    var wordLength = possibleWord.length; 
 

 
    for (i = 0; i < wordLength; i++) { 
 
    var x = possibleWord.charAt(i); 
 

 
    if (x === " " || x === "/'") { 
 
     blankSpaces += x; 
 
    } else { 
 
     blankSpaces += "_"; 
 
    } 
 
    } 
 
    document.getElementById("blankSpaces").innerHTML = blankSpaces; 
 
} 
 

 
//This code captures the keypress and prints it out on the screen 
 
var guessesLeft = 9; 
 

 
document.onkeypress = function(keyPressed) { 
 
    var keyPressed = keyPressed || window.event, 
 
    charCode = keyPressed.keyCode || keyPressed.which, 
 
    lettersGuessed = String.fromCharCode(charCode); 
 

 
    // var userGuess = prompt("What word do you guess?"); 
 
    // var userGuess = words.split(''); 
 
    // var userGuess 
 
    // if (words.indexOf(userGuess) > -1) { 
 
    // \t alert("Your guess is correct.") 
 
    // }else { 
 
    // \t alert("Your guess is wrong.") 
 
    // } 
 

 
    document.getElementById("lettersGuessed").innerHTML += lettersGuessed; 
 
    document.getElementById("guessesLeft").innerHTML = guessesLeft; 
 

 
    guessesLeft--; 
 

 
    if (guessesLeft === -1) { 
 
    alert("You Loose!"); 
 
    } 
 
}

<body onload="getItem()"> 
 
    <div class="wrapper"> 
 
    <div class="container"> 
 
     Press any key to get started! 
 
     <br> 
 
     <br>Wins: # of times user guessed the word correctly 
 
     <br> 
 
     <br>Display random word from Array: <strong><u><span id="wordGuess"></span></u></strong> 
 
     <br> 
 
     <br>as the user guesses the correct letter, make the word display like this: <span id="blankSpaces"></span> 
 
     <br> 
 
     <br>Number of Guesses Remaining: <span id="guessesLeft">10</span> 
 
     <br> 
 
     <br>Letters Already Guessed: <span id="lettersGuessed"></span> 
 
     <br> 
 
     <br> 
 
    </div> 
 
    </div> 
 
</body>

來源

2016-02-17 Jason Martocci

它是什麼目前正在做什麼，你期望它做什麼？ – Harangue

它目前顯示我在possibleWord變量空間中放置的任何單詞的空格。我希望能用我創建的數組生成的隨機詞填充。 –

的是許多方法可以做到這一個。

- 首先，您測量隨機詞的length。

- 然後創建表示玩家的進步陣列，含有length數短劃線或空格的，像這樣：

var progressWord = [] 
for (var i = 0; i < wordLength; i ++) 
    progressWord.push('-');

-On輸入，檢查是否密鑰串（來自鍵碼轉換之後）可以在chosenWord內部發現，使用indexOf()。如果它存在，則替換髮生的事件：

if (chosenWord.indexOf(keyString) != -1){ // if the character is found 
    for (var i = 0; i < wordLength; i ++){ // loop on all characters 
    if (chosenWord[i] == keyString) // if this is an occurance 
     progressWord[i] = chosenWord[i]; 
    } 
}else{ 
    // wrong choice 
}

- 檢查玩家是贏了還是輸了。

if (progressWord.indexOf('-') == -1){ // if there are no dashes left 
    //win! 
}else if (guessesLeft <= 0){ 
    //player has lost 
}

- 使用'join（）`方法加入progressArray並將其顯示在屏幕上。

progressWord.join(" "); // will form a string from the array, with a space as as delimeter

您可以隨時在您的瀏覽器控制檯上進行測試。祝你好運！

來源

2016-02-17 16:05:39

如果不進入良好的JavaScript（特別是污染全局名稱空間）並回答您的直接問題，請查看此JS fiddle以基於數組中的單詞顯示下劃線。

var possibleWord = words[Math.floor(Math.random() * words.length)]; 
document.getElementById("wordGuess").innerHTML = possibleWord; 
//Space out possibleWord 
var originalLength = possibleWord.length; 
for (i = 0; i < originalLength; i++) { 
    possibleWord = [possibleWord.slice(0, i*2+1), ' ', possibleWord.slice(i*2+1)].join(''); 
}

作爲最低要求，我這個包裹在IIFE

來源

2016-02-17 16:47:29 Shmee007

如何在JS中製作Hang子手遊戲

回答

相關問題