项目简介

灵感来自于初中时和同学们在摸鱼时玩的小游戏，用计算器生成一个随机数，然后轮流猜，猜中的要受到惩罚——进行真心话大冒险。这个数字炸弹的小游戏便来源于此。

  • 开始游戏前需要选择游戏的人数，便于确定合适的范围并生成随机数。
  • 猜完数字后，按下确认提交。猜的数字必须在范围内，否则会提醒重新进行猜数。
  • 当游戏结束后，你可以点击开始新游戏，重新开始新一轮游戏。

项目代码

index.html

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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <title>猜数字游戏</title>
    <link rel="stylesheet" href="index.css">
  </head>

  <body>
    <h1>数字炸弹游戏</h1>

    <p class="gameRules">确定玩家人数后，点击确定，游戏开始。首先系统会根据玩家人数随机生成一个自然数作为数字炸弹，并且会给出这个数字炸弹的范围，玩家们可以自己规定顺序，轮流在范围内猜（猜到数字炸弹后将会引爆），这个过程数字炸弹的范围将会一直缩小，直到有一个玩家引爆炸弹，游戏结束。该玩家将受到严峻的惩罚。</p>

    <div class="form">
      <label for="initPeople">请选择玩家人数: </label>
      <input type="submit" value="2-4人" id="fewPeople" class="initSubmit">
      <input type="submit" value="5人以上" id="manyPeople" class="initSubmit">
    </div>

    <div class="form">
      <label for="guessField">请猜数: </label>
      <input type="text" id="guessField" class="guessField">
      <input type="submit" value="确定" class="guessSubmit">
    </div>

    <div class="resultParas">
      <p class="Tips"></p>
      <p class="guesses"></p>
      <p class="lastResult"></p>
    </div>

    <script>
        const Tips = document.querySelector('.Tips');
        const guesses = document.querySelector('.guesses');
        const lastResult = document.querySelector('.lastResult');
        const lowOrHi = document.querySelector('.lowOrHi');

        const guessSubmit = document.querySelector('.guessSubmit');
        const guessField = document.querySelector('.guessField');

        const fewPeople = document.querySelector('#fewPeople')
        const manyPeople = document.querySelector('#manyPeople')

        let resetButton;
        let minimumLimit,maximumLimit,randomNumber;
        guessField.disabled = true;
        guessSubmit.disabled = true;
        function initGame(playerCount) {   
          guessField.disabled = false;
          guessSubmit.disabled = false;    
          let maximumNumber = 100 * playerCount;
          randomNumber = Math.floor(Math.random() * maximumNumber) + 1;
          if (randomNumber == 100 || randomNumber == 200) {
            randomNumber--;
          }
          minimumLimit = 0;
          maximumLimit = maximumNumber;
          guesses.textContent = '数字炸弹的范围是：';
          guesses.textContent += minimumLimit + ' ~ ' + maximumLimit;
        }

        function initGame1(){
          let num = 1;
          Tips.textContent = '玩家人数为2-4人，请在确认完顺序后开始游戏';
          initGame(num);
        }
        function initGame2(){
          let num = 2;
          Tips.textContent = '玩家人数为5人以上，请在确认完顺序后开始游戏';
          initGame(num);
        }

        fewPeople.addEventListener('click', initGame1);
        manyPeople.addEventListener('click', initGame2);

        function resetLimit(){
          guesses.textContent = '数字炸弹的范围是：';
          guesses.textContent += minimumLimit + ' ~ ' + maximumLimit;
        }

        function checkGuess() {
          let userGuess = Number(guessField.value);
          if (userGuess > minimumLimit && userGuess <maximumLimit) {
            if (userGuess === randomNumber) {
              lastResult.textContent = '!!!Boom!!! ' + userGuess + ' 为数字炸弹，你选中了数字炸弹，请接受惩罚';
              lastResult.style.backgroundColor = 'red';
              guesses.textContent = '';
              setGameOver();
            } else if(userGuess < randomNumber) {
              lastResult.textContent = userGuess + ' 不是炸弹数字，你是安全的'
              lastResult.style.backgroundColor = 'green';
              minimumLimit = userGuess;
              resetLimit();
            } else if(userGuess > randomNumber) {
              lastResult.textContent = userGuess + ' 不是炸弹数字，你是安全的'
              lastResult.style.backgroundColor = 'green';
              maximumLimit = userGuess;
              resetLimit();
            }
          } else {
            lastResult.textContent = '你猜的数字不在可选范围内，请重新选择';
            lastResult.style.backgroundColor = 'rgb(230, 97, 8)';
          }
          guessField.value = '';
          guessField.focus();
        }
        guessSubmit.addEventListener('click', checkGuess);
        function setGameOver() {
          guessField.disabled = true;
          guessSubmit.disabled = true;
          fewPeople.disabled = true;
          manyPeople.disabled = true;
          resetButton = document.createElement('button');
          resetButton.textContent = '开始新游戏';
          document.body.appendChild(resetButton);
          resetButton.addEventListener('click', resetGame);
        }
        function resetGame() {
          Tips.textContent = '已开始新一轮游戏，请选择玩家人数。';
          resetButton.parentNode.removeChild(resetButton);

          fewPeople.disabled = false;
          manyPeople.disabled = false;
          guessField.value = '';
          guessField.focus();

          lastResult.style.backgroundColor = 'white';
        }
    </script>
  </body>
</html>

作为JavaScript的一次练习，就将js代码写在html内部了。

index.css

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
html {
    font-family: sans-serif;
  }

  body {
    width: 50%;
    max-width: 800px;
    min-width: 480px;
    margin: 0 auto;
  }

  .lastResult {
    color: rgb(255, 255, 255);
    padding: 3px;
  }
  .form {
    padding: 2px;
  }
  .initPeople {
    width: 160px;
    font-display: true;
  }
  .guesses {
    border: 1pm solid rgba(240, 8, 163, 0.541);
  }
  .Tips {
    background-color: rgb(89, 51, 224);
    /* border: 2px solid cornflowerblue; */
    color: rgb(236, 243, 248);
  }

大功告成

第一版本的数字炸弹就这样完成了。如果对这个小项目感兴趣的，可以查看我们的当前版本,如果有什么问题，希望可以得到你们的反馈。