2016-10-09 4 views
1

私は現在ハングマンのゲームをjavascriptで作成していますが、以前に選択した単語を新しい単語に置き換えて置き換えません。現在、私は自分のコードを設定して、プレイヤーが単語を正しく推測すると、メッセージがポップアップし、ユーザーに再度プレイしたいかどうかを尋ねるように設定しています。彼らがYを押すと、単語と配列をランダムに選択する関数を呼び出し、プッシュメソッドを使用して選択した単語の長さが同じ空白行を空の配列にします。しかし、Yを押した後にこの関数を呼び出すと、前の単語は消えず、キー押下も登録されません。前の選択された単語をhtmlで消して、新しい単語で置き換えてください。JavaScriptのHangmanのゲームで

var hangmanObject = { 
    randomWords: ['rock','paper','modular synthesizer', 'led zeppelin'], 
    chosenWord: "", 
    numWins: 0, 
    numLives: 10, 

    empty: [], 
    incorrect: [], 
    splitArray: [] 

    } 
    function startFunction() 
    { 
    document.getElementById("numLives").innerHTML = hangmanObject.numLives; 
    displayChosenWord(); 
    } 

    function displayChosenWord() 
    { 
    hangmanObject.chosenWord = hangmanObject.randomWords[Math.floor(Math.random()*hangmanObject.randomWords.length)] 
    hangmanObject.splitArray = hangmanObject.chosenWord.split(""); 
    for (x = 0; x < hangmanObject.chosenWord.length; x++) 
    { 
    if (hangmanObject.chosenWord.charAt(x) === " ") 
     hangmanObject.empty.push(" "); 
    else 
     hangmanObject.empty.push(" _ "); 
    } 

     document.getElementById("blanks").innerHTML = hangmanObject.empty.join(""); 
    } 



    document.onkeyup = function(event) 
    {  

    var userGuess = String.fromCharCode(event.keyCode).toLowerCase(); 


    for (x = 0; x < hangmanObject.chosenWord.length; x++) 
     { 
      if (hangmanObject.chosenWord.charAt(x) === userGuess) 
      { 
       hangmanObject.empty[x] = userGuess; 
       document.getElementById("blanks").innerHTML = hangmanObject.empty.join(""); 
      } 

     } 
     if (hangmanObject.splitArray.indexOf(userGuess) === -1) //checking to see if wrong letter chosen 
     { 
       hangmanObject.numLives--; 
       document.getElementById("numLives").innerHTML = hangmanObject.numLives; 
       hangmanObject.incorrect.push(userGuess); 
       document.getElementById("LettersGuessed").innerHTML = hangmanObject.incorrect; 
     } 
     console.log(hangmanObject.empty); 
     if (hangmanObject.empty.indexOf(" _ ") === -1) 
     { 
      hangmanObject.numWins++; 

      // console.log("i won"); 
      document.getElementById("wins").innerHTML = hangmanObject.numWins; 
      document.getElementById("Play").innerHTML = "Play Again? Y/N"; 
      document.onkeyup = function(event) 
      {  
       // Determines which exact key was selected. Make it lowercase 
       var Choice = String.fromCharCode(event.keyCode).toLowerCase(); 
       if (Choice === 'y') 
       { 
        hangmanObject.numLives = 10; 
        displayChosenWord(); 
       } 
      } 

     } 
     if (hangmanObject.numLives <= 0) 
     { 
      document.getElementById("lose").innerHTML = "You Lose"; 
     } 
     } 

答えて

1

あなたは手紙の推測のためにそれを無効に効果的に、コールバック内document.onkeyupコールバックを設定しています。

また、empty配列は空になることはありませんので、次の単語が前の単語の空の文字配列に追加されます。より簡単な方法は、gameStateフラグを使用して、ユーザーが推測する文字を入力するのか、もう一度再生するのかを決めることができます。また、状態のための単一のdivが使用することができます;)

