当前位置：首页 > news >正文

儿童趣味记忆配对游戏

news 2025/7/7 8:07:32

儿童趣味记忆配对游戏

将设计一个适合6岁以下儿童的记忆配对游戏，包含可爱的动物图案、简单操作和丰富的视觉反馈。
在这里插入图片描述

设计思路

使用明亮友好的色彩方案
采用大尺寸卡片方便儿童点击
添加成功动画和音效反馈
实现简单的游戏进度指示
添加游戏完成庆祝动画

下面是完整的实现代码：

<!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: 'Comic Sans MS', 'Marker Felt', '华文圆体', cursive;}body {background: linear-gradient(135deg, #6ecbf5 0%, #e4f5fc 100%);min-height: 100vh;display: flex;flex-direction: column;align-items: center;padding: 20px;overflow-x: hidden;}header {text-align: center;margin: 15px 0 30px;width: 100%;}h1 {color: #ff6b6b;font-size: 2.8rem;text-shadow: 3px 3px 0 #ffd166;margin-bottom: 10px;letter-spacing: 1px;}.subtitle {color: #4a4a9c;font-size: 1.5rem;margin-bottom: 20px;}.game-container {display: flex;flex-direction: column;align-items: center;max-width: 800px;width: 100%;}.stats {display: flex;justify-content: space-around;width: 100%;background: rgba(255, 255, 255, 0.7);padding: 15px;border-radius: 20px;margin-bottom: 25px;box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);}.stat-box {text-align: center;padding: 10px 20px;background: #ffd166;border-radius: 15px;min-width: 120px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}.stat-value {font-size: 2.2rem;font-weight: bold;color: #ef476f;}.stat-label {font-size: 1.2rem;color: #4a4a9c;}.game-board {display: grid;grid-template-columns: repeat(4, 1fr);gap: 15px;width: 100%;max-width: 600px;margin: 0 auto 30px;perspective: 1000px;}.card {height: 120px;position: relative;transform-style: preserve-3d;transition: transform 0.6s;cursor: pointer;border-radius: 20px;box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);}.card.flipped {transform: rotateY(180deg);}.card.matched .card-front {background: #06d6a0;}.card-face {position: absolute;width: 100%;height: 100%;backface-visibility: hidden;display: flex;justify-content: center;align-items: center;border-radius: 20px;overflow: hidden;}.card-back {background: radial-gradient(circle, #ff6b6b, #ef476f);transform: rotateY(0deg);}.card-back::before {content: "?";font-size: 4rem;color: white;text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);}.card-front {background: white;transform: rotateY(180deg);padding: 10px;}.card-front img {width: 80%;height: auto;max-height: 90px;object-fit: contain;}.controls {display: flex;gap: 20px;margin-top: 15px;}button {background: #ffd166;border: none;padding: 15px 30px;font-size: 1.4rem;border-radius: 50px;cursor: pointer;color: #4a4a9c;font-weight: bold;box-shadow: 0 6px 0 #ffb700;transition: all 0.2s;min-width: 180px;}button:hover {background: #ffd880;transform: translateY(2px);box-shadow: 0 4px 0 #ffb700;}button:active {transform: translateY(6px);box-shadow: none;}.instructions {background: rgba(255, 255, 255, 0.9);border-radius: 20px;padding: 20px;margin: 30px 0;width: 100%;max-width: 600px;box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);}.instructions h2 {color: #118ab2;text-align: center;margin-bottom: 15px;font-size: 1.8rem;}.instructions ol {padding-left: 25px;font-size: 1.3rem;line-height: 1.6;color: #4a4a9c;}.instructions li {margin-bottom: 12px;}.celebration {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.7);display: flex;flex-direction: column;justify-content: center;align-items: center;z-index: 100;opacity: 0;pointer-events: none;transition: opacity 0.5s;}.celebration.show {opacity: 1;pointer-events: all;}.celebration-content {background: white;padding: 40px;border-radius: 30px;text-align: center;max-width: 90%;box-shadow: 0 0 50px rgba(255, 255, 255, 0.5);}.celebration h2 {color: #ef476f;font-size: 3.5rem;margin-bottom: 20px;}.celebration p {font-size: 2rem;color: #4a4a9c;margin-bottom: 30px;}.confetti {position: absolute;width: 15px;height: 15px;background: #ffd166;animation: fall linear forwards;}@keyframes fall {to {transform: translateY(100vh) rotate(360deg);}}@media (max-width: 600px) {.game-board {grid-template-columns: repeat(3, 1fr);gap: 10px;}.card {height: 100px;}h1 {font-size: 2.2rem;}.subtitle {font-size: 1.2rem;}button {font-size: 1.2rem;padding: 12px 20px;min-width: 140px;}}</style>
</head>
<body><header><h1>动物记忆配对游戏</h1><div class="subtitle">找出所有相同的动物朋友！</div></header><div class="game-container"><div class="stats"><div class="stat-box"><div class="stat-value" id="moves">0</div><div class="stat-label">步数</div></div><div class="stat-box"><div class="stat-value" id="pairs">0</div><div class="stat-label">已配对</div></div><div class="stat-box"><div class="stat-value" id="timer">0</div><div class="stat-label">秒</div></div></div><div class="game-board" id="game-board"></div><div class="controls"><button id="restart-btn">重新开始</button><button id="help-btn">游戏说明</button></div></div><div class="instructions"><h2>游戏玩法</h2><ol><li>点击卡片，看看是什么动物</li><li>再点击另一张卡片，尝试找到相同的动物</li><li>如果两张卡片相同，它们会保持翻开</li><li>如果两张卡片不同，它们会翻回去</li><li>记住动物的位置，尽快找到所有配对！</li></ol></div><div class="celebration" id="celebration"><div class="celebration-content"><h2>太棒了！</h2><p>你找到了所有动物朋友！</p><button id="play-again">再玩一次</button></div></div><script>document.addEventListener('DOMContentLoaded', () => {// 游戏配置const animals = ['🐶', '🐱', '🐰', '🐻', '🐯', '🦁', '🐮', '🐷'];const cardValues = [...animals, ...animals];let flippedCards = [];let matchedPairs = 0;let moves = 0;let timer = 0;let timerInterval;let gameStarted = false;const gameBoard = document.getElementById('game-board');const movesElement = document.getElementById('moves');const pairsElement = document.getElementById('pairs');const timerElement = document.getElementById('timer');const restartBtn = document.getElementById('restart-btn');const playAgainBtn = document.getElementById('play-again');const celebration = document.getElementById('celebration');// 初始化游戏function initGame() {gameBoard.innerHTML = '';flippedCards = [];matchedPairs = 0;moves = 0;timer = 0;gameStarted = false;movesElement.textContent = moves;pairsElement.textContent = matchedPairs;timerElement.textContent = timer;clearInterval(timerInterval);// 洗牌const shuffledCards = [...cardValues].sort(() => Math.random() - 0.5);// 创建卡片shuffledCards.forEach((value, index) => {const card = document.createElement('div');card.classList.add('card');card.dataset.value = value;card.innerHTML = `<div class="card-face card-back"></div><div class="card-face card-front"><div style="font-size: 4rem;">${value}</div></div>`;card.addEventListener('click', flipCard);gameBoard.appendChild(card);});}// 翻牌函数function flipCard() {// 如果游戏未开始，启动计时器if (!gameStarted) {startTimer();gameStarted = true;}// 如果已经翻开了两张牌或这张牌已经匹配，则返回if (flippedCards.length === 2 || this.classList.contains('flipped') || this.classList.contains('matched')) {return;}// 翻牌this.classList.add('flipped');flippedCards.push(this);// 播放音效playSound('flip');// 如果翻开了两张牌，检查是否匹配if (flippedCards.length === 2) {moves++;movesElement.textContent = moves;const card1 = flippedCards[0];const card2 = flippedCards[1];if (card1.dataset.value === card2.dataset.value) {// 匹配成功card1.classList.add('matched');card2.classList.add('matched');matchedPairs++;pairsElement.textContent = matchedPairs;playSound('match');flippedCards = [];// 检查游戏是否结束if (matchedPairs === animals.length) {endGame();}} else {// 匹配失败setTimeout(() => {card1.classList.remove('flipped');card2.classList.remove('flipped');flippedCards = [];}, 1000);}}}// 开始计时器function startTimer() {clearInterval(timerInterval);timerInterval = setInterval(() => {timer++;timerElement.textContent = timer;}, 1000);}// 结束游戏function endGame() {clearInterval(timerInterval);// 创建庆祝效果createConfetti();// 显示庆祝画面setTimeout(() => {celebration.classList.add('show');}, 1000);}// 创建五彩纸屑效果function createConfetti() {const colors = ['#ff6b6b', '#ffd166', '#06d6a0', '#118ab2', '#ef476f'];for (let i = 0; i < 150; i++) {const confetti = document.createElement('div');confetti.classList.add('confetti');// 随机位置const posX = Math.random() * window.innerWidth;const posY = Math.random() * -100;// 随机大小const size = Math.random() * 10 + 5;// 随机颜色const color = colors[Math.floor(Math.random() * colors.length)];// 随机动画时长const duration = Math.random() * 3 + 2;// 随机延迟const delay = Math.random() * 2;confetti.style.left = `${posX}px`;confetti.style.top = `${posY}px`;confetti.style.width = `${size}px`;confetti.style.height = `${size}px`;confetti.style.backgroundColor = color;confetti.style.animation = `fall ${duration}s linear ${delay}s forwards`;document.body.appendChild(confetti);// 动画结束后移除元素setTimeout(() => {confetti.remove();}, (duration + delay) * 1000);}playSound('win');}// 播放音效function playSound(type) {try {const audioContext = new (window.AudioContext || window.webkitAudioContext)();let oscillator = audioContext.createOscillator();let gainNode = audioContext.createGain();oscillator.connect(gainNode);gainNode.connect(audioContext.destination);// 根据不同事件设置不同音效switch(type) {case 'flip':oscillator.type = 'sine';oscillator.frequency.setValueAtTime(523.25, audioContext.currentTime); // C5gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);break;case 'match':oscillator.type = 'sine';oscillator.frequency.setValueAtTime(659.25, audioContext.currentTime); // E5gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);break;case 'win':// 播放一个简单的胜利旋律const melody = [{note: 784.00, duration: 0.2}, // G5{note: 880.00, duration: 0.2}, // A5{note: 987.77, duration: 0.4}  // B5];let time = audioContext.currentTime;melody.forEach(tone => {let oscillator = audioContext.createOscillator();let gainNode = audioContext.createGain();oscillator.connect(gainNode);gainNode.connect(audioContext.destination);oscillator.type = 'triangle';oscillator.frequency.setValueAtTime(tone.note, time);gainNode.gain.setValueAtTime(0.3, time);gainNode.gain.exponentialRampToValueAtTime(0.01, time + tone.duration);oscillator.start(time);oscillator.stop(time + tone.duration);time += tone.duration;});return;}oscillator.start();gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.3);oscillator.stop(audioContext.currentTime + 0.3);} catch(e) {console.log("音频播放失败:", e);}}// 事件监听器restartBtn.addEventListener('click', initGame);playAgainBtn.addEventListener('click', () => {celebration.classList.remove('show');initGame();});// 初始游戏initGame();});</script>
</body>
</html>