保持整体代码加入结束胜利动画，自动翻开避开正确选项增加错误反馈<!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
: &#
39;Segoe UI&#
39;, Tahoma, Geneva, Verdana, sans-serif;
}
body {
background
: linear-gradient
(1
35
deg, #6a11cb 0%, #2575fc 100%
);
min-height
: 100vh;
padding
: 20px;
display
: flex;
flex-direction
: column;
align-items
: center;
justify-content
: center;
color
: #
333;
}
.container {
width
: 95%;
max-width
: 1200px;
background
: rgba
(255, 255, 255, 0.95
);
border-radius
: 20px;
padding
: 30px;
box-shadow
: 0 15px
30px rgba
(0, 0, 0, 0.2
);
position
: relative;
overflow
: hidden;
}
header {
text-align
: center;
margin-bottom
: 25px;
position
: relative;
z-index
: 1;
}
h1 {
color
: #2c
3e50;
font-size
: 2.8rem;
text-shadow
: 2px 2px 4px rgba
(0, 0, 0, 0.1
);
margin-bottom
: 10px;
letter-spacing
: 1px;
background
: linear-gradient
(90
deg, #ff6b6b, #4ecdc4
);
-webkit-background-clip
: text;
background-clip
: text;
color
: transparent;
}
.subtitle {
color
: #7f8c8d;
font-size
: 1.2rem;
margin-bottom
: 25px;
}
.controls {
display
: flex;
flex-wrap
: wrap;
gap
: 20px;
margin-bottom
: 30px;
background
: rgba
(2
36, 240, 241, 0.7
);
padding
: 20px;
border-radius
: 15px;
box-shadow
: 0 5px 15px rgba
(0, 0, 0, 0.05
);
z-index
: 1;
position
: relative;
}
.control-group {
display
: flex;
flex-direction
: column;
flex
: 1;
min-width
: 200px;
}
.control-group label {
margin-bottom
: 8px;
color
: #2c
3e50;
font-weight
: bold;
font-size
: 1.1rem;
}
.slider-container {
display
: flex;
align-items
: center;
gap
: 15px;
}
input[type="range"] {
flex
: 1;
-webkit-appearance
: none;
height
: 12px;
border-radius
: 10px;
background
: linear-gradient
(to right, #ff9a9e, #fad0c4
);
outline
: none;
}
input[type="range"]
::-webkit-slider-thumb {
-webkit-appearance
: none;
width
: 25px;
height
: 25px;
border-radius
: 50%;
background
: #
3498db;
cursor
: pointer;
box-shadow
: 0 2px 5px rgba
(0, 0, 0, 0.1
);
border
: 3px solid white;
}
.count-display {
background
: #
3498db;
color
: white;
padding
: 5px 15px;
border-radius
: 20px;
font-weight
: bold;
min-width
: 60px;
text-align
: center;
}
button {
background
: #
3498db;
color
: white;
border
: none;
padding
: 12px 25px;
border-radius
: 50px;
cursor
: pointer;
font-size
: 1.1rem;
font-weight
: bold;
transition
: all 0.
3s ease;
box-shadow
: 0 4px 8px rgba
(52, 152, 219, 0.
3);
display
: flex;
align-items
: center;
justify-content
: center;
gap
: 8px;
}
button
:hover {
transform: translateY
(-
3px
);
box-shadow
: 0 6px 12px rgba
(52, 152, 219, 0.4
);
background
: #2980b9;
}
button
:active {
transform: translateY
(1px
);
}
.auto-flip-controls {
display
: flex;
gap
: 10px;
flex-wrap
: wrap;
margin-top
: 15px;
}
.auto-btn {
background
: #9b59b6;
padding
: 10px 15px;
font-size
: 0.9rem;
}
.auto-btn.active {
background
: #8e44ad;
box-shadow
: inset 0 2px 5px rgba
(0, 0, 0, 0.2
);
}
.timer {
font-size
: 1.8rem;
font-weight
: bold;
color
: #e74c
3c;
text-align
: center;
margin
: 20px 0;
background
: rgba
(255, 255, 255, 0.8
);
padding
: 15px;
border-radius
: 15px;
display
: inline-block;
min-width
: 200px;
}
.game-board {
display
: grid;
grid-template-columns
: repeat
(6, 1fr
);
gap
: 15px;
margin
: 0 auto;
perspective
: 1000px;
max-width
: 800px;
}
.card {
aspect-ratio
: 1/1;
background
: white;
border-radius
: 15px;
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 5px 15px rgba
(0, 0, 0, 0.1
);
font-size
: 1.4rem;
font-weight
: bold;
color
: #4a4a4a;
text-align
: center;
padding
: 10px;
}
.card
:hover {
box-shadow
: 0 8px 20px rgba
(0, 0, 0, 0.15
);
}
.card.flipped {
transform: rotateY(180
deg);
}
.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
: 15px;
padding
: 15px;
}
.card .front {
background
: linear-gradient
(1
35
deg, #
3498db, #2ecc71
);
color
: white;
transform: rotateY(180
deg);
font-size
: 1.
3rem;
}
.card .back {
background
: white;
border
: 3px 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
(2
36, 240, 241, 0.7
);
padding
: 20px;
border-radius
: 15px;
margin-top
: 30px;
}
.instructions h
3 {
color
: #2c
3e50;
margin-bottom
: 15px;
text-align
: center;
}
.instructions ul {
padding-left
: 20px;
}
.instructions li {
margin-bottom
: 10px;
line-height
: 1.5;
}
footer {
text-align
: center;
margin-top
: 30px;
color
: #ecf0f1;
font-size
: 0.9rem;
opacity
: 0.9;
}
@media
(max-width
: 768px
) {
.game-board {
grid-template-columns
: repeat
(4, 1fr
);
}
h1 {
font-size
: 2.2rem;
}
}
@media
(max-width
: 480px
) {
.game-board {
grid-template-columns
: repeat
(3, 1fr
);
}
.container {
padding
: 15px;
}
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
: 10px;">
<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">
<h
3>自动翻开功能说明</h
3>
<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,
gameStarted
: false,
timer
: null,
seconds
: 0,
wordCount
: 6,
autoFlipInterval
: null,
autoFlipMode
: null
};
// 默认词库
const defaultWords = [
["Monday", "星期一"],
["Tuesday", "星期二"],
["Wednesday", "星期三"],
["Thursday", "星期四"],
["Friday", "星期五"],
["Saturday", "星期六"],
["Sunday", "星期天"],
["weekend", "周末"],
["wash", "洗"],
["watch", "看"],
["do", "做，干"],
["read", "看，读"],
["play", "踢，玩，参加"],
["cooking", "烹饪"],
["often", "经常"],
["park", "公园"],
["tired", "疲倦的"],
["sport", "运动"],
["should", "应该，应当"],
["every", "每一个"],
["day", "日子，天"],
["schedule", "日程安排"]
];
// 初始化游戏
function initGame
() {
// 事件监听
document.getElementById
(&#
39;word-count&#
39;
).addEventListener
(&#
39;input&#
39;, updateWordCountDisplay
);
document.getElementById
(&#
39;start-btn&#
39;
).addEventListener
(&#
39;click&#
39;, startGame
);
document.getElementById
(&#
39;reset-btn&#
39;
).addEventListener
(&#
39;click&#
39;, resetGame
);
// 自动翻开按钮事件
document.getElementById
(&#
39;sequential-btn&#
39;
).addEventListener
(&#
39;click&#
39;,
() => startAutoFlip
(&#
39;sequential&#
39;
));
document.getElementById
(&#
39;random-btn&#
39;
).addEventListener
(&#
39;click&#
39;,
() => startAutoFlip
(&#
39;random&#
39;
));
document.getElementById
(&#
39;smart-btn&#
39;
).addEventListener
(&#
39;click&#
39;,
() => startAutoFlip
(&#
39;smart&#
39;
));
document.getElementById
(&#
39;stop-btn&#
39;
).addEventListener
(&#
39;click&#
39;, stopAutoFlip
);
updateWordCountDisplay
();
// 使用默认词表
gameState.words = [...defaultWords];
}
// 更新单词数量显示
function updateWordCountDisplay
() {
const slider = document.getElementById
(&#
39;word-count&#
39;
);
const display = document.getElementById
(&#
39;word-count-display&#
39;
);
gameState.wordCount = parseInt
(slider.value
);
display.textContent = gameState.wordCount;
}
// 开始游戏
function startGame
() {
if
(gameState.words.length === 0
) {
alert
(&#
39;请先导入词表或使用默认词表！&#
39;
);
return;
}
// 重置游戏状态
resetGame
();
generateCards
();
}
// 重置游戏
function resetGame
() {
// 清除计时器和自动翻开
clearInterval
(gameState.timer
);
clearInterval
(gameState.autoFlipInterval
);
gameState.timer = null;
gameState.autoFlipInterval = null;
gameState.seconds = 0;
document.getElementById
(&#
39;timer&#
39;
).textContent = &#
39;耗时：00
:00&#
39;;
// 重置游戏状态
gameState.flippedCards = [];
gameState.matchedPairs = 0;
gameState.gameStarted = 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
: &#
39;word&#
39;,
content
: pair[0],
pairId
: pair[0] + pair[1],
matched
: false
}
);
gameState.cards.push
({
type
: &#
39;answer&#
39;,
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
(&#
39;game-board&#
39;
);
gameBoard.innerHTML = &#
39;&#
39;;
gameState.cards.forEach
((card, index
) => {
const cardElement = document.createElement
(&#
39;div&#
39;
);
cardElement.className = &#
39;card&#
39;;
cardElement.dataset.index = index;
// 添加卡片内容
const back = document.createElement
(&#
39;div&#
39;
);
back.className = &#
39;back&#
39;;
back.textContent = &#
39;?&#
39;;
const front = document.createElement
(&#
39;div&#
39;
);
front.className = &#
39;front&#
39;;
front.textContent = card.content;
cardElement.appendChild
(back
);
cardElement.appendChild
(front
);
// 添加点击事件
cardElement.addEventListener
(&#
39;click&#
39;,
() => flipCard
(cardElement, index
));
// 如果已匹配，隐藏卡片
if
(card.matched
) {
cardElement.classList.add
(&#
39;matched&#
39;
);
}
// 如果已翻开但未匹配，显示正面
else if
(gameState.flippedCards.includes
(index
)) {
cardElement.classList.add
(&#
39;flipped&#
39;
);
}
// 设置随机背景颜色
const colors = [&#
39;#ff9ff
3&#
39;, &#
39;#1dd1a1&#
39;, &#
39;#5f27cd&#
39;, &#
39;#ff9f4
3&#
39;, &#
39;#a55c1b&#
39;, &#
39;#2e86de&#
39;];
const colorIndex = Math.floor
(Math.random
() * colors.length
);
front.style.background = colors[colorIndex];
gameBoard.appendChild
(cardElement
);
}
);
}
// 翻开卡片
function flipCard
(cardElement, index
) {
// 游戏未开始或已匹配的卡片不能翻开
if
(!gameState.gameStarted || gameState.cards[index].matched ||
gameState.flippedCards.includes
(index
) || gameState.flippedCards.length >= 2
) {
return;
}
// 翻开卡片
cardElement.classList.add
(&#
39;flipped&#
39;
);
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
(&#
39;matched&#
39;
);
document.querySelector
(`.card[data-index="${index2}"]`
).classList.add
(&#
39;matched&#
39;
);
// 检查游戏是否结束
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
(&#
39;timer&#
39;
).textContent =
`耗时：${minutes.toString
().padStart
(2, &#
39;0&#
39;
)}
:${seconds.toString
().padStart
(2, &#
39;0&#
39;
)}`;
}
// 开始自动翻开
function startAutoFlip
(mode
) {
// 停止之前的自动翻开
stopAutoFlip
();
gameState.autoFlipMode = mode;
// 根据模式设置不同的时间间隔
const interval = mode === &#
39;smart&#
39; ? 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 === &#
39;sequential&#
39;
) {
cardIndex = unmatchedCards.shift
();
}
else if
(mode === &#
39;random&#
39;
) {
const randomIndex = Math.floor
(Math.random
() * unmatchedCards.length
);
cardIndex = unmatchedCards.splice
(randomIndex, 1
)[0];
}
else if
(mode === &#
39;smart&#
39;
) {
// 智能模式：尝试找到匹配对
const result = findSmartPair
(unmatchedCards
);
if
(result
) {
// 翻开匹配对
const [card1, card2] = result;
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 null; // 没有找到匹配对
}
// 自动翻开卡片
function flipCardAutomatically
(index
) {
const cardElement = document.querySelector
(`.card[data-index="${index}"]`
);
if
(!cardElement
) return;
// 模拟点击翻开卡片
cardElement.classList.add
(&#
39;flipped&#
39;
);
gameState.flippedCards.push
(index
);
// 检查是否匹配
if
(gameState.flippedCards.length === 2
) {
setTimeout
(checkMatch, 500
);
}
}
// 停止自动翻开
function stopAutoFlip
() {
if
(gameState.autoFlipInterval
) {
clearInterval
(gameState.autoFlipInterval
);
gameState.autoFlipInterval = null;
gameState.autoFlipMode = null;
}
}
// 页面加载完成后初始化游戏
window.addEventListener
(&#
39;DOMContentLoaded&#
39;, initGame
);
</script>
</body>
</html>
总结为html整理出整体代码
在iPhone移动设备上，使用CSS过渡效果时遇到元素闪烁的问题，原因是创建了新的层叠上下文。解决方案包括使用transform:translate3d(0,0,0)开启硬件加速，避免transform:translateZ()带来的复杂性。此问题主要影响基于webkit核心的浏览器。
扫一扫
1345
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
