Javascript 번호 추측 게임에 추측 루프 추가

저는 Javascript에서 아주 새로운데, 간단한 숫자 추측 게임을 만들었습니다. 이 프로그램은 1-10 사이의 난수를 생성하고 추측이 너무 높거나 낮을 때 알려줍니다. 네가 맞히면, 네가 이긴다.Javascript 번호 추측 게임에 추측 루프 추가

플레이어에게 3 가지 추측을 제공하여이 현재 버전을 개선하고 싶습니다. 그 후에 플레이어가이기거나 잃게됩니다. 나는 이것이 루프로 끝난다는 것을 알고 있지만, 나는 내 삶을 위해 어떻게 할 수 있는지 알 수 없다. While 루프를 사용해 보았지만 작동하지 않습니다. 여기에 내 코드이며, 당신의 도움에 대해 감사 : 그래서 여기

<script> 
    var rannum = Math.floor((Math.random() * 10) + 1); //generates a random number and stores it in the rannum variable 

     function submitanswer(){ //This function analyzes player response and is called by the submit button 
      var playerguess = document.getElementById("guess"); //grabs whatever the player types in and stores it in the playerguess variable 
      if (playerguess.value == rannum){ //if the value of playerguess is the same as rannum then the player wins 
       alert("You win!"); 
       location.reload(); 
      } 
      if (playerguess.value > rannum){ //if the player's guess is higher than the random number alert too high 
       alert("Too high!"); 
       document.getElementById("guess").value=''; 
      } 

      else if (playerguess.value < rannum){ //if the player's guess is lower than the random number alert too low 
       alert("Too low!"); 
       document.getElementById("guess").value=''; 
      } 


     } 
     function reloaD(){ //start over by generating a new number 
      document.getElementById("guess").value=''; 
      location.reload(); 
     }       

    </script> 
    </body> 
</html>

출처

2014-09-11 M B

루프를 사용하지 마십시오. 사용자가 단어 *를 입력 한 후 * 버튼을 누르거나 Enter 키를 누르는 등의 작업을 수행 할 때까지 기다립니다. 그런 다음 논리와 함께 * 계속 : 추측이 맞습니까? 그렇지 않다면, 그들은 너무 많은 시간을 잘못 추측 했습니까? 그렇다면 GAME OVER. – user2864740

처음에 다시 불러올 필요가 없도록 호출 할 수있는 초기화 기능을 생성하십시오. 루프를 사용할 수 없습니다. 카운터를 3으로 설정하고 초기화가 0 일 때 init을 호출 할 수 없습니다. 초기화에는 생성기와 카운터가 재설정됩니다. – mplungjan

내가 당신의 게임 ... 난 당신이 내 논리를 이해하기 위해 최선을 다할 것에 대해 계속하는 방법이다. 버튼 클릭에

Your Guess: <input type='text' id='guess'> 
<button id="checkBtn">Check</button>

그런 다음 이벤트 리스너 : 모든

첫째, 당신은 그/그녀의 추측과 버튼을 사용자의 의지 입력하는 추측을 제출하는 입력 상자가 필요합니다. 그, 인스턴트 메시지의 입력 상자에서 사용자의 추측 값을 가져 와서 추측이 정확하거나 낮은 또는 높은 여부를 확인합니다 다른 기능에 보냅니다. 또한 각 버튼을 클릭 할 때마다 증가하는 카운터를 유지합니다. 그리고 사용자는 maxGuesses, 처음 3까지만 확인할 수 있습니다. 카운터가 최대 추측과 같을 때, 게임이 끝나고 버튼을 비활성화하여 더 이상 입력 할 수 없게됩니다.

document.getElementById('checkBtn').onclick = function(){ 
    var guess = document.getElementById('guess').value; 
    checkGuess(guess); 
    counter++; 

    if(counter == maxGuesses) { 
     alert("Game Over"); 
     document.getElementById("checkBtn").disabled = true; 
    } 
}

너가 너무 높거나 낮거나 정확한 추측에 대한 추측을 검사하는 것은 너에게 3 가지 조건으로 사용되는 단순한 논리이다. 올바른 추측으로 사용자에게 "당신이 승리합니다!"라고 표시됩니다. 게임이 종료되었으므로 버튼이 다시 비활성화됩니다.

See the DEMO here

편집