var hangmanObject = { 
 
    gameState: 'playing', 
 
    randomWords: [ 
 
    'rock', 
 
    'paper', 
 
    'modular synthesizer', 
 
    'led zeppelin' 
 
    ], 
 
    chosenWord: "", 
 
    numWins: 0, 
 
    numLives: 10, 
 

 
    empty: [], 
 
    incorrect: [], 
 
    splitArray: [] 
 
} 
 

 
function startFunction() { 
 
    document.getElementById("numLives").innerHTML = hangmanObject.numLives; 
 

 
    chooseNewWord(); 
 
} 
 

 
function chooseNewWord() { 
 
    hangmanObject.chosenWord = hangmanObject.randomWords[Math.floor(Math.random() * hangmanObject.randomWords.length)] 
 
    hangmanObject.splitArray = hangmanObject.chosenWord.split(""); 
 

 
    // Reset guesses and misses 
 
    hangmanObject.empty = []; 
 
    hangmanObject.incorrect = []; 
 

 
    for (x = 0; x < hangmanObject.chosenWord.length; x++) { 
 
    if (hangmanObject.chosenWord.charAt(x) === " ") 
 
     hangmanObject.empty.push(" "); 
 
    else 
 
     hangmanObject.empty.push("_"); 
 
    } 
 

 
    document.getElementById("blanks").innerHTML = hangmanObject.empty.join(" "); 
 
} 
 

 

 
document.onkeyup = function(event) { 
 
    var userGuess = String.fromCharCode(event.keyCode).toLowerCase(); 
 

 
    // Game status is "playing" 
 
    if (hangmanObject.gameState === 'playing') { 
 
    for (x = 0; x < hangmanObject.chosenWord.length; x++) { 
 
     if (hangmanObject.chosenWord.charAt(x) === userGuess) { 
 
     hangmanObject.empty[x] = userGuess; 
 

 
     document.getElementById("blanks").innerHTML = hangmanObject.empty.join(" "); 
 
     } 
 
    } 
 

 
    // checking to see if wrong letter chosen 
 
    if (hangmanObject.splitArray.indexOf(userGuess) === -1) { 
 
     hangmanObject.numLives--; 
 

 
     document.getElementById("numLives").innerHTML = hangmanObject.numLives; 
 

 
     hangmanObject.incorrect.push(userGuess); 
 

 
     document.getElementById("LettersGuessed").innerHTML = hangmanObject.incorrect.join(","); 
 
    } 
 

 
    // Some debug 
 
    console.log(hangmanObject.empty); 
 

 
    // WIN situation 
 
    if (hangmanObject.empty.indexOf("_") === -1) { 
 
     hangmanObject.numWins++; 
 

 
     // Set status message and game state 
 
     document.getElementById("status").innerHTML = "You won " + hangmanObject.numWins + " times"; 
 
     hangmanObject.gameState = 'finished'; 
 
    } 
 

 
    // LOSE situation 
 
    if (hangmanObject.numLives <= 0) { 
 
     // Set status message and game state 
 
     document.getElementById("status").innerHTML = "You Lose"; 
 
     hangmanObject.gameState = 'finished'; 
 
    } 
 

 
    // Set message if game finished 
 
    if (hangmanObject.gameState === 'finished') { 
 
     document.getElementById("Play").innerHTML = "Play Again? Y/N"; 
 
    } 
 

 
    // Game status is "finished" 
 
    } else { 
 
    // If user selects play again 
 
    if (userGuess === 'y') { 
 
     // Set status back to "playing" 
 
     hangmanObject.gameState = 'playing'; 
 

 
     // Reset lives and messages 
 
     hangmanObject.numLives = 10; 
 

 
     document.getElementById("status").innerHTML = ""; 
 
     document.getElementById("LettersGuessed").innerHTML = ""; 
 
     document.getElementById("Play").innerHTML = ""; 
 

 
     // Choose new word 
 
     chooseNewWord(); 
 
    } else { 
 
     // Set message 
 
     document.getElementById("status").innerHTML = "Goodbye!"; 
 

 
     // Disable key handler 
 
     document.onkeyup = null; 
 
    } 
 
    } 
 
} 
 

 
startFunction();
<div id="numLives"></div> 
 

 
<div id="blanks"></div> 
 

 
<div id="LettersGuessed"></div> 
 

 
<div id="status"></div> 
 

 
<div id="Play"></div>

+0

ああそうです。だから私の主な問題は、私は空の配列をリセットしていなかったことと、空の配列に間違った配列が再びありませんでした。私はこれを試していただきありがとうございます。 – henhen

+0

