Number guessing game 만들기

See the Pen Number guessing game by likeanewstar (@likeanewstar) on CodePen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Number guessing game</title>
    <style>
      html {
        font-family: sans-serif;
      }
      body {
        width: 50%;
        max-width: 800px;
        min-width: 480px;
        margin: 0 auto;
      }
      .lastResult {
        color: white;
        padding: 3px;
      }
    </style>
  </head>
  <body>
    <h1>Number guessing game</h1>
    <p>We have selected a random number between 1 and 100. See if you can guess it in 10 turns or fewer. We'll tell you if your guess was too high or too low.</p>
    <div class="form">
      <label for="guessField">Enter a guess: </label><input type="text" id="guessField" class="guessField">
      <input type="submit" value="Submit guess" class="guessSubmit">
    </div>
    <div class="resultParas">
      <p class="guesses"></p>
      <p class="lastResult"></p>
      <p class="lowOrHi"></p>
    </div>
    <script>
        'use stricts';
        var randomNumber = Math.floor(Math.random() * 100) + 1;
        
        var guesses = document.querySelector('.guesses');
        var lastResult = document.querySelector('.lastResult');
        var lowOrHi = document.querySelector('.lowOrHi');
        
        var guessSubmit = document.querySelector('.guessSubmit');
        var guessField = documentField = document.querySelector('.guessField');
        
        var guessCount = 1;
        var resetButton;
        
        guessField.focus();
        
        function checkGuess() {
            var userGuess = Number(guessField.value);
            if (guessCount === 1) {
                guesses.textContent = 'Previous guesses: ';
            }
            guesses.textContent += userGuess + ' ';
            
            if (userGuess === randomNumber) {
                lastResult.textContent = 'Congratulations! You got it right!';
                lastResult.style.backgroundColor = 'green';
                lowOrHi.textContent = '';
                setGameOver();
            } else if (guessCount === 10) {
                lastResult.textContent = '!!! GAME OVER !!!';
                setGameOver();
            } else {
                lastResult.textContent = 'Wrong!';
                lastResult.style.backgroundColor = 'red';
                if (userGuess < randomNumber) {
                    lowOrHi.textContent = 'Last guess was too low!';
                } else if (userGuess > randomNumber) {
                    lowOrHi.textContent = 'Last guess was too high!';
                }
            }
            
            guessCount++;
            guessField.value = '';
            guessField.focus();
        } // end of checkGuess
        
        guessSubmit.addEventListener('click', checkGuess); // click이 일어나면 checkGuess 함수를 실행. addEventListener() 안에서는 함수의 괄호가 필요 없음.
        
        function setGameOver() {
            guessField.disabled = true;
            guessSubmit.disabled = true;
            resetButton = document.createElement('button');
            resetButton.textContent = 'Start new game';
            document.body.appendChild(resetButton);
            resetButton.addEventListener('click', resetGame);
        } // end of setGameOver
        
        function resetGame() {
            guessCount = 1;
            
            var resetParas = document.querySelectorAll('.resultParas p'); // div.resultParas 안의 모든 문장을 배열 형태로 저장
            for (var i = 0; i < resetParas.length; i++) {
                resetParas[i].textContent = '';
            }
            
            resetButton.parentNode.removeChild(resetButton);
            
            guessField.disabled = false;
            guessSubmit.disabled = false;
            guessField.value = '';
            guessField.focus();
            
            lastResult.style.backgroundColor = 'white';
            
            randomNumber = Math.floor(Math.random() * 100) + 1;
        } // end of resetGame
    </script>
  </body>
</html>
Colored by Color Scripter
cs

참고 URL : https://developer.mozilla.org/ko/docs/Learn/JavaScript/First_steps/A_first_splash

'Tech > JavaScript' 카테고리의 다른 글

[JS] 팝업 - 오늘 하루 열지 않기 (0)	2019.07.22
[JS] 바닐라 JS로 구글 크롬앱 만들기 #3 Make your first JS App - 1 (0)	2019.07.21
[JS] 바닐라 JS로 구글 크롬앱 만들기 #1 Theory ~ #2 Practice (0)	2019.07.20
[JS] Math Method (소수점 올림, 버림, 반올림) (0)	2019.07.20
How do I get the current date in JavaScript? (0)	2018.07.27

'Tech > JavaScript' 카테고리의 다른 글

티스토리툴바