-
Notifications
You must be signed in to change notification settings - Fork 0
/
schulteGrid.html
266 lines (241 loc) · 9.16 KB
/
schulteGrid.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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>舒尔特方格训练游戏</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<h1>舒尔特方格游戏</h1>
<div id="info">
<p>当前关卡: <span id="level">1</span></p>
<p>剩余时间: <span id="time">120</span> 秒</p>
<p>本轮耗时: <span id="roundTime">0</span> 秒</p>
</div>
<div id="gameBoard"></div>
<div id="timeRecords">
<h2>用时记录</h2>
<ul id="timeList"></ul>
</div>
<div class="popup" id="popup">
<p>欢迎来到舒尔特方格专注力训练游戏！请按数字大小，从小到大的点击方格。点击开始按钮开始游戏。</p>
<button id="startBtn">开始</button>
</div>
<div class="popup" id="endPopup" style="display: none;">
<p>游戏结束！你通过了 <span id="finalLevel"></span> 关</p>
<ul id="finalTimeList"></ul>
<button id="exitBtn">离开</button>
<button id="restartBtn">再来</button>
</div>
<audio id="levelUpSound" src="assets/sounds/cute-level-up-2.mp3"></audio>
<audio id="winningSound" src="assets/sounds/winning.mp3"></audio>
<script>
let level = 1; // 当前关卡
let correctNumber = 1; // 当前正确的数字
let gridSize = 3; // 初始为3x3
let timeLeft = 120; // 剩余时间
let totalTime = 120; // 总时间
let roundTime = 0; // 本轮耗时
let gameBoard = document.getElementById('gameBoard'); // 游戏板
let roundTimer; // 本轮计时器
const popup = document.getElementById('popup');
const startBtn = document.getElementById('startBtn');
const endPopup = document.getElementById('endPopup');
const exitBtn = document.getElementById('exitBtn');
const restartBtn = document.getElementById('restartBtn');
const levelUpSound = document.getElementById('levelUpSound'); // 获取音效元素
const winningSound = document.getElementById('winningSound'); // 获取游戏结束音效元素
// 点击开始按钮后关闭气泡窗口并开始游戏计时
startBtn.addEventListener('click', () => {
popup.style.display = 'none';
startGame();
});
// 点击离开按钮跳转到index.html页面
exitBtn.addEventListener('click', () => {
window.location.href = 'index.html';
});
// 点击重���开始按钮重新开始游戏
restartBtn.addEventListener('click', () => {
endPopup.style.display = 'none';
resetGame();
});
let timeRecords = []; // 用��记录数组
// 更新关卡
function updateLevel() {
// 记录当前关卡的用时
timeRecords.push(roundTime);
updateTimeList();
level++;
document.getElementById('level').textContent = level;
// 播放音效
levelUpSound.play();
// 根据关卡调整网格大小
if (level % 2 === 1 && level > 2) {
if (gridSize === 5) {
gridSize = 5;
} else {
gridSize++;
}
} else if (gridSize < 5) {
gridSize++;
}
correctNumber = 1; // 重置点击顺序
roundTime = 0; // 重置本轮耗时
document.getElementById('roundTime').textContent = roundTime;
}
// 更新用时记录列表
function updateTimeList() {
const timeList = document.getElementById('timeList');
timeList.innerHTML = ''; // 清空列表
timeRecords.forEach((time, index) => {
const listItem = document.createElement('li');
listItem.textContent = `关卡 ${index + 1}: ${time} 秒`;
timeList.appendChild(listItem);
});
}
// 更新游戏结束时的用时记录列表
function updateFinalTimeList() {
const finalTimeList = document.getElementById('finalTimeList');
finalTimeList.innerHTML = ''; // 清空列表
timeRecords.forEach((time, index) => {
const listItem = document.createElement('li');
listItem.textContent = `关卡 ${index + 1}: ${time} 秒`;
finalTimeList.appendChild(listItem);
});
}
let remainingNumbers = []; // 用于存储剩余的数字
// 创建游戏板
function createBoard() {
gameBoard.innerHTML = '';
gameBoard.style.gridTemplateColumns = `repeat(${gridSize}, 1fr)`;
gameBoard.style.gridTemplateRows = `repeat(${gridSize}, 1fr)`;
let numbers = [];
// 根据关卡生成数字
if (gridSize === 5 && level > 4) {
numbers = generateRandomNumbers(99);
} else {
numbers = generateNumbers(gridSize);
}
correctNumber = Math.min(...numbers); // 设置 correctNumber 为最小的数字
remainingNumbers = [...numbers].sort((a, b) => a - b); // 初始化剩余数字并排序
shuffleArray(numbers);
// 创建网格单元格
for (let i = 0; i < gridSize * gridSize; i++) {
const cell = document.createElement('div');
cell.classList.add('grid-cell');
cell.textContent = numbers[i];
cell.dataset.number = numbers[i];
cell.style.fontSize = `${Math.min(gameBoard.clientWidth, gameBoard.clientHeight) / gridSize / 3}px`; // 动态调整字体大小
cell.addEventListener('click', () => handleCellClick(cell));
gameBoard.appendChild(cell);
}
}
// 生成顺序数字
function generateNumbers(size) {
const numbers = [];
for (let i = 1; i <= size * size; i++) {
numbers.push(i);
}
return numbers;
}
// 生成随机数字
function generateRandomNumbers(maxNumber) {
const numbers = [];
while (numbers.length < 25) {
const randomNum = Math.floor(Math.random() * maxNumber) + 1;
if (!numbers.includes(randomNum)) {
numbers.push(randomNum);
}
}
return numbers;
}
// 打乱数组
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
}
// 处理单元格点击事件
function handleCellClick(cell) {
const clickedNumber = parseInt(cell.dataset.number);
if (clickedNumber < correctNumber) {
return;
}
if (clickedNumber === correctNumber) {
cell.classList.add('completed');
cell.style.backgroundColor = '#d3d3d3'; // 确保正确点击时背景颜色被覆盖
remainingNumbers.shift(); // 移除已点击的最小数字
correctNumber = remainingNumbers[0]; // 更新 correctNumber 为下一个最小数字
if (remainingNumbers.length === 0) {
setTimeout(() => {
updateLevel();
createBoard();
}, 500);
}
} else {
cell.style.backgroundColor = 'red';
setTimeout(() => {
cell.style.backgroundColor = '#87CEEB'; // 重置为原始颜色
}, 500);
}
}
// 更新剩余时间
function updateTime() {
if (timeLeft > 0) {
timeLeft--;
document.getElementById('time').textContent = timeLeft;
setTimeout(updateTime, 1000);
} else {
winningSound.play();
document.getElementById('finalLevel').textContent = level;
updateFinalTimeList();
endPopup.style.display = 'block';
}
}
// 更新本轮耗时
function updateRoundTime() {
roundTime++;
document.getElementById('roundTime').textContent = roundTime;
roundTimer = setTimeout(updateRoundTime, 1000);
}
// 动态调整游戏板大小
function adjustGameBoardSize() {
const gameBoard = document.getElementById('gameBoard');
const infoHeight = document.getElementById('info').offsetHeight;
const timeRecordsHeight = document.getElementById('timeRecords').offsetHeight;
const availableHeight = window.innerHeight - infoHeight - timeRecordsHeight - 40; // 40 for margins
const availableWidth = window.innerWidth - 40; // 40 for margins
const size = Math.min(availableHeight, availableWidth);
gameBoard.style.width = `${size}px`;
gameBoard.style.height = `${size}px`;
}
// 开始游戏
function startGame() {
adjustGameBoardSize();
createBoard();
updateTime();
updateRoundTime();
}
// 重置游戏
function resetGame() {
level = 1;
correctNumber = 1;
gridSize = 3;
timeLeft = 120;
roundTime = 0;
timeRecords = [];
document.getElementById('level').textContent = level;
document.getElementById('time').textContent = timeLeft;
document.getElementById('roundTime').textContent = roundTime;
updateTimeList();
startGame();
}
// 窗口大小变化时调整游戏板大小
window.addEventListener('resize', adjustGameBoardSize);
// 初始调整游戏板大小
adjustGameBoardSize();
</script>
</body>
</html>