Web实现猜数字游戏：JavaScript DOM基础与实例教程

前端
字数统计: 1.6k   |   阅读时长≈ 7 分钟

Web实现猜数字游戏：JavaScript DOM基础与实例教程

猜数字游戏是一个简单而经典的游戏，玩家需要猜测由系统随机生成的一个数字。在本教程中，我们将学习如何使用JavaScript和DOM来实现这个网页版的猜数字游戏，并介绍相关的JavaScript DOM基础知识。

JavaScript DOM基础

DOM（Document Object Model）是HTML文档的编程接口，它允许我们通过JavaScript访问和操作网页的元素。在JavaScript中，我们可以使用DOM API来选取元素、更改内容、绑定事件等。

体验地址

http://8.210.131.139/GuessNumber.html

实例：猜数字游戏

创建HTML结构

首先，我们需要创建一个包含游戏输入区域、结果显示和再玩一次按钮的HTML结构。

1
2
3
4
5
6
7
8
9
10
11
<div class="container">
  <h1>猜数字游戏</h1>
  <div class="input-group">
    <label for="guess">请猜一个1~100的整数：</label>
    <input type="text" id="guess" />
    <button id="submit">提交</button>
  </div>
  <div class="result"></div>
  <div class="message"></div>
  <button id="play-again" class="play-again" style="display: none">再玩一次</button>
</div>

美化样式

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
* {
        font-family: Arial, sans-serif;
        box-sizing: border-box;
      }

      .container {
        margin: 50px auto;
        max-width: 600px;
        text-align: center;
        background-color: #d1d1d1;
        padding: 30px;
        border-radius: 10px;
      }

      h1 {
        font-size: 32px;
        margin-bottom: 20px;
      }

      .input-group {
        margin-bottom: 20px;
      }

      label {
        display: block;
        margin-bottom: 5px;
      }

      input[type="text"] {
        font-size: 18px;
        padding: 5px;
        width: 200px;
        border: 1px solid #ccc;
      }

      button {
        font-size: 18px;
        padding: 5px 10px;
        background-color: #007bff;
        color: #fff;
        border: none;
        cursor: pointer;
      }

      button:hover {
        background-color: #0062cc;
      }

      .result {
        font-size: 24px;
        margin-bottom: 20px;
      }

      .message {
        font-size: 18px;
        margin-bottom: 20px;
      }

      .play-again {
        font-size: 18px;
        padding: 5px 10px;
        background-color: #007bff;
        color: #fff;
        border: none;
        cursor: pointer;
        margin: 0 auto;
      }

      .play-again:hover {
        background-color: #0062cc;
      }

编写JavaScript逻辑

初始化游戏

在JavaScript中，我们首先定义一个变量来存储随机生成的答案。

1
var answer = Math.floor(Math.random() * 100) + 1;

获取页面元素

使用document.getElementById和document.querySelector来获取页面上的元素。

1
2
3
4
5
var input = document.getElementById("guess");
var submitBtn = document.getElementById("submit");
var result = document.querySelector(".result");
var message = document.querySelector(".message");
var playAgainBtn = document.getElementById("play-again");

处理提交事件

为提交按钮绑定点击事件，获取用户输入的数字，并与答案比较。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
submitBtn.addEventListener("click", function () {
  var guess = parseInt(input.value);
  if (isNaN(guess) || guess < 1 || guess > 100) {
    result.textContent = "";
    message.textContent = "请输入1~100之间的整数！";
  } else {
    if (guess === answer) {
      result.textContent = "恭喜你，猜对了！";
      message.textContent = "";
      playAgainBtn.style.display = "block";
      submitBtn.disabled = true;
    } else {
      result.textContent = "";
      if (guess < answer) {
        message.textContent = "太小了，请继续猜！";
      } else {
        message.textContent = "太大了，请继续猜！";
      }
    }
  }
});

处理再玩一次事件

为再玩一次按钮绑定点击事件，重置游戏状态并允许用户重新开始游戏。

