JS : html 헤더를 통해 감소 값을 표시하는 방법은 무엇입니까? (그리고 그 이상)

Question

기본적으로, 나는 숫자를 추측하고 올바르게 추측 할 수있는 세 번의 기회가있는 간단한 javascript/html 웹 페이지 게임을 만들고 있습니다. 플레이어가 남긴 시도 횟수를 표시하는 데 문제가 있습니다 (3시에 멈춤). 발생할 것으로 예상되는 색상 변경도 발생하지 않습니다.

또한 새로 고침 후 페이지 표시를 재설정하지 않습니다 (재설정하기 위해 5 개의 게임 플레이를 필요로 함).

아마도 for for loop/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 개의 버튼을 만들었다. 하나는 시작 게임이고 다른 하나는 "게임 시도 시도 중"입니다.

이 예가 도움이 될 수 있다고 가정하고 있습니다. 코드를 다른 요소로 분리하여 코드를 다른 요소로 분리 할 때의 이점을 보여 주며, 코드를보다 쉽게 ​​업그레이드 할 수 있도록 도와줍니다. "게임의 특징.

더보기 좋게하기 위해 더 많은 반복 코드를 대체 할 수는 있지만 더 이상 익숙하지 않을 것입니다.

/*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>