どうすればif文がすぐ上のif文内にネストされているか(if(userGuess == 'y')if文があるのですか?if(hangmanObject.gameState === 'finished'){ document。 getElementById( "Play")innerHTML = "Play Again?Y/N"; } //そのif文の中にif(userGuess == 'y')をネストしようとしましたが、gameStateを "playing"に設定しましたが、プログラムは次の単語に対して押されたキーを登録しません。 。それはなぜそれをするのですか? – henhen

+0

'onkeyup'コールバックの実行ごとに一度だけ' userGuess'値を評価することができます。つまり、キーアップイベントが発生するたびに、if-elseツリー全体が評価されます。 詳細を見ると、 'gameState === 'playing''ブランチの中で' gameState ===' finished''が 'true'と評価される唯一の方法は、**最後に押されたキーが終了したために**変更されました。そのため、「Play again(Y/N)」メッセージが設定され、「finished」ブランチの次のkeyupイベントまで「y」または「n」キーが評価されません。それが明確になることを願っています。 –

0

words joined - 配列を消去する必要があります。

キーアップなし - 'y/n'キーアップに置き換えた場合は、リセットする必要があります。

また、間違った文字をクリアして新しいゲームでも生きる価値がある。

は、以下の実施例を参照してください -

var hangmanObject = { 
 
    randomWords: ['rock', 'paper', 'modular synthesizer', 'led zeppelin'], 
 
    chosenWord: "", 
 
    numWins: 0, 
 
    numLives: 10, 
 

 
    empty: [], 
 
    incorrect: [], 
 
    splitArray: [] 
 

 
} 
 

 
function startFunction() { 
 
    document.getElementById("numLives").innerHTML = hangmanObject.numLives; 
 
    displayChosenWord(); 
 
} 
 

 
function displayChosenWord() { 
 
    hangmanObject.empty = []; // empty the array 
 
    hangmanObject.incorrect = []; 
 
    hangmanObject.chosenWord = hangmanObject.randomWords[Math.floor(Math.random() * hangmanObject.randomWords.length)] 
 
    hangmanObject.splitArray = hangmanObject.chosenWord.split(""); 
 
    for (x = 0; x < hangmanObject.chosenWord.length; x++) { 
 
    if (hangmanObject.chosenWord.charAt(x) === " ") 
 
     hangmanObject.empty.push(" "); 
 
    else 
 
     hangmanObject.empty.push(" _ "); 
 
    } 
 

 
    document.getElementById("blanks").innerHTML = hangmanObject.empty.join(""); 
 
    document.getElementById("LettersGuessed").innerHTML = ''; 
 
    document.getElementById("numLives").innerHTML = hangmanObject.numLives; 
 
    document.onkeyup = gameKeyUp; 
 
} 
 

 

 

 
function gameKeyUp(event) { 
 

 
    var userGuess = String.fromCharCode(event.keyCode).toLowerCase(); 
 

 

 
    for (x = 0; x < hangmanObject.chosenWord.length; x++) { 
 
    if (hangmanObject.chosenWord.charAt(x) === userGuess) { 
 
     hangmanObject.empty[x] = userGuess; 
 
     document.getElementById("blanks").innerHTML = hangmanObject.empty.join(""); 
 
    } 
 

 
    } 
 
    if (hangmanObject.splitArray.indexOf(userGuess) === -1) //checking to see if wrong letter chosen 
 
    { 
 
    hangmanObject.numLives--; 
 
    document.getElementById("numLives").innerHTML = hangmanObject.numLives; 
 
    hangmanObject.incorrect.push(userGuess); 
 
    document.getElementById("LettersGuessed").innerHTML = hangmanObject.incorrect; 
 
    } 
 
    console.log(hangmanObject.empty); 
 
    if (hangmanObject.empty.indexOf(" _ ") === -1) { 
 
    hangmanObject.numWins++; 
 

 
    // console.log("i won"); 
 
    document.getElementById("wins").innerHTML = hangmanObject.numWins; 
 
    document.getElementById("Play").innerHTML = "Play Again? Y/N"; 
 
    document.onkeyup = function(event) { 
 
    // Determines which exact key was selected. Make it lowercase 
 
     var Choice = String.fromCharCode(event.keyCode).toLowerCase(); 
 
     if (Choice === 'y') { 
 
     hangmanObject.numLives = 10; 
 
     displayChosenWord(); 
 
     } 
 
    } 
 

 
    } 
 
    if (hangmanObject.numLives <= 0) { 
 
    document.getElementById("lose").innerHTML = "You Lose"; 
 
    } 
 
} 
 

 
displayChosenWord(); 
 
document.onkeyup = gameKeyUp;
<div id="numLives"></div> 
 
<div id="blanks"></div> 
 
<div id="LettersGuessed"></div> 
 
<div id="wins"></div> 
 
<div id="Play"></div> 
 
<div id="lose"></div>

+0

ねえ、アドバイスに感謝。私が理解していない2つのことは、この部分です:document.onkeyup = gameKeyUp;そのコード行で関数gamekeyup(event)を呼び出していますか?そしてなぜあなたは:displayChosenWord();を持っていますか? document.onkeyup = gameKeyUp;ページの下部にあります。あなたはすでにそれらの機能の中でそれらを呼んでいますか? – henhen

+0

であり、そのイベント引数はgameKeyUp(event) – henhen

+0

で何をするのですか? 'event'引数にはEventオブジェクトへの参照があります(https://developer.mozilla.org/en-US/docs/Web/API/Event)キーを押す(この場合は解放する)ときにユーザーによって作成されます。実際にこのオブジェクトはKeyboardEvent(https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent)になります。オブジェクトの 'onkeyup'プロパティにコールバック関数を割り当てると、この関数は常に最初の引数としてこのイベントを受け取り、イベントが発生したときに呼び出されます。そのため、 'gameKeyUp'関数がパラメータを定義しているので、キーを押した後にキーコードを取得するために使用できます。 –

関連する問題