293 lines
11 KiB
HTML
293 lines
11 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh-CN">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>水果数字比较大闯关</title>
|
||
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
||
|
|
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
||
|
|
|
||
|
|
<!-- 引入后端集成脚本 -->
|
||
|
|
<script src="../../js/apiService.js"></script>
|
||
|
|
<script src="../../js/dataManager.js"></script>
|
||
|
|
<script src="../../js/userManager.js"></script>
|
||
|
|
<script src="../../js/accessTracker.js"></script>
|
||
|
|
<script src="../../js/gameTracker.js"></script>
|
||
|
|
<script src="../../js/gameDataLogger.js"></script>
|
||
|
|
<script>
|
||
|
|
tailwind.config = {
|
||
|
|
theme: {
|
||
|
|
extend: {
|
||
|
|
colors: {
|
||
|
|
primary: '#3B82F6',
|
||
|
|
secondary: '#EC4899',
|
||
|
|
success: '#10B981',
|
||
|
|
danger: '#EF4444',
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body class="bg-gradient-to-br from-green-50 to-yellow-50 min-h-screen font-sans">
|
||
|
|
<div class="container mx-auto px-4 py-8 max-w-3xl">
|
||
|
|
<header class="text-center mb-6">
|
||
|
|
<h1 class="text-3xl font-bold text-primary mb-2">水果数字比较大闯关</h1>
|
||
|
|
<p class="text-neutral">选择正确的比较符号</p>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<main class="bg-white rounded-xl shadow-lg p-6 mb-8">
|
||
|
|
<div class="flex justify-between mb-6">
|
||
|
|
<div class="bg-primary/10 rounded-lg p-2">
|
||
|
|
<span class="font-bold">得分: <span id="score">0</span></span>
|
||
|
|
</div>
|
||
|
|
<div class="bg-secondary/10 rounded-lg p-2">
|
||
|
|
<span class="font-bold">关卡: <span id="level">1</span></span>
|
||
|
|
</div>
|
||
|
|
<button id="toggle-voice" class="bg-gray-200 hover:bg-gray-300 p-2 rounded-full shadow-sm">
|
||
|
|
<i class="fa fa-volume-up text-gray-600"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
|
||
|
|
<div id="left-card" class="bg-green-50 rounded-lg p-4 shadow-md border-2 border-green-200">
|
||
|
|
<div class="text-center text-xl font-bold text-green-600 mb-3">左边</div>
|
||
|
|
<div id="left-fruits" class="grid grid-cols-3 gap-2 justify-items-center mb-3"></div>
|
||
|
|
<div class="text-center text-2xl font-bold" id="left-number">?</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="right-card" class="bg-orange-50 rounded-lg p-4 shadow-md border-2 border-orange-200">
|
||
|
|
<div class="text-center text-xl font-bold text-orange-600 mb-3">右边</div>
|
||
|
|
<div id="right-fruits" class="grid grid-cols-3 gap-2 justify-items-center mb-3"></div>
|
||
|
|
<div class="text-center text-2xl font-bold" id="right-number">?</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="flex justify-center gap-3 mb-6">
|
||
|
|
<button id="less-than"
|
||
|
|
class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-6 rounded-full shadow-md">
|
||
|
|
<i class="fa fa-chevron-left"></i>
|
||
|
|
</button>
|
||
|
|
<button id="equal"
|
||
|
|
class="bg-purple-500 hover:bg-purple-600 text-white font-bold py-2 px-6 rounded-full shadow-md">
|
||
|
|
=
|
||
|
|
</button>
|
||
|
|
<button id="greater-than"
|
||
|
|
class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-6 rounded-full shadow-md">
|
||
|
|
<i class="fa fa-chevron-right"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="feedback" class="text-center text-xl font-bold h-8 mb-6"></div>
|
||
|
|
|
||
|
|
<div class="flex justify-center gap-4">
|
||
|
|
<button id="start-game"
|
||
|
|
class="bg-primary hover:bg-primary/90 text-white font-bold py-2 px-6 rounded-full shadow-md flex items-center justify-center">
|
||
|
|
<i class="fa fa-play-circle mr-2"></i> 开始游戏
|
||
|
|
</button>
|
||
|
|
<button id="reset-game"
|
||
|
|
class="bg-neutral hover:bg-neutral/90 text-white font-bold py-2 px-6 rounded-full shadow-md opacity-50 cursor-not-allowed flex items-center justify-center"
|
||
|
|
disabled>
|
||
|
|
<i class="fa fa-refresh mr-2"></i> 重新开始
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<div id="level-up" class="fixed inset-0 bg-black/50 flex items-center justify-center z-10 hidden">
|
||
|
|
<div class="bg-white rounded-xl p-6 max-w-md w-full text-center">
|
||
|
|
<h2 class="text-2xl font-bold text-primary mb-4">恭喜晋级！</h2>
|
||
|
|
<p class="text-lg mb-6">你已晋级到第 <span id="new-level">2</span> 关！</p>
|
||
|
|
<button id="continue-btn"
|
||
|
|
class="bg-primary hover:bg-primary/90 text-white font-bold py-2 px-6 rounded-full shadow-md">
|
||
|
|
继续
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const fruits = ['🍎', '🍌', '🍊', '🍇', '🍓', '🍉'];
|
||
|
|
const fruitNames = ['苹果', '香蕉', '橙子', '葡萄', '草莓', '西瓜'];
|
||
|
|
let gameState = {
|
||
|
|
score: 0,
|
||
|
|
level: 1,
|
||
|
|
maxNum: 5,
|
||
|
|
active: false,
|
||
|
|
left: 0,
|
||
|
|
right: 0,
|
||
|
|
currentFruit: 0,
|
||
|
|
voiceEnabled: true
|
||
|
|
};
|
||
|
|
|
||
|
|
function init() {
|
||
|
|
document.getElementById('start-game').addEventListener('click', startGame);
|
||
|
|
document.getElementById('reset-game').addEventListener('click', resetGame);
|
||
|
|
document.getElementById('less-than').addEventListener('click', () => checkAnswer('<'));
|
||
|
|
document.getElementById('equal').addEventListener('click', () => checkAnswer('='));
|
||
|
|
document.getElementById('greater-than').addEventListener('click', () => checkAnswer('>'));
|
||
|
|
document.getElementById('continue-btn').addEventListener('click', () => {
|
||
|
|
document.getElementById('level-up').classList.add('hidden');
|
||
|
|
generateNumbers();
|
||
|
|
});
|
||
|
|
document.getElementById('toggle-voice').addEventListener('click', toggleVoice);
|
||
|
|
}
|
||
|
|
|
||
|
|
function toggleVoice() {
|
||
|
|
gameState.voiceEnabled = !gameState.voiceEnabled;
|
||
|
|
const icon = document.getElementById('toggle-voice').querySelector('i');
|
||
|
|
if (gameState.voiceEnabled) {
|
||
|
|
icon.className = 'fa fa-volume-up text-gray-600';
|
||
|
|
} else {
|
||
|
|
icon.className = 'fa fa-volume-off text-gray-600';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function speak(text) {
|
||
|
|
if (!gameState.voiceEnabled) return;
|
||
|
|
|
||
|
|
if ('speechSynthesis' in window) {
|
||
|
|
const utterance = new SpeechSynthesisUtterance(text);
|
||
|
|
utterance.lang = 'zh-CN';
|
||
|
|
utterance.rate = 0.9; // 稍微慢一点，便于儿童理解
|
||
|
|
speechSynthesis.speak(utterance);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function startGame() {
|
||
|
|
speak("请比较左右两边的水果数量，选择正确的比较符号。");
|
||
|
|
gameState.active = true;
|
||
|
|
document.getElementById('start-game').disabled = true;
|
||
|
|
document.getElementById('reset-game').disabled = false;
|
||
|
|
document.getElementById('start-game').classList.add('opacity-50');
|
||
|
|
document.getElementById('reset-game').classList.remove('opacity-50');
|
||
|
|
generateNumbers();
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
function resetGame() {
|
||
|
|
gameState = {
|
||
|
|
score: 0,
|
||
|
|
level: 1,
|
||
|
|
maxNum: 5,
|
||
|
|
active: false,
|
||
|
|
left: 0,
|
||
|
|
right: 0,
|
||
|
|
currentFruit: 0,
|
||
|
|
voiceEnabled: gameState.voiceEnabled
|
||
|
|
};
|
||
|
|
document.getElementById('score').textContent = '0';
|
||
|
|
document.getElementById('level').textContent = '1';
|
||
|
|
document.getElementById('left-number').textContent = '?';
|
||
|
|
document.getElementById('right-number').textContent = '?';
|
||
|
|
document.getElementById('left-fruits').innerHTML = '';
|
||
|
|
document.getElementById('right-fruits').innerHTML = '';
|
||
|
|
document.getElementById('feedback').textContent = '';
|
||
|
|
document.getElementById('start-game').disabled = false;
|
||
|
|
document.getElementById('reset-game').disabled = true;
|
||
|
|
document.getElementById('start-game').classList.remove('opacity-50');
|
||
|
|
document.getElementById('reset-game').classList.add('opacity-50');
|
||
|
|
document.getElementById('level-up').classList.add('hidden');
|
||
|
|
speak("游戏已重置，点击开始游戏按钮重新开始。");
|
||
|
|
}
|
||
|
|
|
||
|
|
function generateNumbers() {
|
||
|
|
gameState.currentFruit = Math.floor(Math.random() * fruits.length);
|
||
|
|
gameState.left = Math.floor(Math.random() * gameState.maxNum) + 1;
|
||
|
|
gameState.right = Math.floor(Math.random() * gameState.maxNum) + 1;
|
||
|
|
|
||
|
|
document.getElementById('left-number').textContent = gameState.left;
|
||
|
|
document.getElementById('right-number').textContent = gameState.right;
|
||
|
|
|
||
|
|
renderFruits('left-fruits', gameState.left);
|
||
|
|
renderFruits('right-fruits', gameState.right);
|
||
|
|
|
||
|
|
document.getElementById('feedback').textContent = '';
|
||
|
|
document.getElementById('left-card').classList.remove('border-success', 'border-danger');
|
||
|
|
document.getElementById('right-card').classList.remove('border-success', 'border-danger');
|
||
|
|
document.getElementById('left-card').classList.add('border-green-200');
|
||
|
|
document.getElementById('right-card').classList.add('border-orange-200');
|
||
|
|
|
||
|
|
// 语音提示题目
|
||
|
|
const fruitName = fruitNames[gameState.currentFruit];
|
||
|
|
speak(`左边有${gameState.left}个${fruitName}，右边有${gameState.right}个${fruitName}，哪个更多？`);
|
||
|
|
}
|
||
|
|
|
||
|
|
function renderFruits(containerId, count) {
|
||
|
|
const container = document.getElementById(containerId);
|
||
|
|
container.innerHTML = '';
|
||
|
|
const fruit = fruits[gameState.currentFruit];
|
||
|
|
|
||
|
|
for (let i = 0; i < count; i++) {
|
||
|
|
const div = document.createElement('div');
|
||
|
|
div.className = 'text-3xl';
|
||
|
|
div.textContent = fruit;
|
||
|
|
container.appendChild(div);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function checkAnswer(operator) {
|
||
|
|
if (!gameState.active) return;
|
||
|
|
|
||
|
|
let isCorrect = false;
|
||
|
|
switch (operator) {
|
||
|
|
case '<':
|
||
|
|
isCorrect = gameState.left < gameState.right;
|
||
|
|
break;
|
||
|
|
case '=':
|
||
|
|
isCorrect = gameState.left === gameState.right;
|
||
|
|
break;
|
||
|
|
case '>':
|
||
|
|
isCorrect = gameState.left > gameState.right;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
|
||
|
|
const feedback = document.getElementById('feedback');
|
||
|
|
const leftCard = document.getElementById('left-card');
|
||
|
|
const rightCard = document.getElementById('right-card');
|
||
|
|
|
||
|
|
if (isCorrect) {
|
||
|
|
gameState.score++;
|
||
|
|
document.getElementById('score').textContent = gameState.score;
|
||
|
|
feedback.textContent = '🎉 答对了！真棒！';
|
||
|
|
feedback.className = 'text-success';
|
||
|
|
leftCard.classList.remove('border-green-200', 'border-danger');
|
||
|
|
rightCard.classList.remove('border-orange-200', 'border-danger');
|
||
|
|
leftCard.classList.add('border-success');
|
||
|
|
rightCard.classList.add('border-success');
|
||
|
|
|
||
|
|
speak("答对了！真棒！");
|
||
|
|
|
||
|
|
if (gameState.score % 5 === 0) {
|
||
|
|
setTimeout(levelUp, 1500);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
feedback.textContent = '再试一次！';
|
||
|
|
feedback.className = 'text-danger';
|
||
|
|
leftCard.classList.remove('border-green-200', 'border-success');
|
||
|
|
rightCard.classList.remove('border-orange-200', 'border-success');
|
||
|
|
leftCard.classList.add('border-danger');
|
||
|
|
rightCard.classList.add('border-danger');
|
||
|
|
|
||
|
|
speak("答错了，再试一次！");
|
||
|
|
}
|
||
|
|
|
||
|
|
setTimeout(generateNumbers, 1500);
|
||
|
|
}
|
||
|
|
|
||
|
|
function levelUp() {
|
||
|
|
gameState.level++;
|
||
|
|
document.getElementById('level').textContent = gameState.level;
|
||
|
|
document.getElementById('new-level').textContent = gameState.level;
|
||
|
|
|
||
|
|
if (gameState.level === 2) gameState.maxNum = 7;
|
||
|
|
if (gameState.level === 3) gameState.maxNum = 10;
|
||
|
|
|
||
|
|
document.getElementById('level-up').classList.remove('hidden');
|
||
|
|
speak(`恭喜晋级！你已晋级到第${gameState.level}关！`);
|
||
|
|
}
|
||
|
|
|
||
|
|
document.addEventListener('DOMContentLoaded', init);
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|