-
Notifications
You must be signed in to change notification settings - Fork 0
/
game.html
153 lines (134 loc) · 4.34 KB
/
game.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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<title>猜數字遊戲</title>
<style>
/* 重置樣式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 頁面基本樣式 */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f9;
font-family: Arial, sans-serif;
}
/* 容器樣式 */
.container {
background-color: #ffffff;
padding: 20px 40px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
width: 300px;
}
/* 標題樣式 */
h1 {
font-size: 24px;
color: #333;
margin-bottom: 20px;
}
/* 提示訊息樣式 */
p {
font-size: 16px;
color: #666;
margin-bottom: 10px;
}
/* 表單樣式 */
form {
margin-top: 15px;
}
label {
font-size: 16px;
color: #555;
}
input[type="number"] {
width: 80%;
padding: 8px;
margin-top: 5px;
border-radius: 5px;
border: 1px solid #ccc;
font-size: 16px;
margin-bottom: 15px;
}
button {
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #45a049;
}
/* 重玩按鈕樣式 */
.restart-link {
display: block;
margin-top: 20px;
text-decoration: none;
color: #007bff;
cursor: pointer;
}
.restart-link:hover {
text-decoration: underline;
}
/* 嘗試次數樣式 */
.attempts {
font-weight: bold;
color: #333;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>猜數字遊戲</h1>
<p id="message">遊戲開始！我想了一個 1 到 100 之間的數字，試著猜猜看！</p>
<form onsubmit="return guessNumber()">
<label for="guess">輸入你的猜測：</label>
<input type="number" id="guess" required min="1" max="100">
<button type="submit">猜測</button>
</form>
<p class="attempts">目前猜測次數：<span id="attempts">0</span></p>
<span class="restart-link" onclick="restartGame()">再玩一次</span>
</div>
<script>
// 遊戲初始設置
let targetNumber = Math.floor(Math.random() * 100) + 1;
let attempts = 0;
function guessNumber() {
const guess = parseInt(document.getElementById("guess").value);
attempts++;
document.getElementById("attempts").innerText = attempts;
// 判斷猜測結果
if (guess > targetNumber) {
document.getElementById("message").innerText = "太高了！試試更小的數字。";
} else if (guess < targetNumber) {
document.getElementById("message").innerText = "太低了！試試更大的數字。";
} else {
document.getElementById("message").innerText = `恭喜你！猜對了！你用了 ${attempts} 次猜對。`;
document.querySelector(".restart-link").style.display = "block";
}
document.getElementById("guess").value = "";
return false; // 防止表單提交刷新頁面
}
// 重置遊戲
function restartGame() {
targetNumber = Math.floor(Math.random() * 100) + 1;
attempts = 0;
document.getElementById("message").innerText = "遊戲開始！我想了一個 1 到 100 之間的數字，試著猜猜看！";
document.getElementById("attempts").innerText = attempts;
document.querySelector(".restart-link").style.display = "none";
}
</script>
</body>
</html>