-
Notifications
You must be signed in to change notification settings - Fork 1
/
Alphabet_matching.html
147 lines (129 loc) · 5.43 KB
/
Alphabet_matching.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字母匹配游戏</title>
<!-- 引入 Tailwind CSS 样式表 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<style>
/* 自定义样式 */
#game-container {
display: grid;
grid-template-columns: repeat(6, 80px); /* 6x6 格式，可根据需要调整尺寸 */
gap: 10px;
}
.card {
width: 80px; /* 根据网格尺寸调整 */
height: 80px; /* 根据网格尺寸调整 */
font-size: 18px;
cursor: pointer;
transition: background-color 0.3s;
}
.card.highlighted {
background-color: #ccc; /* 修改高亮颜色为灰色 */
}
#timer {
text-align: center;
}
</style>
</head>
<body class="bg-gray-200 flex flex-col items-center h-screen">
<h1 class="text-3xl font-semibold mt-4">字母匹配游戏</h1>
<div id="tips" class="text-lg font-bold mt-4">找出相同字母进行匹配。</div>
<div id="timer" class="text-lg font-bold mt-4">计时: 0 秒</div>
<div id="game-container" class="mt-4"></div>
<script>
const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
const cards = [];
let letterIndex = 0; // 用于追踪字母的索引
for (let i = 0; i < 6 * 6 / 2; i++) {
const letter = letters[letterIndex];
cards.push(letter);
cards.push(letter);
letterIndex++;
// 如果字母用完了，重新从头开始
if (letterIndex === letters.length) {
letterIndex = 0;
}
}
let selectedCard = null; // 存储当前已选择的卡片
let matchedPairs = 0;
let timer = 0; // 计时器变量
let timerInterval; // 用于清除计时器的变量
let isMatching = false; // 标志，用于检查是否正在进行匹配动画
function startTimer() {
timerInterval = setInterval(() => {
if (!isMatching) {
timer++;
document.getElementById("timer").textContent = `计时: ${timer} 秒`;
}
}, 1000);
}
function stopTimer() {
clearInterval(timerInterval);
}
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 createCard(value) {
const card = document.createElement("div");
card.className = "card bg-white rounded-lg flex justify-center items-center cursor-pointer";
card.style.fontSize = "18px";
card.style.color = "#000";
card.style.border = "2px solid #000";
card.textContent = value;
card.addEventListener("click", () => {
if (!card.classList.contains("matched") && card !== selectedCard && !isMatching) {
card.classList.add("highlighted");
if (!selectedCard) {
// 如果没有选择的卡片，则将当前卡片存储为已选择的卡片
selectedCard = card;
} else {
// 如果已经有选择的卡片，进行匹配
if (selectedCard.textContent === card.textContent) {
matchedPairs++;
selectedCard.classList.add("matched");
card.classList.add("matched");
selectedCard = null; // 重置已选择的卡片
if (matchedPairs === cards.length / 2) {
stopTimer(); // 停止计时
const timeInSeconds = timer;
alert(`恭喜！您完成了游戏，用时: ${timeInSeconds} 秒。`);
resetGame();
}
} else {
isMatching = true; // 开始匹配动画
setTimeout(() => {
selectedCard.classList.remove("highlighted");
card.classList.remove("highlighted");
selectedCard = null; // 重置已选择的卡片
isMatching = false; // 结束匹配动画
}, 1000);
}
}
}
});
return card;
}
function resetGame() {
selectedCard = null;
matchedPairs = 0;
timer = 0;
document.getElementById("timer").textContent = `计时: ${timer} 秒`;
const gameContainer = document.getElementById("game-container");
gameContainer.innerHTML = "";
shuffleArray(cards);
for (const cardValue of cards) {
const card = createCard(cardValue);
gameContainer.appendChild(card);
}
startTimer(); // 重新开始计时
}
resetGame();
</script>
</body>
</html>