function checkGuess(guess){ if (guess == rannum){ //if the value of playerguess is the same as rannum then the player wins alert("You win!"); document.getElementById("checkBtn").disabled = true; } if (guess > rannum){ //if the player's guess is higher than the random number alert too high alert("Too high!"); document.getElementById("guess").value=''; } else if (guess < rannum){ //if the player's guess is lower than the random number alert too low alert("Too low!"); document.getElementById("guess").value=''; } }

:은 나뿐만 아니라 다시 시작 기능을 추가했다. 처음 display: none

<button id="restart" style="display:none">Restart</button>

그것은 사용자의 승리 또는 게임을 통해 얻는 중 (최대 추측에 도달) 할 때 표시 얻을 것이다 숨겨져 다시 시작 버튼을 추가하여.

document.getElementById("restart").style.display='block'; //making it visible

그런 다음 사용자가 다시 시작을 클릭하면 모든 값이 재설정되고 다시 시작 단추가 사라지고 게임이 다시 시작됩니다.

document.getElementById('restart').onclick = function(){ 
    rannum = Math.floor((Math.random() * 10) + 1); 
    counter = 0; 
    guess = 0; 
    document.getElementById("checkBtn").disabled = false; 
    document.getElementById("guess").value=''; 
    document.getElementById("restart").style.display='none'; 
}

See the new DEMO with restart option here

출처

2014-09-11 04:39:45

감사합니다. 카운터를 인식하지 못했습니다. 들여다 볼 것이있다. 루프가 내 문제를 해결할 수있는 유일한 방법이라고 생각했지만 향후 프로젝트에서 카운터를 염두에 두었습니다. –

환영합니다. 도움이된다면 정확한 답을 표시 할 수 있습니다 .. –

현재 루프를 사용할 필요가 없습니다. 얼마나 많은 추측이 아직 남아 있는지 추적하는 변수를 사용할 수 있습니다. 답을 계산할 때마다 변수를 하나씩 줄입니다. 0이되면 게임이 손실됩니다.

는 또한 즉, 코드에 다른 개선을했다 :

코드에 대한 별도의 JS 파일을 사용하여.
바로 호출 된 함수 식에 코드를 래핑하여 전역 변수가 유출되지 않도록하십시오.
변수에 좀 더 읽기 쉬운 이름을 지정하십시오.
DOM 요소를 DOM에서 한 번만 가져 왔습니다.
DIV에 직접 응답하기 위해 경고()를 대체했습니다.
페이지를 다시로드하지 않아도됩니다. 여기에서는 게임의 상태를 재설정 할 수 있습니다.

파일 index.html을 :

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Guess the number</title> 
    </head> 
    <body> 
     <form> 
      <input type="text" id="guess" /> 
      <input type="submit" id="submitAnswer" value="Check answer" /> 
     </form> 
     <div id="answer"></div> 
     <script src="game.js"></script> 
    </body> 
</html>

파일 game.js :

(function() { 

    var guessesLeft, randomNumber, guessInput, submitButton, answerDisplay, maxGuesses; 

    maxGuesses = 3; 

    // Load all the element references from the DOM 
    // so that we don't need to do that every time we chek the answer 
    guessInput = document.getElementById("guess"); 
    submitButton = document.getElementById("submitAnswer"); 

    // Let's use a DIV element to display the answer. 
    // It's nicer than using alert(). 
    answerDisplay = document.getElementById("answer"); 

    answerDisplay.innerHTML = "Please make a guess!"; 

    submitButton.addEventListener("click", function (event) { 
     event.stopPropagation(); 
     event.preventDefault(); 
     checkAnswer(); 
    }); 

    initGame(); 

    function initGame() { 
     guessesLeft = maxGuesses; 
     randomNumber = Math.floor(Math.random() * 10 + 1); 
     guessInput.value = ""; 
    } 

    function checkAnswer() { 

     if (guessInput.value == randomNumber) { 
      answerDisplay.innerHTML = "You win! " + randomNumber + " is correct. " + 
       "Please input your next guess to start again."; 
      initGame(); 
      return; 
     } 
     else if (guessInput.value > randomNumber) { 
      answerDisplay.innerHTML = "Too high!"; 
     } 
     else { 
      answerDisplay.innerHTML = "Too low!"; 
     } 

     guessesLeft -= 1; 

     if (guessesLeft === 0) { 
      answerDisplay.innerHTML += " No guesses left - you lost!"; 
      initGame(); 
     } 
    } 

}());

출처

2014-09-11 06:16:11

여기에 addEventListener 기능과 같은 새로운 것들이 있습니다. 그러나 나는 그것을 독자적으로 연구 할 것이다. 이전에 좋은 코딩 규칙을 숙지하는 것이 우수 사례이므로 코딩에 대한 이러한 개선을 해 주셔서 감사합니다. –

이 경우 .addEventListener() 함수는 HTML 요소의 onclick = 속성 또는 JS의 DOM 요소의 .onclick 속성과 거의 동일합니다. 가장 큰 차이점은 .addEventListener()를 사용하여 둘 이상의 리스너를 추가 할 수 있다는 점입니다. 동일한 이벤트를 수신해야 할 수도 있으므로 웹 앱에서 스크립트를 결합하려는 경우 훨씬 적합합니다. 또한 콜백에서 이벤트 객체를 제공하여 제한된 방식으로 이벤트가 작동하는 방식을 제어하는 데 사용할 수 있습니다. 이 경우 event.preventDefault()는 양식 제출을 금지합니다. –

Javascript 번호 추측 게임에 추측 루프 추가

답변

관련 문제