2016-10-14 14 views
1

私はJSのここにnoobです。私は簡単な色を推測するゲームを作って宿題をしています。これまでのところ、すべての基準が実行される限り動作します。迅速なバックグラウンドの変更が迅速な回答

私の唯一の問題は、ユーザーが入力するとすぐに背景が変わるようにする方法がわかりません(プロンプトで[OK]をクリックした直後)。下のコードでは、Congratsの警告で[OK]をクリックした後でしか背景が変わりません。私の教授が講義で示したことは、正しいことを推測した後、色!

また、賛否両論があれば、自分のコードを磨くことについて私に示唆を与えることができます。ヘビー..

PS:私はjsロジックがページで分かれているべきだと私の専門家は、私たちがこの練習をスクリプトで行うことを主張しました列をなして!

ありがとうございました!

<body onload="doGame()"> 
 
    <script> 
 
     var myBody = document.getElementsByTagName("body")[0]; 
 
     var target; 
 
     var answer; 
 
     var guessInputText; 
 
     var guessInput; 
 
     var finished = false; 
 
     var guessAmount = 0; 
 
     var colors = ['Salmon', 'Tomato', 'Moccasin', 'Peru', 'Olive', 'Teal', 'Navy', 'Thistle', 'Beige', 'Gray']; 
 
     var colorsSorted = colors.sort(); 
 
     var colorsSortedString = colors.join(', '); 
 

 
     function doGame() { 
 
      var randomColorNum = Math.random() * 10; 
 
      var randomColorNumInt = Math.floor(randomColorNum); 
 
      target = colors[randomColorNumInt + 1]; 
 
      answer = target.charAt(0).toLowerCase() + target.slice(1).toLowerCase(); //makes sure answer is in lowercase 
 
      alert("The answer is " + target + " or " + answer); //for debugging 
 

 
      while(!finished) { 
 
       guessInputText = prompt('I am thinking of one of these colors:\n\n' + 
 
             colorsSortedString + '\n\n' + 
 
             'What color am I thinking of?'); 
 
       guessInput = guessInputText.charAt(0).toLowerCase() + guessInputText.slice(1).toLowerCase(); //converts whatever input into lowercase 
 
       guessAmount += 1; 
 
       finished = checkGuess(); //checks to see if user input is correct 
 
      } 
 
     } 
 

 
     function checkGuess() { 
 
      if ((colors.indexOf(guessInputText.charAt(0).toUpperCase() + guessInputText.slice(1).toLowerCase()) > -1) == false) { 
 
       alert("Sorry, I don't recognize your color.\n\n" + 
 
         "Please try again!"); 
 
       return false; 
 
      } 
 
      if (guessInput > answer) { 
 
       alert("Sorry, Your guess is incorrect!\n\n" + 
 
         "Hint: Your color is alphabetically higher than mine.\n\n" + 
 
         "Please try again!"); 
 
       return false; 
 
      } 
 
      if (guessInput < answer) { 
 
       alert("Sorry, Your guess is incorrect!\n\n" + 
 
         "Hint: Your color is alphabetically lower than mine.\n\n" + 
 
         "Please try again!"); 
 
       return false; 
 
      } 
 
       myBody.style.background = answer; 
 
       alert("Congratulations! You have guessed the color!\n\n" + 
 
         "It took you " + guessAmount + " guesses to finish the game!\n\n" + 
 
         "You can see the color in the background."); 
 
       return true; 
 
    } 
 
    </script> 
 
</body>

答えて

0

あなたはおめでとうプリントで[OK]の前に背景を変更したい場合は、ちょうどこのラインに

myBody.style.background = answer; 

しかし...スニペットのテストを移動する必要があり、私は推測の色のプロンプトで[OK]を押す直後に背景が変化します。

あなたは何を正確にしたいですか?あなたは一歩一歩の例を教えてくれますか?

+0

ありがとうございます!面白いことに、私はChromeを使用しています。この正確なファイルを開いたときに、[OK]をクリックするまで、bgは変化しません。私は正しい答えを入力するとbgがCongrats Alertの取得と同じ時間 – jossr

+0

setTimeOutを追加すると、Congratsアラートの関連付けに役立ち、Congratsアラートが表示される前にbgを変更するように設定されていると考えられました。 – jossr