保持整体代码加入结束胜利动画，自动翻开避开正确选项增加错误反馈<!DOCTYPE html>
<html lang="zh
-CN">
<head>
<meta charset="UTF
-8">
<meta name="viewport" content="width=device
-width, initial
-scale=1.0">
<title>单词消消乐
- 自动翻开功能</title>
<style>
* {
margin
: 0;
padding: 0;
box
-sizing
: border
-box;
font
-family
: 'Segoe UI', Tahoma, Geneva, Verdana, sans
-serif;
}
body {
background
: linear
-gradient(135deg, #6a11cb 0%, #2575fc 100%);
min
-height
: 100vh;
padding: 20
px;
display
: flex;
flex
-direction
: column;
align
-items
: center;
justify
-content
: center;
color
: #333;
}
.container {
width
: 95%;
max
-width
: 1200
px;
background
: rgba(255, 255, 255, 0.95);
border
-radius
: 20
px;
padding: 30
px;
box
-shadow
: 0 15
px 30
px rgba(0, 0, 0, 0.2);
position
: relative;
overflow
: hidden;
}
header {
text
-align
: center;
margin
-bottom
: 25
px;
position
: relative;
z
-index
: 1;
}
h1 {
color
: #2c3e50;
font
-size
: 2.8rem;
text
-shadow
: 2
px 2
px 4
px rgba(0, 0, 0, 0.1);
margin
-bottom
: 10
px;
letter
-spacing
: 1
px;
background
: linear
-gradient(90deg, #ff6b6b, #4ecdc4);
-webkit
-background
-clip
: text;
background
-clip
: text;
color
: transparent;
}
.subtitle {
color
: #7f8c8d;
font
-size
: 1.2rem;
margin
-bottom
: 25
px;
}
.controls {
display
: flex;
flex
-wrap
: wrap;
gap
: 20
px;
margin
-bottom
: 30
px;
background
: rgba(236, 2
40, 241, 0.7);
padding: 20
px;
border
-radius
: 15
px;
box
-shadow
: 0 5
px 15
px rgba(0, 0, 0, 0.05);
z
-index
: 1;
position
: relative;
}
.control
-group {
display
: flex;
flex
-direction
: column;
flex
: 1;
min
-width
: 200
px;
}
.control
-group label {
margin
-bottom
: 8
px;
color
: #2c3e50;
font
-weight
: bold;
font
-size
: 1.1rem;
}
.slider
-container {
display
: flex;
align
-items
: center;
gap
: 15
px;
}
input[type="range"] {
flex
: 1;
-webkit
-appearance
: none;
height
: 12
px;
border
-radius
: 10
px;
background
: linear
-gradient(to right, #ff9a9e, #fad0c4);
outline
: none;
}
input[type="range"]
::-webkit
-slider
-thumb {
-webkit
-appearance
: none;
width
: 25
px;
height
: 25
px;
border
-radius
: 50%;
background
: #3498db;
cursor
: pointer;
box
-shadow
: 0 2
px 5
px rgba(0, 0, 0, 0.1);
border
: 3
px solid white;
}
.count
-display {
background
: #3498db;
color
: white;
padding: 5
px 15
px;
border
-radius
: 20
px;
font
-weight
: bold;
min
-width
: 60
px;
text
-align
: center;
}
button {
background
: #3498db;
color
: white;
border
: none;
padding: 12
px 25
px;
border
-radius
: 50
px;
cursor
: pointer;
font
-size
: 1.1rem;
font
-weight
: bold;
transition
: all 0.3s ease;
box
-shadow
: 0 4
px 8
px rgba(52, 152, 219, 0.3);
display
: flex;
align
-items
: center;
justify
-content
: center;
gap
: 8
px;
}
button
:hover {
transform
: translateY(
-3
px);
box
-shadow
: 0 6
px 12
px rgba(52, 152, 219, 0.4);
background
: #2980b9;
}
button
:active {
transform
: translateY(1
px);
}
.auto
-flip
-controls {
display
: flex;
gap
: 10
px;
flex
-wrap
: wrap;
margin
-top
: 15
px;
}
.auto
-btn {
background
: #9b59b6;
padding: 10
px 15
px;
font
-size
: 0.9rem;
}
.auto
-btn.active {
background
: #8e44ad;
box
-shadow
: inset 0 2
px 5
px rgba(0, 0, 0, 0.2);
}
.timer {
font
-size
: 1.8rem;
font
-weight
: bold;
color
: #e74c3c;
text
-align
: center;
margin
: 20
px 0;
background
: rgba(255, 255, 255, 0.8);
padding: 15
px;
border
-radius
: 15
px;
display
: inline-block;
min
-width
: 200
px;
}
.game
-board {
display
: grid;
grid
-template
-columns
: repeat(6, 1fr);
gap
: 15
px;
margin
: 0 auto;
perspective
: 1000
px;
max
-width
: 800
px;
}
.card {
aspect
-ratio
: 1/1;
background
: white;
border
-radius
: 15
px;
display
: flex;
align
-items
: center;
justify
-content
: center;
cursor
: pointer;
position
: relative;
transform
-style
: preserve
-3d;
transition
: transform 0.5s, box
-shadow 0.3s;
box
-shadow
: 0 5
px 15
px rgba(0, 0, 0, 0.1);
font
-size
: 1.4rem;
font
-weight
: bold;
color
: #4a4a4a;
text
-align
: center;
padding: 10
px;
}
.card
:hover {
box
-shadow
: 0 8
px 20
px rgba(0, 0, 0, 0.15);
}
.card.flipped {
transform
: rotateY(180deg);
}
.card.matched {
animation
: matchedAnimation 0.8s forwards;
}
.card .front,
.card .back {
position
: absolute;
width
: 100%;
height
: 100%;
backface
-visibility
: hidden;
display
: flex;
align
-items
: center;
justify
-content
: center;
border
-radius
: 15
px;
padding: 15
px;
}
.card .front {
background
: linear
-gradient(135deg, #3498db, #2ecc71);
color
: white;
transform
: rotateY(180deg);
font
-size
: 1.3rem;
}
.card .back {
background
: white;
border
: 3
px solid #3498db;
font
-size
: 1.8rem;
}
@keyframes matchedAnimation {
0% {
transform
: scale(1);
opacity
: 1;
}
50% {
transform
: scale(1.2);
opacity
: 0.7;
}
100% {
transform
: scale(0);
opacity
: 0;
visibility
: hidden;
}
}
.instructions {
background
: rgba(236, 2
40, 241, 0.7);
padding: 20
px;
border
-radius
: 15
px;
margin
-top
: 30
px;
}
.instructions h3 {
color
: #2c3e50;
margin
-bottom
: 15
px;
text
-align
: center;
}
.instructions
ul {
padding-left
: 20
px;
}
.instructions li {
margin
-bottom
: 10
px;
line
-height
: 1.5;
}
footer {
text
-align
: center;
margin
-top
: 30
px;
color
: #ecf0f1;
font
-size
: 0.9rem;
opacity
: 0.9;
}
@media (max
-width
: 768
px) {
.game
-board {
grid
-template
-columns
: repeat(4, 1fr);
}
h1 {
font
-size
: 2.2rem;
}
}
@media (max
-width
: 480
px) {
.game
-board {
grid
-template
-columns
: repeat(3, 1fr);
}
.container {
padding: 15
px;
}
h1 {
font
-size
: 1.8rem;
}
.auto
-flip
-controls {
flex
-direction
: column;
}
.auto
-btn {
width
: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>单词消消乐</h1>
<p class="subtitle">自动翻开功能演示
- 提升学习体验</p>
</header>
<div class="controls">
<div class="control
-group">
<label for="word
-count">单词数量：</label>
<div class="slider
-container">
<input type="range" id="word
-count" min="3" max="12" step="1" value="6">
<span class="count
-display" id="word
-count
-display">6</span>
</div>
</div>
<div class="control
-group">
<label>自动翻开控制：</label>
<div class="auto
-flip
-controls">
<button id="sequential
-btn" class="auto
-btn">顺序翻开</button>
<button id="random
-btn" class="auto
-btn">随机翻开</button>
<button id="smart
-btn" class="auto
-btn">智能匹配</button>
<button id="stop
-btn" class="auto
-btn">停止自动翻开</button>
</div>
</div>
<div class="control
-group">
<label>游戏控制：</label>
<div style="display
: flex; gap
: 10
px;">
<button id="
start-btn">🎮 开始游戏</button>
<button id="reset
-btn">🔄 重新开始</button>
</div>
</div>
</div>
<div class="timer" id="timer">耗时：00
:00</div>
<div class="game
-board" id="game
-board"></div>
<div class="instructions">
<h3>自动翻开功能说明</h3>
<
ul>
<li><strong>顺序翻开</strong>：按照卡片位置顺序依次翻开单词</li>
<li><strong>随机翻开</strong>：随机选择卡片翻开，展示不同单词</li>
<li><strong>智能匹配</strong>：自动寻找匹配的单词对并翻开</li>
<li><strong>停止自动翻开</strong>：停止所有自动翻开操作，恢复手动模式</li>
</
ul>
</div>
<footer>
<p>单词消消乐游戏
- 自动翻开功能实现 | 提升学习效率</p>
</footer>
</div>
<script>
// 游戏状态变量
let gameState = {
words
: [],
cards
: [],
flippedCards
: [],
matchedPairs
: 0,
totalPairs
: 0,
game
Started
: false,
timer
: n
ull,
seconds
: 0,
wordCount
: 6,
autoFlipInterval
: n
ull,
autoFlipMode
: n
ull
};
//
默认词库
const defa
ultWords = [
["Monday", "星期一"],
["Tuesday", "星期二"],
["Wednesday", "星期三"],
["Thursday", "星期四"],
["Friday", "星期五"],
["Saturday", "星期六"],
["Sunday", "星期天"],
["weekend", "周末"],
["wash", "洗"],
["watch", "看"],
["do", "做，干"],
["read", "看，读"],
["play", "踢，玩，参加"],
["cooking", "烹饪"],
["often", "经常"],
["park", "公园"],
["tired", "疲倦的"],
["sport", "运动"],
["sho
uld", "应该，应当"],
["every", "每一个"],
["day", "日子，天"],
["sched
ule", "日程安排"]
];
// 初始化游戏
function initGame() {
// 事件监听
document.getElementById('word
-count').addEventListener('input', updateWordCountDisplay);
document.getElementById('
start-btn').addEventListener('click',
startGame);
document.getElementById('reset
-btn').addEventListener('click', resetGame);
// 自动翻开按钮事件
document.getElementById('sequential
-btn').addEventListener('click', () =>
startAutoFlip('sequential'));
document.getElementById('random
-btn').addEventListener('click', () =>
startAutoFlip('random'));
document.getElementById('smart
-btn').addEventListener('click', () =>
startAutoFlip('smart'));
document.getElementById('stop
-btn').addEventListener('click', stopAutoFlip);
updateWordCountDisplay();
// 使用
默认词表
gameState.words = [...defa
ultWords];
}
// 更新单词数量显示
function updateWordCountDisplay() {
const slider = document.getElementById('word
-count');
const display = document.getElementById('word
-count
-display');
gameState.wordCount = parseInt(slider.value);
display.textContent = gameState.wordCount;
}
// 开始游戏
function
startGame() {
if (gameState.words.length === 0) {
alert('请先导入词表或使用
默认词表！');
return;
}
// 重置游戏状态
resetGame();
generateCards();
}
// 重置游戏
function resetGame() {
// 清除计时器
和自动翻开
clearInterval(gameState.timer);
clearInterval(gameState.autoFlipInterval);
gameState.timer = n
ull;
gameState.autoFlipInterval = n
ull;
gameState.seconds = 0;
document.getElementById('timer').textContent = '耗时：00
:00';
// 重置游戏状态
gameState.flippedCards = [];
gameState.matchedPairs = 0;
gameState.game
Started = true;
// 生成新卡片
generateCards();
}
// 生成卡片
function generateCards() {
gameState.cards = [];
gameState.matchedPairs = 0;
gameState.totalPairs = Math.min(gameState.wordCount, gameState.words.length);
// 获取单词对
const selectedWords = [];
for (let i = 0; i < gameState.totalPairs; i++) {
if (i < gameState.words.length) {
selectedWords.push(gameState.words[i]);
}
}
// 创建卡片对
selectedWords.forEach(pair => {
gameState.cards.push({
type
: 'word',
content
: pair[0],
pairId
: pair[0] + pair[1],
matched
: false
});
gameState.cards.push({
type
: 'answer',
content
: pair[1],
pairId
: pair[0] + pair[1],
matched
: false
});
});
// 洗牌
shuffleCards(gameState.cards);
// 渲染游戏面板
renderGameBoard();
// 开始计时
startTimer();
}
// 洗牌算法
function shuffleCards(cards) {
for (let i = cards.length
- 1; i > 0; i
--) {
const j = Math.floor(Math.random() * (i + 1));
[cards[i], cards[j]] = [cards[j], cards[i]];
}
}
// 渲染游戏面板
function renderGameBoard() {
const gameBoard = document.getElementById('game
-board');
gameBoard.innerHTML = '';
gameState.cards.forEach((card, index) => {
const cardElement = document.createElement('div');
cardElement.className = 'card';
cardElement.dataset.index = index;
// 添加卡片内容
const back = document.createElement('div');
back.className = 'back';
back.textContent = '?';
const front = document.createElement('div');
front.className = 'front';
front.textContent = card.content;
cardElement.appendChild(back);
cardElement.appendChild(front);
// 添加点击事件
cardElement.addEventListener('click', () => flipCard(cardElement, index));
// 如果已匹配，隐藏卡片
if (card.matched) {
cardElement.classList.add('matched');
}
// 如果已翻开但未匹配，显示正面
else if (gameState.flippedCards.includes(index)) {
cardElement.classList.add('flipped');
}
// 设置随机背景颜色
const colors = ['#ff9ff3', '#1dd1a1', '#5f27cd', '#ff9f43', '#a55c1b', '#2e86de'];
const colorIndex = Math.floor(Math.random() * colors.length);
front.style.background = colors[colorIndex];
gameBoard.appendChild(cardElement);
});
}
// 翻开卡片
function flipCard(cardElement, index) {
// 游戏未开始或已匹配的卡片不能翻开
if (!gameState.game
Started || gameState.cards[index].matched ||
gameState.flippedCards.includes(index) || gameState.flippedCards.length >= 2) {
return;
}
// 翻开卡片
cardElement.classList.add('flipped');
gameState.flippedCards.push(index);
// 检查是否匹配
if (gameState.flippedCards.length === 2) {
setTimeout(checkMatch, 500);
}
}
// 检查匹配
function checkMatch() {
const [index1, index2] = gameState.flippedCards;
const card1 = gameState.cards[index1];
const card2 = gameState.cards[index2];
if (card1.pairId === card2.pairId) {
// 匹配成功
card1.matched = true;
card2.matched = true;
gameState.matchedPairs++;
document.querySelector(`.card[data
-index="${index1}"]`).classList.add('matched');
document.querySelector(`.card[data
-index="${index2}"]`).classList.add('matched');
// 检查游戏是否结束
if (gameState.matchedPairs === gameState.totalPairs) {
endGame();
}
}
// 清空已翻开卡片
gameState.flippedCards = [];
}
// 开始计时
function
startTimer() {
if (gameState.timer) return;
gameState.seconds = 0;
updateTimerDisplay();
gameState.timer = setInterval(() => {
gameState.seconds++;
updateTimerDisplay();
}, 1000);
}
// 更新计时器显示
function updateTimerDisplay() {
const minutes = Math.floor(gameState.seconds / 60);
const seconds = gameState.seconds % 60;
document.getElementById('timer').textContent =
`耗时：${minutes.toString().pad
Start(2, '0')}
:${seconds.toString().pad
Start(2, '0')}`;
}
// 开始自动翻开
function
startAutoFlip(mode) {
// 停止之前的自动翻开
stopAutoFlip();
gameState.autoFlipMode = mode;
// 根据模式设置不同的时间间隔
const interval = mode === 'smart' ? 1500
: 1000;
// 获取所有未匹配的卡片索引
const unmatchedCards = [];
gameState.cards.forEach((card, index) => {
if (!card.matched && !gameState.flippedCards.includes(index)) {
unmatchedCards.push(index);
}
});
if (unmatchedCards.length === 0) return;
// 开始自动翻开
gameState.autoFlipInterval = setInterval(() => {
if (unmatchedCards.length === 0) {
stopAutoFlip();
return;
}
let cardIndex;
// 根据模式选择卡片
if (mode === 'sequential') {
cardIndex = unmatchedCards.shift();
}
else if (mode === 'random') {
const randomIndex = Math.floor(Math.random() * unmatchedCards.length);
cardIndex = unmatchedCards.splice(randomIndex, 1)[0];
}
else if (mode === 'smart') {
// 智能模式：尝试找到匹配对
const res
ult = findSmartPair(unmatchedCards);
if (res
ult) {
// 翻开匹配对
const [card1, card2] = res
ult;
flipCardAutomatically(card1);
setTimeout(() => flipCardAutomatically(card2), 500);
// 从数组中移除
const index1 = unmatchedCards.indexOf(card1);
if (index1 >
-1) unmatchedCards.splice(index1, 1);
const index2 = unmatchedCards.indexOf(card2);
if (index2 >
-1) unmatchedCards.splice(index2, 1);
return;
} else {
// 没有找到匹配对，随机翻开一个
const randomIndex = Math.floor(Math.random() * unmatchedCards.length);
cardIndex = unmatchedCards.splice(randomIndex, 1)[0];
}
}
// 翻开卡片
flipCardAutomatically(cardIndex);
}, interval);
}
// 智能查找匹配对
function findSmartPair(unmatchedCards) {
// 尝试找到一对匹配的卡片
for (let i = 0; i < unmatchedCards.length; i++) {
const cardIndex1 = unmatchedCards[i];
const card1 = gameState.cards[cardIndex1];
for (let j = i + 1; j < unmatchedCards.length; j++) {
const cardIndex2 = unmatchedCards[j];
const card2 = gameState.cards[cardIndex2];
if (card1.pairId === card2.pairId) {
return [cardIndex1, cardIndex2];
}
}
}
return n
ull; // 没有找到匹配对
}
// 自动翻开卡片
function flipCardAutomatically(index) {
const cardElement = document.querySelector(`.card[data
-index="${index}"]`);
if (!cardElement) return;
// 模拟点击翻开卡片
cardElement.classList.add('flipped');
gameState.flippedCards.push(index);
// 检查是否匹配
if (gameState.flippedCards.length === 2) {
setTimeout(checkMatch, 500);
}
}
// 停止自动翻开
function stopAutoFlip() {
if (gameState.autoFlipInterval) {
clearInterval(gameState.autoFlipInterval);
gameState.autoFlipInterval = n
ull;
gameState.autoFlipMode = n
ull;
}
}
// 页面加载完成后初始化游戏
window.addEventListener('DOMContentLoaded', initGame);
</script>
</body>
</html>
总结为html整理出整体代码
博客指出浏览器默认会有边距和填充，除IE浏览器外，ul会自动向右浮动40px。提供了解决方法，一是在当前页面css用*选择器重置所有标签，二是在全局样式里重置，还可定义ul{ overflow：hidden}来解决问题。
扫一扫
2365
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
