Skip to content

Commit 8061961

Browse files
leoncoolmoonleoncoolmoon
committed
improved UI
1 parent 163f02b commit 8061961

File tree

1 file changed

+217
-63
lines changed

1 file changed

+217
-63
lines changed

‎30-Guess-Number-Game/index.html

Lines changed: 217 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,117 +1,271 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html lang="zh">
33
<head>
4-
<title>Number Guessing Game</title>
4+
<title>猜数字游戏</title>
55
<meta charset="utf-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<style>
88
body {
9-
font-family: Arial, sans-serif;
9+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
1010
margin: 0;
1111
padding: 20px;
12-
background-color: #f5f5f5;
12+
background-color: #f0f8ff;
1313
color: #333;
14+
display: flex;
15+
flex-direction: column;
16+
align-items: center;
17+
min-height: 100vh;
18+
}
19+
.container {
20+
background-color: white;
21+
border-radius: 10px;
22+
padding: 20px;
23+
box-shadow: 0 0 10px rgba(0,0,0,0.1);
24+
width: 90%;
25+
max-width: 600px;
26+
margin-bottom: 20px;
1427
}
1528
h1 {
1629
text-align: center;
17-
color: #007BFF;
30+
color: #4a90e2;
31+
margin-bottom: 20px;
1832
}
1933
p {
2034
margin: 10px 0;
35+
line-height: 1.6;
36+
}
37+
#game-info {
38+
display: flex;
39+
justify-content: space-between;
40+
margin-bottom: 20px;
41+
font-size: 1.2em;
42+
font-weight: bold;
2143
}
2244
#records {
2345
margin-top: 20px;
46+
max-height: 200px;
47+
overflow-y: auto;
48+
border: 1px solid #ddd;
49+
padding: 10px;
50+
border-radius: 5px;
2451
}
2552
input[type="text"] {
2653
width: 100%;
2754
padding: 10px;
2855
margin: 10px 0;
2956
box-sizing: border-box;
57+
border: 2px solid #4a90e2;
58+
border-radius: 5px;
3059
}
3160
button {
3261
padding: 10px 20px;
33-
background-color: #007BFF;
62+
background-color: #4a90e2;
3463
color: white;
3564
border: none;
3665
cursor: pointer;
3766
display: block;
3867
width: 100%;
3968
box-sizing: border-box;
69+
margin: 10px 0;
70+
border-radius: 5px;
71+
transition: background-color 0.3s;
4072
}
4173
button:hover {
42-
background-color: #0056b3;
74+
background-color: #357ae8;
4375
}
4476
#result {
4577
margin-top: 20px;
4678
font-size: 1.2em;
4779
font-weight: bold;
4880
text-align: center;
81+
color: #4a90e2;
82+
}
83+
#overlay {
84+
display: none;
85+
position: fixed;
86+
top: 0;
87+
left: 0;
88+
width: 100%;
89+
height: 100%;
90+
background-color: rgba(0, 0, 0, 0.5);
91+
z-index: 1000;
92+
}
93+
#result-popup {
94+
display: none;
95+
position: fixed;
96+
top: 50%;
97+
left: 50%;
98+
transform: translate(-50%, -50%);
99+
background-color: white;
100+
padding: 20px;
101+
border-radius: 10px;
102+
box-shadow: 0 0 10px rgba(0,0,0,0.3);
103+
z-index: 1001;
104+
text-align: center;
105+
}
106+
#new-game-btn, #give-up-btn {
107+
display: none;
49108
}
50109
</style>
51-
<script>
52-
let answer = "", records;
53-
const generateNumber = () => Array.from({length: 10}, (_, i) => i)
54-
.sort(() => Math.random() - 0.5)
55-
.slice(0, 4)
56-
.join('');
110+
</head>
111+
<body>
112+
<div class="container">
113+
<h1>猜数字游戏</h1>
114+
<div id="game-info">
115+
<span>积分: <span id="score">0</span></span>
116+
<span>剩余时间: <span id="timer">300</span>秒</span>
117+
<span>剩余猜测: <span id="guesses-left">8</span></span>
118+
</div>
119+
<p>在下面的表单中输入一个4位数字（数字不重复），然后点击"猜测"按钮。你有8次机会和300秒时间。</p>
120+
<p>如果数字和位置都正确，你会得到一个"A"。如果数字正确但位置错误，你会得到一个"B"。</p>
121+
<button id="new-game-btn" onclick="newGame()">新游戏</button>
122+
<button id="give-up-btn" onclick="giveUp()">放弃</button>
123+
<div id="records"><h3>猜测记录:</h3></div>
124+
<label for="guess">你的猜测:</label>
125+
<input type="text" id="guess" name="guess" pattern="\d{4}">
126+
<button onclick="submitGuess(document.getElementById('guess').value)">猜测</button>
127+
<div id="result"></div>
128+
</div>
57129

