JavaScript Hangman Game;間違った推測だけを表示し、ユーザーが勝ったときに警告する

HTML、CSS、JSを使用して基本的なハングマンタイプのゲームを作成しようとしています。私は今まで単語の配列からランダムな単語を作成し、それをすべての推定されない文字に '_'を使って表示し、ユーザーのキーストークスによって正しい推測を記入することに成功しました。
方法： - ユーザーが正しく単語を推測すると警告が表示されます。 - 間違ったユーザーの推測だけを検出して表示します（すべてのキーストロークは現在表示されています）提案は大変ありがとうございます。JavaScript Hangman Game;間違った推測だけを表示し、ユーザーが勝ったときに警告する

- JSのCODE：あなたの勝利のチェックコードの場合

var composers =["bach","mozart","beethoven","debussy","stravinsky"]; 
var randomComposer = composers[Math.floor(Math.random() * 
composers.length)]; 
var guessComposer = []; 

    for (var i=0; i<randomComposer.length; i++){ 
    guessComposer[i] = "-"; 
    } 
    var el = document.getElementById('guessword'); 
     el.innerHTML=guessComposer.join(" "); 


var wrongGuesses = []; 
// var eleme = document.getElementById('wrong'); 
//  eleme.innerHTML=wrongGuesses; 

var guessesLeft = 15; 
var ele = document.getElementById('remaining'); 
     ele.innerHTML=guessesLeft; 

var wins = 0; 
var elem = document.getElementById('numwins'); 
     elem.innerHTML=wins; 

document.onkeyup = function(event) { 

    var userGuess = event.key; 

    // el.innerHTML=guessComposer.join(" "); 


    for(var j=0; j<randomComposer.length; j++){ 

     if(randomComposer[j]===userGuess){ 
      guessComposer[j]=userGuess; 
      } 
    } 

    if (userGuess !== randomComposer[j]){ 
      wrongGuesses.push(userGuess); 
      guessesLeft --; 
      var wg = document.getElementById('wrong'); 
      wg.innerHTML=wrongGuesses; 
     } 


     if(guessComposer == randomComposer){ 
      alert("Congratulations, You Won!"); 
      wins++; 
     } 

     if(guessesLeft===0){ 
      alert("You lost, study more music..."); 
     } 

     var el = document.getElementById('guessword'); 
     el.innerHTML=guessComposer.join(" "); 

     var ele = document.getElementById('remaining'); 
     ele.innerHTML=guessesLeft; 

     console.log(randomComposer.length); 
}

HTMLコード

<!DOCTYPE html> 
<html lang="en-us"> 
<head> 
    <title>Famous Classical Composers Hangman Game</title> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" type="text/css" href="assets/css/reset.css"> 
    <link rel="stylesheet" type="text/css" href="assets/css/style.css"> 
</head> 
<body> 

<div class="header"> 
    <h1>Famous Classical Composers Hangman Game</h1> 
    <h3>Press any key to start</h3> 
</div> 

<div class="wordguess" id="guessword"> 
</div> 

<div class="wrong_guesses"> 
Wrong Guesses: <span id="wrong"> 
</span></div> 

<div class="guesses_left" > Guesses Remaining: <span id="remaining"> 
</span>  
</div> 

<div class="wins">Number of Wins: <span id="numwins"></span> 
</div> 




<script type="text/javascript" src="assets/javascript/game.js"> 
</script> 
</body> 
</html>

出典

2017-07-09 AustinTJohnson

彼らはあなたが行うことができない文字列やint型であるかのように使用すると、配列を比較します：

if(guessComposer == randomComposer){

代わりに、あなたも、あなたのテストは比較的単純で、それが何だったかに近い保ちれ、すべての配列要素のための条件をテストevery機能を使用することができます。

if (guessComposer.every((v,i)=>v === randomComposer[i])) {

にこのテストをguessComposer配列試合ですべてのv value場合randomComposer配列内の特定の位置にある対応する項目。

間違った推測を表示するには、アラート内の文字列として配列を表示するだけです。そのために、あなたはjoin機能を使用することができます。

if (guessesLeft === 0) { 
    alert("You lost, study more music...\nWrong guesses:" + wrongGuesses.join(' ')); 
}

joinがパラメータとして使用すると、私はスペース' 'に設定された文字列内のすべての要素の間で持つようにしたい文字を取ります。

つまり、次のように読むことができます。すべての要素を取り出して文字列に入れ、スペースで区切ります。手紙は推測している場合も

チェックも同様に修正されていません間違っていた：

userGuessは、現在選択されている作曲家の最後の文字に一致するかどうかを確認する

if (userGuess !== randomComposer[j]){

。代わりに、既存の文字のいずれかをindexOfと一致させたいとします。

if (randomComposer.indexOf(userGuess) == -1) {

出典

2017-07-10 02:11:14 Isac

はい私は考えを得ていませんでした。編集しましょう – Isac

....ありがとう！それは勝利のアラートの問題を解決した....私は間違った推測の問題について私の問題を誤解しているかもしれない.....私はJSのすべての間違ったキーストロークを印刷するhtmlのdivがある言葉で）〜に。今はすべてのキーストロークを間違って印刷しています。このコードスニペットは私の試みでした： 'if（userGuess！== randomComposer [j]）{ wrongGuesses.push（userGuess）; guessesLeft - ; var wg = document.getElementById（ 'wrong'）; wg。innerHTML = wrongGuesses; } ' – AustinTJohnson

@AustinTJohnson私はそれを熟考するように編集しました。 – Isac

JavaScript Hangman Game;間違った推測だけを表示し、ユーザーが勝ったときに警告する

答えて

関連する問題