保持整体代码加入结束胜利动画，自动翻开避开正确选项增加错误反馈<!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: 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: #2c3e50;
font-size: 2.8
rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
margin-bottom: 10px;
letter-spacing: 1px;
background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.subtitle {
color: #7f8c8d;
font-size: 1.2
rem;
margin-bottom: 25px;
}
.controls {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 30px;
background: rgba(236, 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: #2c3e50;
font-weight: bold;
font-size: 1.1
rem;
}
.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.1
rem;
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.9
rem;
}
.auto-btn.active {
background: #8e44ad;
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
}
.timer {
font-size: 1.8
rem;
font-weight: bold;
color: #e74c3c;
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.4
rem;
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(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: 15px;
padding: 15px;
}
.card .front {
background: linear-gradient(135deg, #3498db, #2ecc71);
color: white;
transform: rotateY(180deg);
font-size: 1.3
rem;
}
.card .back {
background: white;
border: 3px solid #3498db;
font-size: 1.8
rem;
}
@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, 240, 241, 0.7);
padding: 20px;
border-radius: 15px;
margin-top: 30px;
}
.instructions h3 {
color: #2c3e50;
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.9
rem;
opacity: 0.9;
}
@media (max-width: 768px) {
.game-board {
grid-template-columns: repeat(4, 1fr);
}
h1 {
font-size: 2.2
rem;
}
}
@media (max-width: 480px) {
.game-board {
grid-template-columns: repeat(3, 1fr);
}
.container {
padding: 15px;
}
h1 {
font-size: 1.8
rem;
}
.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">
<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,
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('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 = [...defaultWords];
}
// 更新单词数量显示
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 = null;
gameState.autoFlipInterval = null;
gameState.seconds = 0;
document.getElementById('timer').textContent = '耗时：00:00';
// 重置游戏状态
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: '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.gameStarted || 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().padStart(2, '0')}:${seconds.toString().padStart(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 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('flipped');
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('DOMContentLoaded', initGame);
</script>
</body>
</html>
总结为html整理出整体代码
扫一扫
825
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