58-
const checkGuess = (guess) => {
59-
if (!answer) newGame();
60-
let a = 0, b = 0;
61-
for (let i = 0; i < 4; i++) {
62-
if (guess[i] == answer[i]) a++;
63-
else if (answer.includes(guess[i])) b++;
64-
}
65-
return `${a}A${b}B`;
130+
<div id="overlay"></div>
131+
<div id="result-popup">
132+
<h2 id="result-message"></h2>
133+
<p id="result-details"></p>
134+
</div>
135+
136+
<script>
137+
let answer = "", records = [], score = 0, timer, guessesLeft = 8, isGameActive = false, timeLeft = 300;
138+
139+
const generateNumber = () => Array.from({length: 10}, (_, i) => i)
140+
.sort(() => Math.random() - 0.5)
141+
.slice(0, 4)
142+
.join('');
143+
144+
const checkGuess = (guess) => {
145+
let a = 0, b = 0;
146+
for (let i = 0; i < 4; i++) {
147+
if (guess[i] == answer[i]) a++;
148+
else if (answer.includes(guess[i])) b++;
66149
}
150+
return `${a}A${b}B`;
151+
}
152+
153+
const renderRecords = () => {
154+
let list = "<h3>猜测记录:</h3>";
155+
for (let {guess, result} of records) {
156+
list += `<p>${guess}: ${result}</p>`;
157+
}
158+
document.getElementById("records").innerHTML = list;
159+
document.getElementById("records").scrollTop = document.getElementById("records").scrollHeight;
160+
}
161+
162+
const updateGameInfo = () => {
163+
document.getElementById("score").textContent = score;
164+
document.getElementById("guesses-left").textContent = guessesLeft;
165+
document.getElementById("timer").textContent = timeLeft;
166+
}
67167

68-
const renderRecords = () => {
69-
let list = "<h2>Guessing Records:</h2>";
70-
for (let {guess, result} of records) {
71-
list += `<p>${guess}: ${result}</p>`;
168+
const startTimer = () => {
169+
if (timer) clearInterval(timer);
170+
timeLeft = 300;
171+
timer = setInterval(() => {
172+
timeLeft--;
173+
updateGameInfo();
174+
if (timeLeft <= 0) {
175+
endGame(false, "时间到！");
72176
}
73-
document.getElementById("records").innerHTML = list;
177+
}, 1000);
178+
}
179+
180+
const newGame = () => {
181+
answer = generateNumber();
182+
records = [];
183+
guessesLeft = 8;
184+
isGameActive = true;
185+
renderRecords();
186+
updateGameInfo();
187+
document.getElementById("give-up-btn").style.display = "block";
188+
document.getElementById("result").textContent = "";
189+
document.getElementById("new-game-btn").style.display = "none";
190+
document.getElementById("guess").focus();
191+
timeLeft = 300;
192+
if (timer) clearInterval(timer);
193+
}
194+
195+
const submitGuess = (guess) => {
196+
if (!isGameActive && records.length === 0) {
197+
newGame();
198+
startTimer(); // 在这里启动计时器
74199
}
200+
if (!isGameActive) return;
201+
if (!/^(?!.*(.).*\1)\d{4}$/.test(guess)) {
202+
alert("请输入一个4位数字，且数字不能重复。");
203+
document.getElementById("guess").value = "";
204+
document.getElementById("guess").focus();
205+
return;
206+
}
75207

76-
const newGame = () => {
77-
answer = generateNumber();
78-
records = [];
79-
renderRecords();
80-
document.getElementById("result").textContent = "";
208+
const result = checkGuess(guess);
209+
records.push({guess, result});
210+
guessesLeft--;
211+
renderRecords();
212+
updateGameInfo();
213+
document.getElementById("result").textContent = result;
214+
if (result === "4A0B") {
215+
endGame(true, "恭喜你，你赢了！");
216+
} else if (guessesLeft <= 0) {
217+
endGame(false, "很遗憾，你输了。");
81218
}
219+
document.getElementById('guess').value = "";
220+
document.getElementById('guess').focus();
221+
window.scrollTo(0, document.body.scrollHeight);
222+
}
82223

83-
const submitGuess = (guess) => {
84-
if (!/^\d{4}$/.test(guess)) {
85-
alert("Please enter a 4-digit number.");
86-
return;
87-
}
88-
const result = checkGuess(guess);
89-
records.push({guess, result});
90-
renderRecords();
91-
document.getElementById("result").textContent = result;
92-
if (result === "4A0B") {
93-
alert("Congratulations, you won!");
94-
answer = "";
95-
return;
96-
}
97-
if (records.length >= 8) {
98-
alert("Sorry, you lost.");
99-
answer = "";
100-
}
101-
document.getElementById('guess').value = "";
224+
const endGame = (isWin, message) => {
225+
isGameActive = false;
226+
clearInterval(timer);
227+
if (isWin) {
228+
score += timeLeft * guessesLeft;
102229
}
103-
</script>
104-
</head>
105-
<body>
106-
<h1>Number Guessing Game</h1>
107-
<p>Enter a 4-digit number in the form below, with no repeated digits, and click the "Guess" button.</p>
108-
<p>If both the position and the number are correct, you get an "A". If only the number is correct but in the wrong position, you get a "B".</p>
109-
<p>You can click the "New Game" button to start a new game.</p>
110-
<button onclick="newGame()">New Game</button>
111-
<div id="records"></div>
112-
<label for="guess">Your Guess:</label>
113-
<input type="text" id="guess" name="guess" pattern="\d{4}">
114-
<button onclick="submitGuess(document.getElementById('guess').value)">Guess</button>
115-
<div id="result"></div>
230+
showResultPopup(message);
231+
updateGameInfo();
232+
}
233+
234+
const giveUp = () => {
235+
if (isGameActive) {
236+
endGame(false, "你放弃了游戏。");
237+
} else {
238+
alert("没有进行中的游戏。");
239+
}
240+
}
241+
242+
const showResultPopup = (message) => {
243+
document.getElementById("give-up-btn").style.display = "none";
244+
document.getElementById("result-message").textContent = message;
245+
document.getElementById("result-details").textContent = `正确答案是 ${answer}`;
246+
document.getElementById("overlay").style.display = "block";
247+
document.getElementById("result-popup").style.display = "block";
248+
document.getElementById("result-popup").focus();
249+
document.addEventListener("keypress", hideResultPopup);
250+
document.addEventListener("mousedown", hideResultPopup);
251+
document.addEventListener("touchstart", hideResultPopup);
252+
}
253+
254+
const hideResultPopup = () => {
255+
document.getElementById("overlay").style.display = "none";
256+
document.getElementById("result-popup").style.display = "none";
257+
document.removeEventListener("keypress", hideResultPopup);
258+
document.removeEventListener("mousedown", hideResultPopup);
259+
document.removeEventListener("touchstart", hideResultPopup);
260+
records = [];
261+
}
262+
263+
document.getElementById("guess").addEventListener("keyup", (event) => {
264+
if (event.keyCode === 13) {
265+
submitGuess(document.getElementById("guess").value);
266+
}
267+
});
268+
document.getElementById("guess").focus();
269+
</script>
116270
</body>
117271
</html>

0 commit comments

Comments
 (0)