本文最后更新于：5 个月前
开发一个猜数字游戏。游戏应随机选择一个 100 以内的自然数, 然后邀请玩家在 10 轮以内猜出这个数字。每轮后都应告知玩家的答案正确与否，如果出错了，则告诉他数字是低了还是高了。并且应显示出玩家前一轮所猜的数字。一旦玩家猜对，或者用尽所有机会，游戏将结束。游戏结束后，可以让玩家选择再次开始。
用到Math里的方法设置随机数，由于Math.random()在范围从0到小于1的伪随机数，可以用Math.floor()来取一个表示小于或等于指定数字的最大整数的数字，随机数与玩家猜的数比较，并给出提示。
1
2
|
let randomNumber = Math.floor(Math.random() * 100 + 1);
|
与 Node.textContent 名字看起来很相似，但有重要的不同之处：
textContent 会获取所有元素的内容，包括 <script>和<style>元素，然而 innerText 只展示给人看的元素。textContent会返回节点中的每一个元素。相反，innerText受 CSS 样式的影响，并且不会返回隐藏元素的文本，- 此外，由于
innerText 受 CSS 样式的影响，它会触发回流（ reflow ）去确保是最新的计算样式。（回流在计算上可能会非常昂贵，因此应尽可能避免。）
- 与
textContent 不同的是, 在 Internet Explorer (小于和等于 11 的版本) 中对 innerText 进行修改， 不仅会移除当前元素的子节点，而且还会永久性地破坏所有后代文本节点。在之后不可能再次将节点再次插入到任何其他元素或同一元素中。
在学着做这个游戏中学到如何用 js 动态创建元素：
1
2
3
4
5
6
|
resetButton = document.createElement('button');
resetButton.textContent = "开始新游戏";
document.body.appendChild(resetButton);
resetButton.parentNode.removeChild(resetButton);
|
- 随机生成一个 100 以内的自然数。
- 记录玩家当前的轮数。从 1 开始。
- 为玩家提供一种猜测数字的方法。
- 一旦有结果提交，先将其记录下来，以便用户可以看到他们先前的猜测。
- 然后检查它是否正确。
- 如果正确：
- 显示祝贺消息。
- 阻止玩家继续猜测（这会使游戏混乱）。
- 显示控件允许玩家重新开始游戏。
- 如果出错，并且玩家有剩余轮次：
- 告诉玩家他们错了。
- 允许他们输入另一个猜测。
- 轮数加 1。
- 如果出错，并且玩家没有剩余轮次：
- 告诉玩家游戏结束。
- 阻止玩家继续猜测（这会使游戏混乱）。
- 显示控件允许玩家重新开始游戏。
- 一旦游戏重启，确保游戏的逻辑和UI完全重置，然后返回步骤1。
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
| <!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>Document</title>
</head>
<style>
body {
width: 50%;
margin: 0 auto;
}
.guessResult {
color: rgb(255, 255, 255);
}
</style>
<body>
<h1>猜数字游戏</h1>
<p>这里将会设一个1~100的数字，你有10次机会去猜出它，我会给你提示猜大还是猜小了</p>
<span>请输入<input type="text" class="guessField">
<input type="button" value="提交" class="guessSubmit"> </span>
<div class="result">
<p class="lastGuesses"></p>
<p class="guessResult"></p>
<p class="hint"></p>
</div>
</body>
<script>
let guessField = document.querySelector('.guessField');
let guessSubmit = document.querySelector('.guessSubmit');
let lastGuesses = document.querySelector('.lastGuesses');
let guessResult = document.querySelector('.guessResult');
let hint = document.querySelector('.hint');
let randomNumber = Math.floor(Math.random() * 100 + 1);
let guessCount = 1;
let resetButton;
function checkGuess() {
let userGuess = Number(guessField.value);
if (guessCount == 1) {
lastGuesses.textContent = "上次输入";
}
lastGuesses.textContent += userGuess + " ";
if (randomNumber == userGuess) {
guessResult.textContent = "你猜对了 !";
guessResult.style.backgroundColor = "green";
hint.textContent = "";
setGameOver();
} else if (guessCount == 10) {
guessResult.textContent = "！！！游戏结束！！！";
setGameOver();
}
if (randomNumber > userGuess) {
guessResult.textContent = "你猜错了 !";
guessResult.style.backgroundColor = "red";
hint.textContent = "你猜小了";
}
if (randomNumber < userGuess) {
guessResult.textContent = "你猜错了 !";
guessResult.style.backgroundColor = "red";
hint.textContent = "你猜大了";
}
guessCount++;
guessField.value = '';
guessField.focus();
}
guessSubmit.addEventListener('click', checkGuess);
function setGameOver() {
guessField.disabled = true;
guessSubmit.disabled = true;
resetButton = document.createElement('button');
resetButton.textContent = "开始新游戏";
document.body.appendChild(resetButton);
resetButton.addEventListener('click', resetGame);
}
function resetGame() {
guessField.disabled = false;
guessSubmit.disabled = false;
randomNumber = Math.floor(Math.random() * 100 + 1);
guessCount = 1;
let p = document.querySelectorAll('.result p');
for (let i = 0; i < p.length; i++) {
p[i].textContent = "";
}
resetButton.parentNode.removeChild(resetButton);
guessField.focus();
}
</script>
</html>
|