372 lines
14 KiB
HTML
372 lines
14 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>小小动物园数学探险</title>
|
||
|
||
<!-- 引入后端集成脚本 -->
|
||
<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>
|
||
<style>
|
||
body {
|
||
font-family: 'Comic Sans MS', cursive, sans-serif;
|
||
background-color: #e8f5e9;
|
||
text-align: center;
|
||
padding: 20px;
|
||
}
|
||
.game-container {
|
||
max-width: 900px;
|
||
margin: 0 auto;
|
||
background-color: white;
|
||
border-radius: 20px;
|
||
padding: 20px;
|
||
box-shadow: 0 0 15px rgba(0,0,0,0.1);
|
||
}
|
||
h1 {
|
||
color: #2e7d32;
|
||
font-size: 28px;
|
||
}
|
||
.zoo-section {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
margin: 20px 0;
|
||
}
|
||
.animal-pen {
|
||
width: 200px;
|
||
margin: 10px;
|
||
padding: 15px;
|
||
background-color: #f1f8e9;
|
||
border-radius: 15px;
|
||
position: relative;
|
||
}
|
||
.animal-pen h3 {
|
||
margin-top: 0;
|
||
color: #1b5e20;
|
||
}
|
||
.animal {
|
||
display: inline-block;
|
||
margin: 5px;
|
||
cursor: pointer;
|
||
transition: transform 0.2s;
|
||
}
|
||
.animal:hover {
|
||
transform: scale(1.1);
|
||
}
|
||
.animal img {
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
.add-animal, .remove-animal {
|
||
background-color: #4CAF50;
|
||
color: white;
|
||
border: none;
|
||
padding: 5px 10px;
|
||
margin: 5px;
|
||
border-radius: 5px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
}
|
||
.remove-animal {
|
||
background-color: #f44336;
|
||
}
|
||
.problem-section {
|
||
margin: 20px 0;
|
||
padding: 15px;
|
||
background-color: #c8e6c9;
|
||
border-radius: 15px;
|
||
}
|
||
.problem {
|
||
font-size: 20px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.answer-input {
|
||
font-size: 18px;
|
||
padding: 8px;
|
||
width: 60px;
|
||
text-align: center;
|
||
}
|
||
.submit-btn {
|
||
background-color: #2e7d32;
|
||
color: white;
|
||
border: none;
|
||
padding: 8px 15px;
|
||
margin-left: 10px;
|
||
border-radius: 5px;
|
||
cursor: pointer;
|
||
}
|
||
.feedback {
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
margin: 15px 0;
|
||
min-height: 30px;
|
||
color: #d84315;
|
||
}
|
||
.comparison-section {
|
||
margin: 20px 0;
|
||
padding: 15px;
|
||
background-color: #dcedc8;
|
||
border-radius: 15px;
|
||
}
|
||
.comparison-btn {
|
||
background-color: #689f38;
|
||
color: white;
|
||
border: none;
|
||
padding: 10px 15px;
|
||
margin: 5px;
|
||
border-radius: 5px;
|
||
cursor: pointer;
|
||
font-size: 16px;
|
||
}
|
||
.celebration {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba(255,255,255,0.9);
|
||
display: none;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
z-index: 100;
|
||
}
|
||
.celebration h2 {
|
||
font-size: 40px;
|
||
color: #d84315;
|
||
margin-bottom: 20px;
|
||
}
|
||
.celebration img {
|
||
width: 150px;
|
||
height: 150px;
|
||
animation: bounce 0.5s infinite alternate;
|
||
}
|
||
@keyframes bounce {
|
||
from { transform: translateY(0); }
|
||
to { transform: translateY(-20px); }
|
||
}
|
||
.animal-count {
|
||
font-weight: bold;
|
||
font-size: 18px;
|
||
color:
|
||
#1b5e20;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="game-container">
|
||
<h1>🐘 小小动物园数学探险 🦁</h1>
|
||
|
||
<div class="problem-section">
|
||
<div class="problem">园长的问题：<span id="problem-text">2 + 1</span> = ?</div>
|
||
<input type="number" class="answer-input" id="answer-input" min="0" max="5">
|
||
<button class="submit-btn" id="submit-btn">提交</button>
|
||
<div id="math-feedback" class="feedback"></div>
|
||
</div>
|
||
|
||
<div class="zoo-section">
|
||
<div class="animal-pen" id="lion-pen">
|
||
<h3>小猫馆 🦁</h3>
|
||
<div class="animal-count">数量: <span id="lion-count">0</span></div>
|
||
<div id="lion-container"></div>
|
||
<button class="add-animal" data-pen="lion">添加猫</button>
|
||
<button class="remove-animal" data-pen="lion">减少猫</button>
|
||
</div>
|
||
|
||
<div class="animal-pen" id="elephant-pen">
|
||
<h3>大象馆 🐘</h3>
|
||
<div class="animal-count">数量: <span id="elephant-count">0</span></div>
|
||
<div id="elephant-container"></div>
|
||
<button class="add-animal" data-pen="elephant">添加大象</button>
|
||
<button class="remove-animal" data-pen="elephant">减少大象</button>
|
||
</div>
|
||
|
||
<div class="animal-pen" id="monkey-pen">
|
||
<h3>猴子馆 🐵</h3>
|
||
<div class="animal-count">数量: <span id="monkey-count">0</span></div>
|
||
<div id="monkey-container"></div>
|
||
<button class="add-animal" data-pen="monkey">添加猴子</button>
|
||
<button class="remove-animal" data-pen="monkey">减少猴子</button>
|
||
</div>
|
||
|
||
<div class="animal-pen" id="panda-pen">
|
||
<h3>熊猫馆 🐼</h3>
|
||
<div class="animal-count">数量: <span id="panda-count">0</span></div>
|
||
<div id="panda-container"></div>
|
||
<button class="add-animal" data-pen="panda">添加熊猫</button>
|
||
<button class="remove-animal" data-pen="panda">减少熊猫</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="comparison-section">
|
||
<h2>比一比，哪个多?</h2>
|
||
<button class="comparison-btn" data-compare="lion-elephant">猫 🦁 vs 大象 🐘</button>
|
||
<button class="comparison-btn" data-compare="lion-monkey">猫 🦁 vs 猴子 🐵</button>
|
||
<button class="comparison-btn" data-compare="elephant-panda">大象 🐘 vs 熊猫 🐼</button>
|
||
<button class="comparison-btn" data-compare="monkey-panda">猴子 🐵 vs 熊猫 🐼</button>
|
||
<div id="comparison-result" class="feedback"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="celebration" id="celebration">
|
||
<h2>太棒了！答对了！</h2>
|
||
<img src="123.jpg" alt="庆祝">
|
||
<button class="submit-btn" onclick ="hideCelebration()">继续探险</button>
|
||
</div>
|
||
|
||
<script>
|
||
// 动物数据
|
||
const animals = {
|
||
lion: { name: "猫", emoji: "🦁", img: "456.jpg", count: 0 },
|
||
elephant: { name: "大象", emoji: "🐘", img: "789.jpg", count: 0 },
|
||
monkey: { name: "猴子", emoji: "🐵", img: "0.jpg", count: 0 },
|
||
panda: { name: "熊猫", emoji: "🐼", img: "7.jpg", count: 0 }
|
||
};
|
||
|
||
// 当前数学问题
|
||
let currentProblem = generateProblem();
|
||
document.getElementById('problem-text').textContent = currentProblem.text;
|
||
|
||
// 添加动物按钮事件
|
||
document.querySelectorAll('.add-animal').forEach(btn => {
|
||
btn.addEventListener('click', function() {
|
||
const pen = this.getAttribute('data-pen');
|
||
if (animals[pen].count < 5) {
|
||
animals[pen].count++;
|
||
|
||
// 详细数据打印
|
||
console.log('🎯 数字探险馆游戏 - 添加动物记录');
|
||
console.log('📊 操作信息:', {
|
||
操作类型: '添加动物',
|
||
动物类型: animals[pen].name,
|
||
当前数量: animals[pen].count,
|
||
操作时间: new Date().toLocaleString('zh-CN')
|
||
});
|
||
|
||
updatePen(pen);
|
||
}
|
||
});
|
||
});
|
||
|
||
// 减少动物按钮事件
|
||
document.querySelectorAll('.remove-animal').forEach(btn => {
|
||
btn.addEventListener('click', function() {
|
||
const pen = this.getAttribute('data-pen');
|
||
if (animals[pen].count > 0) {
|
||
animals[pen].count--;
|
||
|
||
// 详细数据打印
|
||
console.log('🎯 数字探险馆游戏 - 减少动物记录');
|
||
console.log('📊 操作信息:', {
|
||
操作类型: '减少动物',
|
||
动物类型: animals[pen].name,
|
||
当前数量: animals[pen].count,
|
||
操作时间: new Date().toLocaleString('zh-CN')
|
||
});
|
||
|
||
updatePen(pen);
|
||
}
|
||
});
|
||
});
|
||
|
||
// 更新围栏显示
|
||
function updatePen(pen) {
|
||
const container = document.getElementById(`${pen}-container`);
|
||
const countElement = document.getElementById(`${pen}-count`);
|
||
|
||
container.innerHTML = '';
|
||
countElement.textContent = animals[pen].count;
|
||
|
||
// 添加动物图片
|
||
for (let i = 0; i < animals[pen].count; i++) {
|
||
const animal = document.createElement('div');
|
||
animal.className = 'animal';
|
||
animal.innerHTML = `<img src="${animals[pen].img}" alt="${animals[pen].name}">`;
|
||
container.appendChild(animal);
|
||
}
|
||
}
|
||
|
||
// 比较按钮事件
|
||
document.querySelectorAll('.comparison-btn').forEach(btn => {
|
||
btn.addEventListener('click', function() {
|
||
const [pen1, pen2] = this.getAttribute('data-compare').split('-');
|
||
const count1 = animals[pen1].count;
|
||
const count2 = animals[pen2].count;
|
||
|
||
let result = '';
|
||
if (count1 > count2) {
|
||
result = `${animals[pen1].name}${animals[pen1].emoji}比${animals[pen2].name}${animals[pen2].emoji}多，多${count1 - count2}只`;
|
||
} else if (count2 > count1) {
|
||
result = `${animals[pen2].name}${animals[pen2].emoji}比${animals[pen1].name}${animals[pen1].emoji}多，多${count2 - count1}只`;
|
||
} else {
|
||
result = `两种动物数量一样多，都是${count1}只`;
|
||
}
|
||
|
||
document.getElementById('comparison-result').textContent = result;
|
||
});
|
||
});
|
||
|
||
// 数学问题提交
|
||
document.getElementById('submit-btn').addEventListener('click', function() {
|
||
const userAnswer = parseInt(document.getElementById('answer-input').value);
|
||
|
||
if (isNaN(userAnswer)) {
|
||
document.getElementById('math-feedback').textContent = '请输入一个数字';
|
||
return;
|
||
}
|
||
|
||
// 详细数据打印
|
||
console.log('🎯 数字探险馆游戏 - 数学问题提交记录');
|
||
console.log('📊 问题信息:', {
|
||
问题内容: currentProblem.text,
|
||
正确答案: currentProblem.answer,
|
||
用户答案: userAnswer,
|
||
是否正确: userAnswer === currentProblem.answer ? '✅ 正确' : '❌ 错误',
|
||
提交时间: new Date().toLocaleString('zh-CN')
|
||
});
|
||
|
||
if (userAnswer === currentProblem.answer) {
|
||
document.getElementById('math-feedback').textContent = '答对了！你真棒！';
|
||
showCelebration();
|
||
|
||
// 生成新问题
|
||
setTimeout(() => {
|
||
currentProblem = generateProblem();
|
||
document.getElementById('problem-text').textContent = currentProblem.text;
|
||
document.getElementById('answer-input').value = '';
|
||
document.getElementById('math-feedback').textContent = '';
|
||
}, 1500);
|
||
} else {
|
||
document.getElementById('math-feedback').textContent = '再试试看！';
|
||
}
|
||
});
|
||
|
||
// 生成数学问题
|
||
function generateProblem() {
|
||
const num1 = Math.floor(Math.random() * 3) + 1; // 1-3
|
||
const num2 = Math.floor(Math.random() * 3) + 1; // 1-3
|
||
const answer = num1 + num2;
|
||
|
||
return {
|
||
text: `${num1} + ${num2}`,
|
||
answer: answer
|
||
};
|
||
}
|
||
|
||
// 显示庆祝动画
|
||
function showCelebration() {
|
||
document.getElementById('celebration').style.display = 'flex';
|
||
}
|
||
|
||
function hideCelebration() {
|
||
document.getElementById('celebration').style.display = 'none';
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|
||
|