zjh/RGKT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始提交

Browse Source
This commit is contained in:
zjh
2025-10-10 19:35:04 +08:00
commit b7561f4b95
280 changed files with 44316 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

372
rg-09112127/html/play/数字探险馆.html Normal file
View File

@@ -0,0 +1,372 @@
<!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>