本示例代码来源于互联网，仅供学习交流使用，不作任何商业用途。若因内容涉及版权或其它问题，请及时联系作者或本站进行删除，我们对此不承担任何法律责任。
效果
代码
<!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>
body {
font-family: 'Arial Rounded MT Bold', 'Arial', sans-serif;
background-color: #FFF8F0;
margin: 0;
padding: 20px;
text-align: center;
}
.header {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 30px;
}
h1 {
color: #FF9A76;
font-size: 2.5rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
margin-right: 20px;
}
.game-icon {
width: 60px;
height: 60px;
}
.game-board {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 15px;
max-width: 900px;
margin: 0 auto;
}
.card {
height: 120px;
background-color: #FFDAB9;
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-weight: bold;
color: #5E3023;
cursor: pointer;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
position: relative;
transform-style: preserve-3d;
perspective: 1000px;
}
.card:hover {
transform: scale(1.05);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
.card.flipped {
background-color: #FFF;
transform: rotateY(180deg);
}
.card .front, .card .back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: flex;
justify-content: center;
align-items: center;
border-radius: 15px;
}
.card .front {
background-color: #FFDAB9;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><text x="50%" y="50%" font-family="Arial" font-size="24" fill="%235E3023" text-anchor="middle" dominant-baseline="middle"></text></svg>');
background-size: 50%;
background-repeat: no-repeat;
background-position: center;
}
.card .back {
background-color: #FFF;
transform: rotateY(180deg);
font-size: 40px;
}
.congrats {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 218, 185, 0.9);
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 100;
}
.congrats h2 {
color: #FF6B6B;
font-size: 3rem;
margin-bottom: 30px;
text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
}
.emoji {
font-size: 60px;
margin: 10px;
animation: bounce 0.5s infinite alternate;
}
@keyframes bounce {
from { transform: translateY(0); }
to { transform: translateY(-20px); }
}
.emoji:nth-child(2) { animation-delay: 0.1s; }
.emoji:nth-child(3) { animation-delay: 0.2s; }
.emoji:nth-child(4) { animation-delay: 0.3s; }
.emoji:nth-child(5) { animation-delay: 0.4s; }
</style>
</head>
<body>
<div class="header">
<h1>翻翻乐</h1>
<svg class="game-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path fill="#FF9A76" d="M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-4.48,10-10S17.52,2,12,2z M12,20c-4.41,0-8-3.59-8-8s3.59-8,8-8 s8,3.59,8,8S16.41,20,12,20z"/>
<path fill="#FF9A76" d="M12,10c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S13.1,10,12,10z"/>
<path fill="#FF9A76" d="M16.5,7.5C16.5,6.67,15.83,6,15,6H9C8.17,6,7.5,6.67,7.5,7.5S8.17,9,9,9h6C15.83,9,16.5,8.33,16.5,7.5z"/>
<path fill="#FF9A76" d="M16.5,16.5c0-0.83-0.67-1.5-1.5-1.5H9c-0.83,0-1.5,0.67-1.5,1.5S8.17,18,9,18h6 C15.83,18,16.5,17.33,16.5,16.5z"/>
</svg>
</div>
<div class="game-board" id="gameBoard"></div>
<div class="congrats" id="congrats">
<h2>恭喜你挑战成功！</h2>
<div>
<span class="emoji">🎉</span>
<span class="emoji">🥳</span>
<span class="emoji">👏</span>
<span class="emoji">🎊</span>
<span class="emoji">👍</span>
</div>
</div>
<audio id="celebrationSound" src="data:audio/mpeg;base64,SUQzBAAAAAABEVRYWFgAAAAtAAADY29tbWVudABCaWdTb3VuZEJhbmsuY29tIC8gTGFTb25vdGhlcXVlLm9yZwBURU5DAAAAHQAAA1N3aXRjaCBQbHVzIMKpIE5DSCBTb2Z0d2FyZQBUSVQyAAAABgAAAzIyMzUAVFNTRQAAAA8AAANMYXZmNTcuODMuMTAwAAAAAAAAAAAAAAD/80DEAAAAA0gAAAAATEFNRTMuMTAwVVVVVVVVVVVVVUxBTUUzLjEwMFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVf/zQsRbAAADSAAAAABVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVf/zQMSkAAADSAAAAABVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV" preload="auto"></audio>
<script>
document.addEventListener('DOMContentLoaded', () => {
const items = [
'🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼', '🐨', '🐯',
'🌻', '🌹', '🌵', '🌴', '🍀', '🍁', '🍄', '🌾', '🌺', '🌼'
];
// 每种物品需要两张卡片
const gameItems = [...items, ...items];
// 洗牌函数
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]];
}
return array;
}
const shuffledItems = shuffleArray([...gameItems]);
const gameBoard = document.getElementById('gameBoard');
let flippedCards = [];
let matchedPairs = 0;
// 创建卡片
shuffledItems.forEach((item, index) => {
const card = document.createElement('div');
card.className = 'card';
card.dataset.index = index;
card.dataset.item = item;
const front = document.createElement('div');
front.className = 'front';
front.textContent = index + 1; // 这里直接显示数字，没有#
const back = document.createElement('div');
back.className = 'back';
back.textContent = item;
card.appendChild(front);
card.appendChild(back);
card.addEventListener('click', flipCard);
gameBoard.appendChild(card);
});
function flipCard() {
// 如果已经翻转或已经匹配，则不做任何操作
if (this.classList.contains('flipped') || flippedCards.length >= 2) {
return;
}
this.classList.add('flipped');
flippedCards.push(this);
// 如果翻转了两张卡片，检查是否匹配
if (flippedCards.length === 2) {
const [card1, card2] = flippedCards;
if (card1.dataset.item === card2.dataset.item) {
// 匹配成功
matchedPairs++;
flippedCards = [];
// 检查游戏是否结束
if (matchedPairs === items.length) {
setTimeout(() => {
document.getElementById('congrats').style.display = 'flex';
document.getElementById('celebrationSound').play();
}, 500);
}
} else {
// 不匹配，翻回去
setTimeout(() => {
card1.classList.remove('flipped');
card2.classList.remove('flipped');
flippedCards = [];
}, 1000);
}
}
}
// 重新开始游戏
document.getElementById('congrats').addEventListener('click', () => {
location.reload();
});
});
</script>
</body>
</html>