JS：htmlヘッダーでデクリメントする値をどのように表示しますか？

Question

基本的に、私は簡単なjavascript/htmlウェブページゲームを作っています。ここでは、数字を推測し、正しく推測する3つのチャンスがあります。私はプレイヤーが残した試行回数を表示するのに問題があります（それは3時に立ち往生します）。発生するはずの色の変化も起こりません。

また、リフレッシュ後にページの表示をリセットすることもありません（ゲームを再生するために5回のプレイスルーが必要です）。

多分my forループ/ if文がうまくいきませんか？

ここに私のコードです。あなたは...、プロンプトの後までページ更新を参照してください下に、遅延を可能にするために使用された場合setTimeout例を試していないので、

var guesses = 3; 
var random = Math.floor((Math.random() * 10) + 1); 
//start the guessing 
handleGuess(prompt("Pick a number to win the game!")); 

function handleGuess(choice) { 
guesses--; //subtract one guess 
if (guesses > 0) { 
if (choice != random) { 
    document.body.style.backgroundColor = "#CC0000"; 
    var x = ""; 
    x = x + "You have " + guesses + " chances left" + "<br>"; 
    document.getElementById("demo").innerHTML = x; 
} else { 
    var x = ""; 
    x = x + "You win!" + "<br>"; 

    document.getElementById("demo").innerHTML = x; 

    document.body.style.backgroundColor = "#009000"; 
    //return false; 
} 
} else { 
//running out of turns 
var x = ""; 
x = x + "Game Over!" + "<br>"; 

document.getElementById("demo").innerHTML = x; 

document.body.style.backgroundColor = "#FF0000"; 
//return false; 

} 
} 

Answer 1

promptは...、ブロッキングイベントです

var guesses = 3; 
 
var random = Math.floor((Math.random() * 10) + 1); 
 
//start the guessing 
 
handleGuess(prompt("Pick a number to win the game!")); 
 

 
function handleGuess(choice) { 
 
    guesses--; //subtract one guess 
 
    if (guesses > 0) { 
 
    if (choice != random) { 
 
     document.body.style.backgroundColor = "#CC0000"; 
 
     var x = ""; 
 
     x = x + "You have " + guesses + " chances left" + "<br>"; 
 
     document.getElementById("demo").innerHTML = x; 
 
     setTimeout(function() { 
 
     handleGuess(prompt("Try again!")); 
 
     },1000);//wait 1 second 
 
    } else { 
 
     var x = ""; 
 
     x = x + "You win!" + "<br>"; 
 

 
     document.getElementById("demo").innerHTML = x; 
 

 
     document.body.style.backgroundColor = "#009000"; 
 
     //return false; 
 
    } 
 
    } else { 
 
    //running out of turns 
 
    var x = ""; 
 
    x = x + "Game Over!" + "<br>"; 
 

 
    document.getElementById("demo").innerHTML = x; 
 

 
    document.body.style.backgroundColor = "#FF0000"; 
 
    //return false; 
 

 
    } 
 
}

<h1 id="demo">You have 3 chances to guess the correct number.</h1> 
 

 
<br>

Answer 2

注意。これは完全に実行可能な例であり、間違いなく「オーバーキルデモ」が「ブロック」要求に使用されています。

新しい入力でプロンプトコールを削除し、ゲーム用に2つのボタンを作成しました。 スタートゲームと呼び、「ゲーム試行中」の2番目のものです。

私はあなたがまだ何かをしていることに基づいてコードを別の要素に分けることの利点を示すことで、この例があなたに役立つように、まだ学習していると仮定しています。 "あなたのゲームの機能。

見た目を良くするために、より多くの繰り返しコードを置き換えることができますが、それはもうあなたにはそれほど馴染みがないでしょう。あなたはそれが起こるしたい正確に何

/*function ChangeDif(Difficulty) { 
 
    var i = "" 
 
    if (Difficulty == 'easy'){ 
 
     i = 10; 
 
    } 
 
    if (Difficulty == 'medium') { 
 
     i = 5; 
 
    } 
 
    if (Difficulty == 'hard') { 
 
     i = 3; 
 
    } 
 
} 
 
*/ 
 
var random = 0; 
 
var start_chances = 3; 
 
var start_attemps = 0; 
 
var x = ""; 
 

 
function startgame() { 
 
    document.getElementById("start").hidden = true; 
 
    document.getElementById("number").hidden = false; 
 
    document.getElementById("again").hidden = false; 
 
    document.getElementById("demo").innerHTML = "Pick a number to win the game!"; 
 
    random = Math.floor((Math.random() * 10) + 1); 
 
    //Cheat to see the random number, and make sure the game is working fine 
 
    //document.getElementById("cheater").innerHTML= random; 
 
    max_chances = start_chances; 
 
    step(); 
 
} 
 

 
function lostAchance() { 
 
    max_chances--; 
 
    if (max_chances > 0) { 
 
    step(); 
 
    } else { 
 
    loser(); 
 
    } 
 
} 
 

 
function loser() { 
 
    //running out of turns 
 
    x = "Game Over!" + "<br>"; 
 
    document.getElementById("demo").innerHTML = x; 
 
    document.body.style.backgroundColor = "#FF0000"; 
 
    endGame(); 
 
} 
 

 
function step() { 
 
    var choice = parseInt(document.getElementById("number").value); 
 
    if (choice !== random) { 
 
    document.body.style.backgroundColor = "#CC0000"; 
 
    x = "You have " + max_chances + " chances left" + "<br>"; 
 
    document.getElementById("demo").innerHTML = x; 
 
    document.getElementById("start").hidden = true; 
 
    } else { 
 
    //win 
 
    x = "You win! In " + (start_chances - max_chances) + " attemps <br>"; 
 
    document.getElementById("demo").innerHTML = x; 
 
    document.body.style.backgroundColor = "#009000"; 
 
    endGame(); 
 
    } 
 
} 
 

 
function endGame(){ 
 
    document.getElementById("start").hidden = false; 
 
    document.getElementById("again").hidden = true; 
 
    document.getElementById("number").hidden = true; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<body> 
 
    <input type="radio" name="difficulty" onclick="ChangeDif(this.Difficulty, 'easy')">Easy 
 
    <br> 
 

 
    <input type="radio" name="difficulty" onclick="ChangeDif(this.Difficulty, 'medium')">Medium 
 
    <br> 
 

 
    <input type="radio" name="difficulty" onclick="ChangeDif(this.Difficulty, 'hard')">Hard 
 
    <br> 
 
    <h1 id="demo">You have 3 chances to guess the correct number.</h1> 
 
<input type="number" id="number" hidden /> 
 
    <button type="submit" id="start" onclick="startgame()">Let's PLAY</button> 
 
<button type="submit" id="again" hidden onclick="lostAchance()">Try Again</button> 
 
    <p id ="cheater"></p> 
 
</body> 
 

 
</html>