1
2
3
4
5
6
7
8
playAgainBtn.addEventListener("click", function () {
  answer = Math.floor(Math.random() * 100) + 1;
  input.value = "";
  result.textContent = "";
  message.textContent = "";
  playAgainBtn.style.display = "none";
  submitBtn.disabled = false;
});

全部代码

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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>洛可可白😁猜数字</title>
    <style>
      * {
        font-family: Arial, sans-serif;
        box-sizing: border-box;
      }

      .container {
        margin: 50px auto;
        max-width: 600px;
        text-align: center;
        background-color: #d1d1d1;
        padding: 30px;
        border-radius: 10px;
      }

      h1 {
        font-size: 32px;
        margin-bottom: 20px;
      }

      .input-group {
        margin-bottom: 20px;
      }

      label {
        display: block;
        margin-bottom: 5px;
      }

      input[type="text"] {
        font-size: 18px;
        padding: 5px;
        width: 200px;
        border: 1px solid #ccc;
      }

      button {
        font-size: 18px;
        padding: 5px 10px;
        background-color: #007bff;
        color: #fff;
        border: none;
        cursor: pointer;
      }

      button:hover {
        background-color: #0062cc;
      }

      .result {
        font-size: 24px;
        margin-bottom: 20px;
      }

      .message {
        font-size: 18px;
        margin-bottom: 20px;
      }

      .play-again {
        font-size: 18px;
        padding: 5px 10px;
        background-color: #007bff;
        color: #fff;
        border: none;
        cursor: pointer;
        margin: 0 auto;
      }

      .play-again:hover {
        background-color: #0062cc;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <h1>猜数字游戏</h1>
      <div class="input-group">
        <label for="guess">请猜一个1~100的整数：</label>
        <input type="text" id="guess" />
        <button id="submit">提交</button>
      </div>
      <div class="result"></div>
      <div class="message"></div>
      <button id="play-again" class="play-again" style="display: none">
        再玩一次
      </button>
    </div>

    <script>
      // 生成随机数（1~100之间）
      var answer = Math.floor(Math.random() * 100) + 1;

      // 获取页面元素
      var input = document.getElementById("guess");
      var submitBtn = document.getElementById("submit");
      var result = document.querySelector(".result");
      var message = document.querySelector(".message");
      var playAgainBtn = document.getElementById("play-again");

      // 处理提交事件
      submitBtn.addEventListener("click", function () {
        // 获取用户输入的数字
        var guess = parseInt(input.value);

        // 验证用户输入的数字是否合法
        if (isNaN(guess) || guess < 1 || guess > 100) {
          result.textContent = "";
          message.textContent = "请输入1~100之间的整数！";
          return;
        }

        // 比较用户输入的数字和答案
        if (guess === answer) {
          result.textContent = "恭喜你，猜对了！";
          message.textContent = "";
          playAgainBtn.style.display = "block";
          submitBtn.disabled = true;
        } else if (guess < answer) {
          result.textContent = "";
          message.textContent = "太小了，请继续猜！";
        } else {
          result.textContent = "";
          message.textContent = "太大了，请继续猜！";
        }
      });

      // 处理再玩一次事件
      playAgainBtn.addEventListener("click", function () {
        // 重新生成随机数
        answer = Math.floor(Math.random() * 100) + 1;

        // 清空输入框和提示信息
        input.value = "";
        result.textContent = "";
        message.textContent = "";

        // 隐藏再玩一次按钮，启用提交按钮
        playAgainBtn.style.display = "none";
        submitBtn.disabled = false;
      });
    </script>
  </body>
</html>

结语

通过上述步骤，我们实现了一个简单的猜数字游戏。这个实例展示了如何使用JavaScript DOM API来操作HTML元素，并响应用户事件。通过这个项目，你可以更好地理解DOM操作的基本概念和方法，以及如何在实际项目中应用它们。猜数字游戏是一个入门级的编程项目，适合初学者练习和提升编程技能。

打赏
  • 版权声明： 本博客所有文章除特别声明外，著作权归作者所有。转载请注明出处！
  • Copyrights © 2022-2024 何福海
  • 访问人数: | 浏览次数:

请我喝杯奶茶吧~

支付宝
微信