背景需求：
昨天豆包做了水果练练看的HTML，也在小班教室里用希沃白板进行测试
【白板类-01-01】20260326水果连连看01（html+希沃白板）
https://mp.csdn.net/mp_blog/creation/editor/159469952
出现了屏幕移动等问题、幼儿够不到顶部水果按钮等情况
"找影子"的测试
今天再做 一个"找影子"的HTML，看看内容，并尝试固定网页。
一、初稿看效果
python
'''
找动物影子，四选一01
Deepseek，阿夏
20260326
'''
import os
def generate_shadow_game():
"""
生成找影子游戏HTML文件
4个影子，1个物体（人物、动物、家具等），一共10关
"""
html_content = '''<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>找影子 - 儿童益智游戏</title>
<style>
* {
user-select: none;
-webkit-tap-highlight-color: transparent;
}
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Segoe UI', 'Comic Neue', 'Comic Sans MS', 'Chalkboard SE', cursive, sans-serif;
margin: 0;
padding: 20px;
}
.game-container {
background: rgba(255, 255, 255, 0.95);
border-radius: 48px;
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
padding: 25px;
max-width: 800px;
width: 100%;
text-align: center;
}
/* 头部信息 */
.game-header {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
border-radius: 40px;
padding: 15px 25px;
margin-bottom: 25px;
display: flex;
justify-content: space-between;
align-items: center;
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}
.level-info, .score-info {
background: rgba(255,255,255,0.2);
padding: 8px 20px;
border-radius: 30px;
font-weight: bold;
font-size: 1.2rem;
}
.level-info span, .score-info span {
font-size: 1.5rem;
margin-left: 8px;
color: #ffeb3b;
}
/* 物体显示区域 */
.object-area {
background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
border-radius: 40px;
padding: 30px;
margin-bottom: 30px;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.object-title {
font-size: 1.3rem;
color: white;
margin-bottom: 15px;
font-weight: bold;
}
.object-display {
font-size: 8rem;
background: rgba(255,255,255,0.9);
border-radius: 30px;
padding: 20px;
display: inline-block;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
/* 影子选项区域 */
.shadows-area {
margin-bottom: 30px;
}
.shadows-title {
font-size: 1.2rem;
color: #764ba2;
margin-bottom: 20px;
font-weight: bold;
}
.shadows-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-bottom: 20px;
}
.shadow-card {
background: #2c3e50;
border-radius: 25px;
padding: 20px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
position: relative;
overflow: hidden;
}
.shadow-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}
.shadow-card.selected {
background: #e67e22;
transform: scale(0.98);
}
.shadow-card.correct {
background: #27ae60;
animation: correctAnimation 0.5s ease;
}
.shadow-card.wrong {
background: #e74c3c;
animation: wrongAnimation 0.3s ease;
}
@keyframes correctAnimation {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); background: #2ecc71; }
}
@keyframes wrongAnimation {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-10px); }
75% { transform: translateX(10px); }
}
.shadow-emoji {
font-size: 4rem;
filter: brightness(0) invert(0) drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
transition: all 0.2s ease;
}
.shadow-card.selected .shadow-emoji {
filter: brightness(0) invert(1);
}
/* 消息区域 */
.message-area {
background: #f8f9fa;
border-radius: 30px;
padding: 12px;
margin: 15px 0;
font-size: 1.1rem;
font-weight: bold;
color: #2c3e50;
border: 2px solid #e0e0e0;
}
/* 按钮区域 */
.game-buttons {
display: flex;
gap: 15px;
justify-content: center;
}
button {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
font-family: inherit;
font-weight: bold;
font-size: 1rem;
padding: 10px 25px;
border-radius: 30px;
color: white;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}
button:hover {
transform: translateY(-2px);
box-shadow: 0 5px 12px rgba(0,0,0,0.3);
}
button:active {
transform: translateY(0px);
}
/* 响应式设计 */
@media (max-width: 600px) {
.shadows-grid {
gap: 12px;
}
.object-display {
font-size: 5rem;
padding: 15px;
}
.shadow-emoji {
font-size: 2.5rem;
}
.game-container {
padding: 15px;
}
}
/* 完成界面 */
.completion-screen {
text-align: center;
padding: 30px;
}
.completion-screen h2 {
color: #f5576c;
font-size: 2rem;
margin-bottom: 20px;
}
.completion-screen p {
font-size: 1.2rem;
color: #667eea;
margin-bottom: 30px;
}
.completion-emoji {
font-size: 5rem;
margin: 20px 0;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="game-container" id="gameContainer">
<div class="game-header">
<div class="level-info">📚 第 <span id="levelNum">1</span> 关</div>
<div class="score-info">⭐ 得分 <span id="scoreNum">0</span></div>
</div>
<div id="gameContent">
<div class="object-area">
<div class="object-title">🔍 找到下面这个物体的影子</div>
<div class="object-display" id="objectDisplay">🐶</div>
</div>
<div class="shadows-area">
<div class="shadows-title">❓ 哪个是它的影子？</div>
<div class="shadows-grid" id="shadowsGrid"></div>
</div>
<div class="message-area" id="messageArea">
💡 点击正确的影子就能过关啦！
</div>
<div class="game-buttons">
<button id="nextLevelBtn" style="display: none;">下一关 🎮</button>
<button id="restartBtn">重新开始 🔄</button>
</div>
</div>
<div id="completionScreen" class="completion-screen hidden">
<div class="completion-emoji">🏆</div>
<h2>恭喜你完成所有关卡！</h2>
<p>你真是个找影子小能手！</p>
<button id="playAgainBtn">再玩一次 🎮</button>
</div>
</div>
<script>
// 游戏数据 - 10个关卡，每个关卡包含一个物体和对应的影子
const levels = [
{ object: "🐶", objectName: "小狗", shadows: ["🐱", "🐭", "🐹", "🐶"], correctIndex: 3 },
{ object: "🐱", objectName: "小猫", shadows: ["🐶", "🐭", "🐱", "🐹"], correctIndex: 2 },
{ object: "🐭", objectName: "小老鼠", shadows: ["🐹", "🐱", "🐶", "🐭"], correctIndex: 3 },
{ object: "🐮", objectName: "奶牛", shadows: ["🐷", "🐮", "🐑", "🐴"], correctIndex: 1 },
{ object: "🐷", objectName: "小猪", shadows: ["🐮", "🐑", "🐷", "🐴"], correctIndex: 2 },
{ object: "🦁", objectName: "狮子", shadows: ["🐯", "🦁", "🐻", "🐨"], correctIndex: 1 },
{ object: "🐧", objectName: "企鹅", shadows: ["🐦", "🦆", "🐧", "🦉"], correctIndex: 2 },
{ object: "🍎", objectName: "苹果", shadows: ["🍊", "🍎", "🍓", "🍒"], correctIndex: 1 },
{ object: "🚗", objectName: "小汽车", shadows: ["🚲", "🚗", "🚌", "🚑"], correctIndex: 1 },
{ object: "🏠", objectName: "房子", shadows: ["🏢", "🏠", "🏪", "🏫"], correctIndex: 1 }
];
let currentLevel = 0;
let score = 0;
let canSelect = true;
let selectedIndex = -1;
// DOM 元素
const gameContent = document.getElementById('gameContent');
const completionScreen = document.getElementById('completionScreen');
const levelNumSpan = document.getElementById('levelNum');
const scoreNumSpan = document.getElementById('scoreNum');
const objectDisplay = document.getElementById('objectDisplay');
const shadowsGrid = document.getElementById('shadowsGrid');
const messageArea = document.getElementById('messageArea');
const nextLevelBtn = document.getElementById('nextLevelBtn');
const restartBtn = document.getElementById('restartBtn');
const playAgainBtn = document.getElementById('playAgainBtn');
// 更新UI
function updateUI() {
levelNumSpan.textContent = currentLevel + 1;
scoreNumSpan.textContent = score;
const level = levels[currentLevel];
objectDisplay.textContent = level.object;
// 生成影子选项
renderShadows(level.shadows);
}
// 渲染影子选项
function renderShadows(shadows) {
shadowsGrid.innerHTML = '';
shadows.forEach((shadow, index) => {
const shadowCard = document.createElement('div');
shadowCard.className = 'shadow-card';
shadowCard.innerHTML = `<div class="shadow-emoji">${shadow}</div>`;
shadowCard.addEventListener('click', () => checkAnswer(index));
shadowsGrid.appendChild(shadowCard);
});
}
// 检查答案
function checkAnswer(selectedIndex) {
if (!canSelect) return;
const level = levels[currentLevel];
const isCorrect = (selectedIndex === level.correctIndex);
if (isCorrect) {
// 正确答案
canSelect = false;
score += 10;
scoreNumSpan.textContent = score;
// 高亮正确的卡片
const cards = document.querySelectorAll('.shadow-card');
cards[selectedIndex].classList.add('correct');
messageArea.innerHTML = '🎉 太棒了！找到了正确的影子！ +10分 🎉';
// 播放正确的音效（使用Web Audio）
playCorrectSound();
// 显示下一关按钮
nextLevelBtn.style.display = 'inline-block';
// 如果是最后一关
if (currentLevel === levels.length - 1) {
nextLevelBtn.textContent = '完成游戏 🏆';
}
} else {
// 错误答案
const cards = document.querySelectorAll('.shadow-card');
cards[selectedIndex].classList.add('wrong');
messageArea.innerHTML = '😅 不对哦，再试试看！找到正确的影子才能过关~';
// 播放错误音效
playWrongSound();
// 0.5秒后移除错误样式
setTimeout(() => {
cards[selectedIndex].classList.remove('wrong');
}, 500);
}
}
// 进入下一关
function nextLevel() {
if (currentLevel < levels.length - 1) {
currentLevel++;
canSelect = true;
nextLevelBtn.style.display = 'none';
messageArea.innerHTML = '✨ 进入下一关！继续找影子吧 ✨';
updateUI();
} else {
// 完成所有关卡
completeGame();
}
}
// 完成游戏
function completeGame() {
gameContent.classList.add('hidden');
completionScreen.classList.remove('hidden');
// 播放完成音乐
playCompleteMusic();
// 语音播报
speak(`恭喜你完成了所有关卡！最终得分 ${score} 分！`);
}
// 重新开始游戏
function restartGame() {
currentLevel = 0;
score = 0;
canSelect = true;
nextLevelBtn.style.display = 'none';
gameContent.classList.remove('hidden');
completionScreen.classList.add('hidden');
updateUI();
messageArea.innerHTML = '💡 点击正确的影子就能过关啦！';
}
// 播放正确音效
function playCorrectSound() {
try {
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);
oscillator.frequency.value = 880;
oscillator.type = 'sine';
gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
gainNode.gain.exponentialRampToValueAtTime(0.0001, audioContext.currentTime + 0.3);
oscillator.start();
oscillator.stop(audioContext.currentTime + 0.3);
} catch(e) {
console.log('音效播放失败');
}
}
// 播放错误音效
function playWrongSound() {
try {
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);
oscillator.frequency.value = 440;
oscillator.type = 'sawtooth';
gainNode.gain.setValueAtTime(0.2, audioContext.currentTime);
gainNode.gain.exponentialRampToValueAtTime(0.0001, audioContext.currentTime + 0.2);
oscillator.start();
oscillator.stop(audioContext.currentTime + 0.2);
} catch(e) {
console.log('音效播放失败');
}
}
// 播放完成音乐
function playCompleteMusic() {
try {
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const notes = [523.25, 587.33, 659.25, 698.46, 783.99, 880.00];
notes.forEach((freq, index) => {
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);
oscillator.frequency.value = freq;
oscillator.type = 'sine';
gainNode.gain.setValueAtTime(0.2, audioContext.currentTime + index * 0.15);
gainNode.gain.exponentialRampToValueAtTime(0.0001, audioContext.currentTime + (index * 0.15) + 0.2);
oscillator.start(audioContext.currentTime + index * 0.15);
oscillator.stop(audioContext.currentTime + (index * 0.15) + 0.2);
});
} catch(e) {
console.log('音乐播放失败');
}
}
// 语音播报
function speak(text) {
if ('speechSynthesis' in window) {
window.speechSynthesis.cancel();
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'zh-CN';
utterance.rate = 0.9;
utterance.pitch = 1.2;
window.speechSynthesis.speak(utterance);
}
}
// 事件监听
nextLevelBtn.addEventListener('click', nextLevel);
restartBtn.addEventListener('click', restartGame);
playAgainBtn.addEventListener('click', restartGame);
// 初始化游戏
updateUI();
// 欢迎语音
setTimeout(() => {
speak("欢迎来到找影子游戏！找到正确的影子就能过关啦！");
}, 500);
</script>
</body>
</html>'''
# 保存到桌面
desktop_path = os.path.join(os.path.expanduser('~'), 'Desktop')
file_path = os.path.join(desktop_path, r'D:\test\20桌面素材\20260326动物影子配对\01找影子游戏_儿童益智版.html')
try:
with open(file_path, 'w', encoding='utf-8') as f:
f.write(html_content)
print(f'✅ 找影子游戏已成功生成！')
print(f'📁 文件保存位置: {file_path}')
print('🎮 游戏特性：')
print(' - 🎯 10个精彩关卡，每关一个主题物体')
print(' - 🔍 4个影子选项，需要找出正确匹配')
print(' - 🐶 主题包括：小狗、小猫、小老鼠、奶牛、小猪、狮子、企鹅、苹果、汽车、房子')
print(' - 🎵 正确/错误都有音效反馈')
print(' - 🗣️ 语音播报提示')
print(' - ⭐ 每关正确+10分')
print(' - 🎉 完成所有关卡有庆祝音乐和动画')
print(' - 👶 专为3-6岁幼儿设计的简单操作')
print(' - 📱 响应式设计，支持平板和手机触摸')
return file_path
except Exception as e:
print(f'❌ 生成文件失败: {e}')
return None
if __name__ == '__main__':
generate_shadow_game()
选项的底纹颜色太深了，看不清影子的外形
点击都有叮的音效，正确显示绿色，
点击都有叮的音效，错误显示红色，
最后都要按下一关，才能到第二题
二、更换影子的底纹颜色，增加正确错误的语音提示
python
'''
找动物影子，四选一， 有声音提示、白色底纹、彩色动物选项02
Deepseek，阿夏
20260326
'''
import os
def generate_shadow_game():
"""
生成找影子游戏HTML文件
4个影子，1个物体（人物、动物、家具等），一共10关
影子使用浅色底纹，选择后语音反馈
"""
html_content = '''<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>找影子 - 儿童益智游戏</title>
<style>
* {
user-select: none;
-webkit-tap-highlight-color: transparent;
}
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Segoe UI', 'Comic Neue', 'Comic Sans MS', 'Chalkboard SE', cursive, sans-serif;
margin: 0;
padding: 20px;
}
.game-container {
background: rgba(255, 255, 255, 0.95);
border-radius: 48px;
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
padding: 25px;
max-width: 800px;
width: 100%;
text-align: center;
}
/* 头部信息 */
.game-header {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
border-radius: 40px;
padding: 15px 25px;
margin-bottom: 25px;
display: flex;
justify-content: space-between;
align-items: center;
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}
.level-info, .score-info {
background: rgba(255,255,255,0.2);
padding: 8px 20px;
border-radius: 30px;
font-weight: bold;
font-size: 1.2rem;
}
.level-info span, .score-info span {
font-size: 1.5rem;
margin-left: 8px;
color: #ffeb3b;
}
/* 物体显示区域 */
.object-area {
background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
border-radius: 40px;
padding: 30px;
margin-bottom: 30px;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.object-title {
font-size: 1.3rem;
color: white;
margin-bottom: 15px;
font-weight: bold;
}
.object-display {
font-size: 8rem;
background: rgba(255,255,255,0.9);
border-radius: 30px;
padding: 20px;
display: inline-block;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
/* 影子选项区域 */
.shadows-area {
margin-bottom: 30px;
}
.shadows-title {
font-size: 1.2rem;
color: #764ba2;
margin-bottom: 20px;
font-weight: bold;
}
.shadows-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-bottom: 20px;
}
.shadow-card {
background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%);
border-radius: 25px;
padding: 20px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
position: relative;
overflow: hidden;
border: 2px solid #d0d7de;
}
.shadow-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
background: linear-gradient(135deg, #eef2f6 0%, #e0e4e8 100%);
}
.shadow-card.selected {
background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);
transform: scale(0.98);
border-color: #f39c12;
}
.shadow-card.correct {
background: linear-gradient(135deg, #a8e6cf 0%, #6ab04c 100%);
animation: correctAnimation 0.5s ease;
border-color: #27ae60;
}
.shadow-card.wrong {
background: linear-gradient(135deg, #ffb3ba 0%, #e74c3c 100%);
animation: wrongAnimation 0.3s ease;
border-color: #c0392b;
}
@keyframes correctAnimation {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.08); background: linear-gradient(135deg, #c8f0e0 0%, #82c45e 100%); }
}
@keyframes wrongAnimation {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-8px); }
75% { transform: translateX(8px); }
}
.shadow-emoji {
font-size: 4rem;
transition: all 0.2s ease;
filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.1));
}
/* 消息区域 */
.message-area {
background: #f8f9fa;
border-radius: 30px;
padding: 12px;
margin: 15px 0;
font-size: 1.2rem;
font-weight: bold;
color: #2c3e50;
border: 2px solid #e0e0e0;
min-height: 60px;
display: flex;
align-items: center;
justify-content: center;
}
/* 按钮区域 */
.game-buttons {
display: flex;
gap: 15px;
justify-content: center;
}
button {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
font-family: inherit;
font-weight: bold;
font-size: 1rem;
padding: 10px 25px;
border-radius: 30px;
color: white;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}
button:hover {
transform: translateY(-2px);
box-shadow: 0 5px 12px rgba(0,0,0,0.3);
}
button:active {
transform: translateY(0px);
}
/* 响应式设计 */
@media (max-width: 600px) {
.shadows-grid {
gap: 12px;
}
.object-display {
font-size: 5rem;
padding: 15px;
}
.shadow-emoji {
font-size: 2.5rem;
}
.game-container {
padding: 15px;
}
.message-area {
font-size: 1rem;
min-height: 50px;
}
}
/* 完成界面 */
.completion-screen {
text-align: center;
padding: 30px;
}
.completion-screen h2 {
color: #f5576c;
font-size: 2rem;
margin-bottom: 20px;
}
.completion-screen p {
font-size: 1.2rem;
color: #667eea;
margin-bottom: 30px;
}
.completion-emoji {
font-size: 5rem;
margin: 20px 0;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="game-container" id="gameContainer">
<div class="game-header">
<div class="level-info">📚 第 <span id="levelNum">1</span> 关</div>
<div class="score-info">⭐ 得分 <span id="scoreNum">0</span></div>
</div>
<div id="gameContent">
<div class="object-area">
<div class="object-title">🔍 找到下面这个物体的影子</div>
<div class="object-display" id="objectDisplay">🐶</div>
</div>
<div class="shadows-area">
<div class="shadows-title">❓ 哪个是它的影子？</div>
<div class="shadows-grid" id="shadowsGrid"></div>
</div>
<div class="message-area" id="messageArea">
💡 点击正确的影子就能过关啦！
</div>
<div class="game-buttons">
<button id="nextLevelBtn" style="display: none;">下一关 🎮</button>
<button id="restartBtn">重新开始 🔄</button>
</div>
</div>
<div id="completionScreen" class="completion-screen hidden">
<div class="completion-emoji">🏆</div>
<h2>恭喜你完成所有关卡！</h2>
<p>你真是个找影子小能手！</p>
<button id="playAgainBtn">再玩一次 🎮</button>
</div>
</div>
<script>
// 游戏数据 - 10个关卡，每个关卡包含一个物体和对应的影子
const levels = [
{ object: "🐶", objectName: "小狗", shadows: ["🐱", "🐭", "🐹", "🐶"], correctIndex: 3 },
{ object: "🐱", objectName: "小猫", shadows: ["🐶", "🐭", "🐱", "🐹"], correctIndex: 2 },
{ object: "🐭", objectName: "小老鼠", shadows: ["🐹", "🐱", "🐶", "🐭"], correctIndex: 3 },
{ object: "🐮", objectName: "奶牛", shadows: ["🐷", "🐮", "🐑", "🐴"], correctIndex: 1 },
{ object: "🐷", objectName: "小猪", shadows: ["🐮", "🐑", "🐷", "🐴"], correctIndex: 2 },
{ object: "🦁", objectName: "狮子", shadows: ["🐯", "🦁", "🐻", "🐨"], correctIndex: 1 },
{ object: "🐧", objectName: "企鹅", shadows: ["🐦", "🦆", "🐧", "🦉"], correctIndex: 2 },
{ object: "🍎", objectName: "苹果", shadows: ["🍊", "🍎", "🍓", "🍒"], correctIndex: 1 },
{ object: "🚗", objectName: "小汽车", shadows: ["🚲", "🚗", "🚌", "🚑"], correctIndex: 1 },
{ object: "🏠", objectName: "房子", shadows: ["🏢", "🏠", "🏪", "🏫"], correctIndex: 1 }
];
let currentLevel = 0;
let score = 0;
let canSelect = true;
let selectedIndex = -1;
// DOM 元素
const gameContent = document.getElementById('gameContent');
const completionScreen = document.getElementById('completionScreen');
const levelNumSpan = document.getElementById('levelNum');
const scoreNumSpan = document.getElementById('scoreNum');
const objectDisplay = document.getElementById('objectDisplay');
const shadowsGrid = document.getElementById('shadowsGrid');
const messageArea = document.getElementById('messageArea');
const nextLevelBtn = document.getElementById('nextLevelBtn');
const restartBtn = document.getElementById('restartBtn');
const playAgainBtn = document.getElementById('playAgainBtn');
// 语音播报函数
function speak(text) {
if ('speechSynthesis' in window) {
window.speechSynthesis.cancel();
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'zh-CN';
utterance.rate = 0.9;
utterance.pitch = 1.2;
utterance.volume = 1;
// 尝试使用中文语音
const voices = window.speechSynthesis.getVoices();
const chineseVoice = voices.find(voice => voice.lang === 'zh-CN');
if (chineseVoice) {
utterance.voice = chineseVoice;
}
window.speechSynthesis.speak(utterance);
}
}
// 播放正确音效
function playCorrectSound() {
try {
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);
oscillator.frequency.value = 880;
oscillator.type = 'sine';
gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
gainNode.gain.exponentialRampToValueAtTime(0.0001, audioContext.currentTime + 0.3);
oscillator.start();
oscillator.stop(audioContext.currentTime + 0.3);
} catch(e) {
console.log('音效播放失败');
}
}
// 播放错误音效
function playWrongSound() {
try {
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);
oscillator.frequency.value = 440;
oscillator.type = 'sawtooth';
gainNode.gain.setValueAtTime(0.2, audioContext.currentTime);
gainNode.gain.exponentialRampToValueAtTime(0.0001, audioContext.currentTime + 0.2);
oscillator.start();
oscillator.stop(audioContext.currentTime + 0.2);
} catch(e) {
console.log('音效播放失败');
}
}
// 播放完成音乐
function playCompleteMusic() {
try {
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const notes = [523.25, 587.33, 659.25, 698.46, 783.99, 880.00];
notes.forEach((freq, index) => {
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);
oscillator.frequency.value = freq;
oscillator.type = 'sine';
gainNode.gain.setValueAtTime(0.2, audioContext.currentTime + index * 0.15);
gainNode.gain.exponentialRampToValueAtTime(0.0001, audioContext.currentTime + (index * 0.15) + 0.2);
oscillator.start(audioContext.currentTime + index * 0.15);
oscillator.stop(audioContext.currentTime + (index * 0.15) + 0.2);
});
} catch(e) {
console.log('音乐播放失败');
}
}
// 更新UI
function updateUI() {
levelNumSpan.textContent = currentLevel + 1;
scoreNumSpan.textContent = score;
const level = levels[currentLevel];
objectDisplay.textContent = level.object;
// 生成影子选项
renderShadows(level.shadows);
}
// 渲染影子选项
function renderShadows(shadows) {
shadowsGrid.innerHTML = '';
shadows.forEach((shadow, index) => {
const shadowCard = document.createElement('div');
shadowCard.className = 'shadow-card';
shadowCard.innerHTML = `<div class="shadow-emoji">${shadow}</div>`;
shadowCard.addEventListener('click', () => checkAnswer(index));
shadowsGrid.appendChild(shadowCard);
});
}
// 检查答案
function checkAnswer(selectedIndex) {
if (!canSelect) return;
const level = levels[currentLevel];
const isCorrect = (selectedIndex === level.correctIndex);
const selectedEmoji = level.shadows[selectedIndex];
if (isCorrect) {
// 正确答案
canSelect = false;
score += 10;
scoreNumSpan.textContent = score;
// 高亮正确的卡片
const cards = document.querySelectorAll('.shadow-card');
cards[selectedIndex].classList.add('correct');
// 显示文字消息
messageArea.innerHTML = `🎉 正确！是${level.objectName}！ 🎉`;
// 语音播报
speak(`正确，是${level.objectName}`);
// 播放正确音效
playCorrectSound();
// 显示下一关按钮
nextLevelBtn.style.display = 'inline-block';
// 如果是最后一关
if (currentLevel === levels.length - 1) {
nextLevelBtn.textContent = '完成游戏 🏆';
}
} else {
// 错误答案
const cards = document.querySelectorAll('.shadow-card');
cards[selectedIndex].classList.add('wrong');
// 显示文字消息
messageArea.innerHTML = '😅 找错了，再试试！';
// 语音播报
speak('找错了，再试试');
// 播放错误音效
playWrongSound();
// 0.5秒后移除错误样式
setTimeout(() => {
cards[selectedIndex].classList.remove('wrong');
}, 500);
}
}
// 进入下一关
function nextLevel() {
if (currentLevel < levels.length - 1) {
currentLevel++;
canSelect = true;
nextLevelBtn.style.display = 'none';
messageArea.innerHTML = '✨ 进入下一关！继续找影子吧 ✨';
updateUI();
// 语音播报下一关
setTimeout(() => {
speak(`第${currentLevel + 1}关，找找${levels[currentLevel].objectName}的影子`);
}, 300);
} else {
// 完成所有关卡
completeGame();
}
}
// 完成游戏
function completeGame() {
gameContent.classList.add('hidden');
completionScreen.classList.remove('hidden');
// 播放完成音乐
playCompleteMusic();
// 语音播报
speak(`恭喜你完成了所有关卡！最终得分 ${score} 分！`);
}
// 重新开始游戏
function restartGame() {
currentLevel = 0;
score = 0;
canSelect = true;
nextLevelBtn.style.display = 'none';
gameContent.classList.remove('hidden');
completionScreen.classList.add('hidden');
updateUI();
messageArea.innerHTML = '💡 点击正确的影子就能过关啦！';
// 欢迎语音
setTimeout(() => {
speak("重新开始游戏！找到正确的影子就能过关啦！");
}, 300);
}
// 事件监听
nextLevelBtn.addEventListener('click', nextLevel);
restartBtn.addEventListener('click', restartGame);
playAgainBtn.addEventListener('click', restartGame);
// 初始化游戏
updateUI();
// 预加载语音系统
if ('speechSynthesis' in window) {
window.speechSynthesis.getVoices();
}
// 欢迎语音
setTimeout(() => {
speak(`欢迎来到找影子游戏！第一关，找找${levels[0].objectName}的影子`);
}, 500);
</script>
</body>
</html>'''
# 保存到指定路径
file_path = r'D:\test\20桌面素材\20260326动物影子配对\02声音提示正确 找影子游戏_儿童益智版.html'
# 确保目录存在
os.makedirs(os.path.dirname(file_path), exist_ok=True)
try:
with open(file_path, 'w', encoding='utf-8') as f:
f.write(html_content)
print(f'✅ 找影子游戏已成功生成！')
print(f'📁 文件保存位置: {file_path}')
print('🎮 游戏特性：')
print(' - 🎯 10个精彩关卡，每关一个主题物体')
print(' - 🔍 4个影子选项，需要找出正确匹配')
print(' - 🎨 影子使用浅色底纹，清晰可见')
print(' - 🗣️ 选中正确：语音播报"正确，是XX（动物名字）"')
print(' - 🗣️ 选中错误：语音播报"找错了，再试试"')
print(' - 🎵 正确/错误都有音效反馈')
print(' - ⭐ 每关正确+10分')
print(' - 🎉 完成所有关卡有庆祝音乐和语音')
print(' - 👶 专为3-6岁幼儿设计的简单操作')
print(' - 📱 响应式设计，支持平板和手机触摸')
return file_path
except Exception as e:
print(f'❌ 生成文件失败: {e}')
return None
if __name__ == '__main__':
generate_shadow_game()
有音频，但四个选项不是黑色的影子
三、转为黑色影子
python
'''
找动物影子，四选一， 有声音提示、白色底纹、黑色动物选项03
Deepseek，阿夏
20260326
'''
import os
def generate_shadow_game():
"""
生成找影子游戏HTML文件
4个黑色影子，1个彩色物体（人物、动物、家具等），一共10关
影子使用黑色剪影，选择后语音反馈
"""
html_content = '''<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>找影子 - 儿童益智游戏</title>
<style>
* {
user-select: none;
-webkit-tap-highlight-color: transparent;
}
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Segoe UI', 'Comic Neue', 'Comic Sans MS', 'Chalkboard SE', cursive, sans-serif;
margin: 0;
padding: 20px;
}
.game-container {
background: rgba(255, 255, 255, 0.95);
border-radius: 48px;
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
padding: 25px;
max-width: 800px;
width: 100%;
text-align: center;
}
/* 头部信息 */
.game-header {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
border-radius: 40px;
padding: 15px 25px;
margin-bottom: 25px;
display: flex;
justify-content: space-between;
align-items: center;
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}
.level-info, .score-info {
background: rgba(255,255,255,0.2);
padding: 8px 20px;
border-radius: 30px;
font-weight: bold;
font-size: 1.2rem;
}
.level-info span, .score-info span {
font-size: 1.5rem;
margin-left: 8px;
color: #ffeb3b;
}
/* 物体显示区域 */
.object-area {
background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
border-radius: 40px;
padding: 30px;
margin-bottom: 30px;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.object-title {
font-size: 1.3rem;
color: white;
margin-bottom: 15px;
font-weight: bold;
}
.object-display {
font-size: 8rem;
background: rgba(255,255,255,0.9);
border-radius: 30px;
padding: 20px;
display: inline-block;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
/* 影子选项区域 */
.shadows-area {
margin-bottom: 30px;
}
.shadows-title {
font-size: 1.2rem;
color: #764ba2;
margin-bottom: 20px;
font-weight: bold;
}
.shadows-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-bottom: 20px;
}
.shadow-card {
background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%);
border-radius: 25px;
padding: 20px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
position: relative;
overflow: hidden;
border: 2px solid #d0d7de;
}
.shadow-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
background: linear-gradient(135deg, #eef2f6 0%, #e0e4e8 100%);
}
.shadow-card.selected {
background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);
transform: scale(0.98);
border-color: #f39c12;
}
.shadow-card.correct {
background: linear-gradient(135deg, #a8e6cf 0%, #6ab04c 100%);
animation: correctAnimation 0.5s ease;
border-color: #27ae60;
}
.shadow-card.wrong {
background: linear-gradient(135deg, #ffb3ba 0%, #e74c3c 100%);
animation: wrongAnimation 0.3s ease;
border-color: #c0392b;
}
@keyframes correctAnimation {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.08); background: linear-gradient(135deg, #c8f0e0 0%, #82c45e 100%); }
}
@keyframes wrongAnimation {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-8px); }
75% { transform: translateX(8px); }
}
/* 影子效果 - 黑色剪影 */
.shadow-emoji {
font-size: 4rem;
transition: all 0.2s ease;
filter: brightness(0) invert(0) drop-shadow(2px 2px 4px rgba(0,0,0,0.2));
}
/* 正确时影子变成彩色庆祝 */
.shadow-card.correct .shadow-emoji {
filter: brightness(1) invert(0);
}
/* 消息区域 */
.message-area {
background: #f8f9fa;
border-radius: 30px;
padding: 12px;
margin: 15px 0;
font-size: 1.2rem;
font-weight: bold;
color: #2c3e50;
border: 2px solid #e0e0e0;
min-height: 60px;
display: flex;
align-items: center;
justify-content: center;
}
/* 按钮区域 */
.game-buttons {
display: flex;
gap: 15px;
justify-content: center;
}
button {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
font-family: inherit;
font-weight: bold;
font-size: 1rem;
padding: 10px 25px;
border-radius: 30px;
color: white;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}
button:hover {
transform: translateY(-2px);
box-shadow: 0 5px 12px rgba(0,0,0,0.3);
}
button:active {
transform: translateY(0px);
}
/* 响应式设计 */
@media (max-width: 600px) {
.shadows-grid {
gap: 12px;
}
.object-display {
font-size: 5rem;
padding: 15px;
}
.shadow-emoji {
font-size: 2.5rem;
}
.game-container {
padding: 15px;
}
.message-area {
font-size: 1rem;
min-height: 50px;
}
}
/* 完成界面 */
.completion-screen {
text-align: center;
padding: 30px;
}
.completion-screen h2 {
color: #f5576c;
font-size: 2rem;
margin-bottom: 20px;
}
.completion-screen p {
font-size: 1.2rem;
color: #667eea;
margin-bottom: 30px;
}
.completion-emoji {
font-size: 5rem;
margin: 20px 0;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="game-container" id="gameContainer">
<div class="game-header">
<div class="level-info">📚 第 <span id="levelNum">1</span> 关</div>
<div class="score-info">⭐ 得分 <span id="scoreNum">0</span></div>
</div>
<div id="gameContent">
<div class="object-area">
<div class="object-title">🔍 找到下面这个物体的影子</div>
<div class="object-display" id="objectDisplay">🐶</div>
</div>
<div class="shadows-area">
<div class="shadows-title">❓ 哪个是它的影子？（黑色剪影）</div>
<div class="shadows-grid" id="shadowsGrid"></div>
</div>
<div class="message-area" id="messageArea">
💡 点击正确的黑色影子就能过关啦！
</div>
<div class="game-buttons">
<button id="nextLevelBtn" style="display: none;">下一关 🎮</button>
<button id="restartBtn">重新开始 🔄</button>
</div>
</div>
<div id="completionScreen" class="completion-screen hidden">
<div class="completion-emoji">🏆</div>
<h2>恭喜你完成所有关卡！</h2>
<p>你真是个找影子小能手！</p>
<button id="playAgainBtn">再玩一次 🎮</button>
</div>
</div>
<script>
// 游戏数据 - 10个关卡，每个关卡包含一个彩色物体和对应的黑色影子
const levels = [
{ object: "🐶", objectName: "小狗", shadows: ["🐱", "🐭", "🐹", "🐶"], correctIndex: 3 },
{ object: "🐱", objectName: "小猫", shadows: ["🐶", "🐭", "🐱", "🐹"], correctIndex: 2 },
{ object: "🐭", objectName: "小老鼠", shadows: ["🐹", "🐱", "🐶", "🐭"], correctIndex: 3 },
{ object: "🐮", objectName: "奶牛", shadows: ["🐷", "🐮", "🐑", "🐴"], correctIndex: 1 },
{ object: "🐷", objectName: "小猪", shadows: ["🐮", "🐑", "🐷", "🐴"], correctIndex: 2 },
{ object: "🦁", objectName: "狮子", shadows: ["🐯", "🦁", "🐻", "🐨"], correctIndex: 1 },
{ object: "🐧", objectName: "企鹅", shadows: ["🐦", "🦆", "🐧", "🦉"], correctIndex: 2 },
{ object: "🍎", objectName: "苹果", shadows: ["🍊", "🍎", "🍓", "🍒"], correctIndex: 1 },
{ object: "🚗", objectName: "小汽车", shadows: ["🚲", "🚗", "🚌", "🚑"], correctIndex: 1 },
{ object: "🏠", objectName: "房子", shadows: ["🏢", "🏠", "🏪", "🏫"], correctIndex: 1 }
];
let currentLevel = 0;
let score = 0;
let canSelect = true;
let selectedIndex = -1;
// DOM 元素
const gameContent = document.getElementById('gameContent');
const completionScreen = document.getElementById('completionScreen');
const levelNumSpan = document.getElementById('levelNum');
const scoreNumSpan = document.getElementById('scoreNum');
const objectDisplay = document.getElementById('objectDisplay');
const shadowsGrid = document.getElementById('shadowsGrid');
const messageArea = document.getElementById('messageArea');
const nextLevelBtn = document.getElementById('nextLevelBtn');
const restartBtn = document.getElementById('restartBtn');
const playAgainBtn = document.getElementById('playAgainBtn');
// 语音播报函数
function speak(text) {
if ('speechSynthesis' in window) {
window.speechSynthesis.cancel();
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'zh-CN';
utterance.rate = 0.9;
utterance.pitch = 1.2;
utterance.volume = 1;
// 尝试使用中文语音
const voices = window.speechSynthesis.getVoices();
const chineseVoice = voices.find(voice => voice.lang === 'zh-CN');
if (chineseVoice) {
utterance.voice = chineseVoice;
}
window.speechSynthesis.speak(utterance);
}
}
// 播放正确音效
function playCorrectSound() {
try {
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);
oscillator.frequency.value = 880;
oscillator.type = 'sine';
gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
gainNode.gain.exponentialRampToValueAtTime(0.0001, audioContext.currentTime + 0.3);
oscillator.start();
oscillator.stop(audioContext.currentTime + 0.3);
} catch(e) {
console.log('音效播放失败');
}
}
// 播放错误音效
function playWrongSound() {
try {
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);
oscillator.frequency.value = 440;
oscillator.type = 'sawtooth';
gainNode.gain.setValueAtTime(0.2, audioContext.currentTime);
gainNode.gain.exponentialRampToValueAtTime(0.0001, audioContext.currentTime + 0.2);
oscillator.start();
oscillator.stop(audioContext.currentTime + 0.2);
} catch(e) {
console.log('音效播放失败');
}
}
// 播放完成音乐
function playCompleteMusic() {
try {
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const notes = [523.25, 587.33, 659.25, 698.46, 783.99, 880.00];
notes.forEach((freq, index) => {
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);
oscillator.frequency.value = freq;
oscillator.type = 'sine';
gainNode.gain.setValueAtTime(0.2, audioContext.currentTime + index * 0.15);
gainNode.gain.exponentialRampToValueAtTime(0.0001, audioContext.currentTime + (index * 0.15) + 0.2);
oscillator.start(audioContext.currentTime + index * 0.15);
oscillator.stop(audioContext.currentTime + (index * 0.15) + 0.2);
});
} catch(e) {
console.log('音乐播放失败');
}
}
// 更新UI
function updateUI() {
levelNumSpan.textContent = currentLevel + 1;
scoreNumSpan.textContent = score;
const level = levels[currentLevel];
objectDisplay.textContent = level.object;
// 生成影子选项
renderShadows(level.shadows);
}
// 渲染影子选项 - 所有影子都是黑色剪影效果
function renderShadows(shadows) {
shadowsGrid.innerHTML = '';
shadows.forEach((shadow, index) => {
const shadowCard = document.createElement('div');
shadowCard.className = 'shadow-card';
shadowCard.innerHTML = `<div class="shadow-emoji">${shadow}</div>`;
shadowCard.addEventListener('click', () => checkAnswer(index));
shadowsGrid.appendChild(shadowCard);
});
}
// 检查答案
function checkAnswer(selectedIndex) {
if (!canSelect) return;
const level = levels[currentLevel];
const isCorrect = (selectedIndex === level.correctIndex);
const selectedEmoji = level.shadows[selectedIndex];
if (isCorrect) {
// 正确答案
canSelect = false;
score += 10;
scoreNumSpan.textContent = score;
// 高亮正确的卡片
const cards = document.querySelectorAll('.shadow-card');
cards[selectedIndex].classList.add('correct');
// 显示文字消息
messageArea.innerHTML = `🎉 正确！${level.objectName}的影子是黑色剪影！ 🎉`;
// 语音播报
speak(`正确，是${level.objectName}`);
// 播放正确音效
playCorrectSound();
// 显示下一关按钮
nextLevelBtn.style.display = 'inline-block';
// 如果是最后一关
if (currentLevel === levels.length - 1) {
nextLevelBtn.textContent = '完成游戏 🏆';
}
} else {
// 错误答案
const cards = document.querySelectorAll('.shadow-card');
cards[selectedIndex].classList.add('wrong');
// 显示文字消息
messageArea.innerHTML = '😅 找错了，再试试！';
// 语音播报
speak('找错了，再试试');
// 播放错误音效
playWrongSound();
// 0.5秒后移除错误样式
setTimeout(() => {
cards[selectedIndex].classList.remove('wrong');
}, 500);
}
}
// 进入下一关
function nextLevel() {
if (currentLevel < levels.length - 1) {
currentLevel++;
canSelect = true;
nextLevelBtn.style.display = 'none';
messageArea.innerHTML = '✨ 进入下一关！继续找黑色影子吧 ✨';
updateUI();
// 语音播报下一关
setTimeout(() => {
speak(`第${currentLevel + 1}关，找找${levels[currentLevel].objectName}的影子`);
}, 300);
} else {
// 完成所有关卡
completeGame();
}
}
// 完成游戏
function completeGame() {
gameContent.classList.add('hidden');
completionScreen.classList.remove('hidden');
// 播放完成音乐
playCompleteMusic();
// 语音播报
speak(`恭喜你完成了所有关卡！最终得分 ${score} 分！`);
}
// 重新开始游戏
function restartGame() {
currentLevel = 0;
score = 0;
canSelect = true;
nextLevelBtn.style.display = 'none';
gameContent.classList.remove('hidden');
completionScreen.classList.add('hidden');
updateUI();
messageArea.innerHTML = '💡 点击正确的黑色影子就能过关啦！';
// 欢迎语音
setTimeout(() => {
speak("重新开始游戏！找到正确的黑色影子就能过关啦！");
}, 300);
}
// 事件监听
nextLevelBtn.addEventListener('click', nextLevel);
restartBtn.addEventListener('click', restartGame);
playAgainBtn.addEventListener('click', restartGame);
// 初始化游戏
updateUI();
// 预加载语音系统
if ('speechSynthesis' in window) {
window.speechSynthesis.getVoices();
}
// 欢迎语音
setTimeout(() => {
speak(`欢迎来到找影子游戏！第一关，找找${levels[0].objectName}的黑色影子`);
}, 500);
</script>
</body>
</html>'''
# 保存到指定路径
file_path = r'D:\test\20桌面素材\20260326动物影子配对\03黑色影子 找影子游戏_儿童益智版.html'
# 确保目录存在
os.makedirs(os.path.dirname(file_path), exist_ok=True)
try:
with open(file_path, 'w', encoding='utf-8') as f:
f.write(html_content)
print(f'✅ 找影子游戏已成功生成！')
print(f'📁 文件保存位置: {file_path}')
print('🎮 游戏特性：')
print(' - 🎯 10个精彩关卡，每关一个彩色物体')
print(' - 🔍 4个黑色剪影选项，需要找出正确匹配')
print(' - 🖤 影子使用黑色剪影效果，清晰区分彩色物体')
print(' - 🗣️ 选中正确：语音播报"正确，是XX（动物名字）"')
print(' - 🗣️ 选中错误：语音播报"找错了，再试试"')
print(' - 🎵 正确/错误都有音效反馈')
print(' - ⭐ 每关正确+10分')
print(' - 🎉 完成所有关卡有庆祝音乐和语音')
print(' - 👶 专为3-6岁幼儿设计的简单操作')
print(' - 📱 响应式设计，支持平板和手机触摸')
return file_path
except Exception as e:
print(f'❌ 生成文件失败: {e}')
return None
if __name__ == '__main__':
generate_shadow_game()
四、三十关
python
'''
找动物影子，四选一， 有声音提示、白色底纹、黑色动物选项04
制作30关（内有重复）
Deepseek，阿夏
20260326
'''
import os
def generate_shadow_game():
"""
生成找影子游戏HTML文件
4个黑色影子，1个彩色物体，一共30关
影子使用黑色剪影，选择后语音反馈
"""
html_content = '''<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>找影子 - 儿童益智游戏（30关）</title>
<style>
* {
user-select: none;
-webkit-tap-highlight-color: transparent;
}
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Segoe UI', 'Comic Neue', 'Comic Sans MS', 'Chalkboard SE', cursive, sans-serif;
margin: 0;
padding: 20px;
}
.game-container {
background: rgba(255, 255, 255, 0.95);
border-radius: 48px;
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
padding: 25px;
max-width: 800px;
width: 100%;
text-align: center;
}
/* 头部信息 */
.game-header {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
border-radius: 40px;
padding: 15px 25px;
margin-bottom: 25px;
display: flex;
justify-content: space-between;
align-items: center;
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}
.level-info, .score-info {
background: rgba(255,255,255,0.2);
padding: 8px 20px;
border-radius: 30px;
font-weight: bold;
font-size: 1.2rem;
}
.level-info span, .score-info span {
font-size: 1.5rem;
margin-left: 8px;
color: #ffeb3b;
}
/* 物体显示区域 */
.object-area {
background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
border-radius: 40px;
padding: 30px;
margin-bottom: 30px;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.object-title {
font-size: 1.3rem;
color: white;
margin-bottom: 15px;
font-weight: bold;
}
.object-display {
font-size: 8rem;
background: rgba(255,255,255,0.9);
border-radius: 30px;
padding: 20px;
display: inline-block;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
/* 影子选项区域 */
.shadows-area {
margin-bottom: 30px;
}
.shadows-title {
font-size: 1.2rem;
color: #764ba2;
margin-bottom: 20px;
font-weight: bold;
}
.shadows-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-bottom: 20px;
}
.shadow-card {
background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%);
border-radius: 25px;
padding: 20px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
position: relative;
overflow: hidden;
border: 2px solid #d0d7de;
}
.shadow-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
background: linear-gradient(135deg, #eef2f6 0%, #e0e4e8 100%);
}
.shadow-card.selected {
background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);
transform: scale(0.98);
border-color: #f39c12;
}
.shadow-card.correct {
background: linear-gradient(135deg, #a8e6cf 0%, #6ab04c 100%);
animation: correctAnimation 0.5s ease;
border-color: #27ae60;
}
.shadow-card.wrong {
background: linear-gradient(135deg, #ffb3ba 0%, #e74c3c 100%);
animation: wrongAnimation 0.3s ease;
border-color: #c0392b;
}
@keyframes correctAnimation {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.08); background: linear-gradient(135deg, #c8f0e0 0%, #82c45e 100%); }
}
@keyframes wrongAnimation {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-8px); }
75% { transform: translateX(8px); }
}
/* 影子效果 - 黑色剪影 */
.shadow-emoji {
font-size: 4rem;
transition: all 0.2s ease;
filter: brightness(0) invert(0) drop-shadow(2px 2px 4px rgba(0,0,0,0.2));
}
/* 正确时影子变成彩色庆祝 */
.shadow-card.correct .shadow-emoji {
filter: brightness(1) invert(0);
}
/* 消息区域 */
.message-area {
background: #f8f9fa;
border-radius: 30px;
padding: 12px;
margin: 15px 0;
font-size: 1.2rem;
font-weight: bold;
color: #2c3e50;
border: 2px solid #e0e0e0;
min-height: 60px;
display: flex;
align-items: center;
justify-content: center;
}
/* 按钮区域 */
.game-buttons {
display: flex;
gap: 15px;
justify-content: center;
}
button {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
font-family: inherit;
font-weight: bold;
font-size: 1rem;
padding: 10px 25px;
border-radius: 30px;
color: white;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}
button:hover {
transform: translateY(-2px);
box-shadow: 0 5px 12px rgba(0,0,0,0.3);
}
button:active {
transform: translateY(0px);
}
/* 进度条 */
.progress-bar {
margin: 15px 0;
background: #e0e0e0;
border-radius: 20px;
height: 10px;
overflow: hidden;
}
.progress-fill {
background: linear-gradient(90deg, #f093fb, #f5576c);
height: 100%;
width: 0%;
transition: width 0.3s ease;
border-radius: 20px;
}
/* 响应式设计 */
@media (max-width: 600px) {
.shadows-grid {
gap: 12px;
}
.object-display {
font-size: 5rem;
padding: 15px;
}
.shadow-emoji {
font-size: 2.5rem;
}
.game-container {
padding: 15px;
}
.message-area {
font-size: 1rem;
min-height: 50px;
}
}
/* 完成界面 */
.completion-screen {
text-align: center;
padding: 30px;
}
.completion-screen h2 {
color: #f5576c;
font-size: 2rem;
margin-bottom: 20px;
}
.completion-screen p {
font-size: 1.2rem;
color: #667eea;
margin-bottom: 30px;
}
.completion-emoji {
font-size: 5rem;
margin: 20px 0;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="game-container" id="gameContainer">
<div class="game-header">
<div class="level-info">📚 第 <span id="levelNum">1</span> / <span id="totalLevels">30</span> 关</div>
<div class="score-info">⭐ 得分 <span id="scoreNum">0</span></div>
</div>
<div class="progress-bar">
<div class="progress-fill" id="progressFill"></div>
</div>
<div id="gameContent">
<div class="object-area">
<div class="object-title">🔍 找到下面这个物体的影子</div>
<div class="object-display" id="objectDisplay">🐶</div>
</div>
<div class="shadows-area">
<div class="shadows-title">❓ 哪个是它的影子？（黑色剪影）</div>
<div class="shadows-grid" id="shadowsGrid"></div>
</div>
<div class="message-area" id="messageArea">
💡 点击正确的黑色影子就能过关啦！
</div>
<div class="game-buttons">
<button id="nextLevelBtn" style="display: none;">下一关 🎮</button>
<button id="restartBtn">重新开始 🔄</button>
</div>
</div>
<div id="completionScreen" class="completion-screen hidden">
<div class="completion-emoji">🏆</div>
<h2>恭喜你完成所有30关！</h2>
<p>你真是个找影子小能手！</p>
<button id="playAgainBtn">再玩一次 🎮</button>
</div>
</div>
<script>
// 游戏数据 - 30个关卡，包含动物、水果、交通工具、生活用品等
const levels = [
// 动物类 (1-12)
{ object: "🐶", objectName: "小狗", shadows: ["🐱", "🐭", "🐹", "🐶"], correctIndex: 3 },
{ object: "🐱", objectName: "小猫", shadows: ["🐶", "🐭", "🐱", "🐹"], correctIndex: 2 },
{ object: "🐭", objectName: "小老鼠", shadows: ["🐹", "🐱", "🐶", "🐭"], correctIndex: 3 },
{ object: "🐮", objectName: "奶牛", shadows: ["🐷", "🐮", "🐑", "🐴"], correctIndex: 1 },
{ object: "🐷", objectName: "小猪", shadows: ["🐮", "🐑", "🐷", "🐴"], correctIndex: 2 },
{ object: "🦁", objectName: "狮子", shadows: ["🐯", "🦁", "🐻", "🐨"], correctIndex: 1 },
{ object: "🐧", objectName: "企鹅", shadows: ["🐦", "🦆", "🐧", "🦉"], correctIndex: 2 },
{ object: "🐘", objectName: "大象", shadows: ["🦒", "🐘", "🦏", "🐫"], correctIndex: 1 },
{ object: "🦒", objectName: "长颈鹿", shadows: ["🐘", "🦒", "🦏", "🐪"], correctIndex: 1 },
{ object: "🐒", objectName: "猴子", shadows: ["🦍", "🐒", "🐵", "🦧"], correctIndex: 1 },
{ object: "🐺", objectName: "狼", shadows: ["🐶", "🐺", "🦊", "🐱"], correctIndex: 1 },
{ object: "🦊", objectName: "狐狸", shadows: ["🐺", "🦊", "🐶", "🐱"], correctIndex: 1 },
// 水果类 (13-18)
{ object: "🍎", objectName: "苹果", shadows: ["🍊", "🍎", "🍓", "🍒"], correctIndex: 1 },
{ object: "🍊", objectName: "橙子", shadows: ["🍎", "🍊", "🍓", "🍒"], correctIndex: 1 },
{ object: "🍓", objectName: "草莓", shadows: ["🍎", "🍊", "🍓", "🍒"], correctIndex: 2 },
{ object: "🍉", objectName: "西瓜", shadows: ["🍎", "🍊", "🍉", "🍒"], correctIndex: 2 },
{ object: "🍌", objectName: "香蕉", shadows: ["🍎", "🍊", "🍌", "🍒"], correctIndex: 2 },
{ object: "🍒", objectName: "樱桃", shadows: ["🍎", "🍊", "🍓", "🍒"], correctIndex: 3 },
// 交通工具类 (19-24)
{ object: "🚗", objectName: "小汽车", shadows: ["🚲", "🚗", "🚌", "🚑"], correctIndex: 1 },
{ object: "🚌", objectName: "公交车", shadows: ["🚗", "🚌", "🚑", "🚲"], correctIndex: 1 },
{ object: "🚲", objectName: "自行车", shadows: ["🚗", "🚌", "🚲", "🚑"], correctIndex: 2 },
{ object: "✈️", objectName: "飞机", shadows: ["🚁", "✈️", "🛸", "🚀"], correctIndex: 1 },
{ object: "🚀", objectName: "火箭", shadows: ["🚁", "✈️", "🛸", "🚀"], correctIndex: 3 },
{ object: "🚢", objectName: "轮船", shadows: ["⛵", "🚢", "🛳️", "🚤"], correctIndex: 1 },
// 生活用品类 (25-30)
{ object: "🏠", objectName: "房子", shadows: ["🏢", "🏠", "🏪", "🏫"], correctIndex: 1 },
{ object: "📚", objectName: "书本", shadows: ["📱", "📚", "✏️", "📖"], correctIndex: 1 },
{ object: "☎️", objectName: "电话", shadows: ["📱", "☎️", "💻", "📺"], correctIndex: 1 },
{ object: "💡", objectName: "灯泡", shadows: ["🔦", "💡", "🕯️", "🔋"], correctIndex: 1 },
{ object: "⌚", objectName: "手表", shadows: ["📱", "⌚", "💍", "👑"], correctIndex: 1 },
{ object: "🎈", objectName: "气球", shadows: ["🎈", "🎉", "🎁", "🎀"], correctIndex: 0 }
];
let currentLevel = 0;
let score = 0;
let canSelect = true;
let selectedIndex = -1;
// DOM 元素
const gameContent = document.getElementById('gameContent');
const completionScreen = document.getElementById('completionScreen');
const levelNumSpan = document.getElementById('levelNum');
const totalLevelsSpan = document.getElementById('totalLevels');
const scoreNumSpan = document.getElementById('scoreNum');
const objectDisplay = document.getElementById('objectDisplay');
const shadowsGrid = document.getElementById('shadowsGrid');
const messageArea = document.getElementById('messageArea');
const nextLevelBtn = document.getElementById('nextLevelBtn');
const restartBtn = document.getElementById('restartBtn');
const playAgainBtn = document.getElementById('playAgainBtn');
const progressFill = document.getElementById('progressFill');
// 更新进度条
function updateProgress() {
const progress = ((currentLevel) / levels.length) * 100;
progressFill.style.width = `${progress}%`;
}
// 语音播报函数
function speak(text) {
if ('speechSynthesis' in window) {
window.speechSynthesis.cancel();
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'zh-CN';
utterance.rate = 0.9;
utterance.pitch = 1.2;
utterance.volume = 1;
// 尝试使用中文语音
const voices = window.speechSynthesis.getVoices();
const chineseVoice = voices.find(voice => voice.lang === 'zh-CN');
if (chineseVoice) {
utterance.voice = chineseVoice;
}
window.speechSynthesis.speak(utterance);
}
}
// 播放正确音效
function playCorrectSound() {
try {
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);
oscillator.frequency.value = 880;
oscillator.type = 'sine';
gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
gainNode.gain.exponentialRampToValueAtTime(0.0001, audioContext.currentTime + 0.3);
oscillator.start();
oscillator.stop(audioContext.currentTime + 0.3);
} catch(e) {
console.log('音效播放失败');
}
}
// 播放错误音效
function playWrongSound() {
try {
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);
oscillator.frequency.value = 440;
oscillator.type = 'sawtooth';
gainNode.gain.setValueAtTime(0.2, audioContext.currentTime);
gainNode.gain.exponentialRampToValueAtTime(0.0001, audioContext.currentTime + 0.2);
oscillator.start();
oscillator.stop(audioContext.currentTime + 0.2);
} catch(e) {
console.log('音效播放失败');
}
}
// 播放完成音乐
function playCompleteMusic() {
try {
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const notes = [523.25, 587.33, 659.25, 698.46, 783.99, 880.00];
notes.forEach((freq, index) => {
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);
oscillator.frequency.value = freq;
oscillator.type = 'sine';
gainNode.gain.setValueAtTime(0.2, audioContext.currentTime + index * 0.15);
gainNode.gain.exponentialRampToValueAtTime(0.0001, audioContext.currentTime + (index * 0.15) + 0.2);
oscillator.start(audioContext.currentTime + index * 0.15);
oscillator.stop(audioContext.currentTime + (index * 0.15) + 0.2);
});
} catch(e) {
console.log('音乐播放失败');
}
}
// 更新UI
function updateUI() {
levelNumSpan.textContent = currentLevel + 1;
scoreNumSpan.textContent = score;
updateProgress();
const level = levels[currentLevel];
objectDisplay.textContent = level.object;
// 生成影子选项
renderShadows(level.shadows);
}
// 渲染影子选项 - 所有影子都是黑色剪影效果
function renderShadows(shadows) {
shadowsGrid.innerHTML = '';
shadows.forEach((shadow, index) => {
const shadowCard = document.createElement('div');
shadowCard.className = 'shadow-card';
shadowCard.innerHTML = `<div class="shadow-emoji">${shadow}</div>`;
shadowCard.addEventListener('click', () => checkAnswer(index));
shadowsGrid.appendChild(shadowCard);
});
}
// 检查答案
function checkAnswer(selectedIndex) {
if (!canSelect) return;
const level = levels[currentLevel];
const isCorrect = (selectedIndex === level.correctIndex);
const selectedEmoji = level.shadows[selectedIndex];
if (isCorrect) {
// 正确答案
canSelect = false;
score += 10;
scoreNumSpan.textContent = score;
// 高亮正确的卡片
const cards = document.querySelectorAll('.shadow-card');
cards[selectedIndex].classList.add('correct');
// 显示文字消息
messageArea.innerHTML = `🎉 正确！${level.objectName}的影子是黑色剪影！ 🎉`;
// 语音播报
speak(`正确，是${level.objectName}`);
// 播放正确音效
playCorrectSound();
// 显示下一关按钮
nextLevelBtn.style.display = 'inline-block';
// 如果是最后一关
if (currentLevel === levels.length - 1) {
nextLevelBtn.textContent = '完成游戏 🏆';
}
} else {
// 错误答案
const cards = document.querySelectorAll('.shadow-card');
cards[selectedIndex].classList.add('wrong');
// 显示文字消息
messageArea.innerHTML = '😅 找错了，再试试！';
// 语音播报
speak('找错了，再试试');
// 播放错误音效
playWrongSound();
// 0.5秒后移除错误样式
setTimeout(() => {
cards[selectedIndex].classList.remove('wrong');
}, 500);
}
}
// 进入下一关
function nextLevel() {
if (currentLevel < levels.length - 1) {
currentLevel++;
canSelect = true;
nextLevelBtn.style.display = 'none';
messageArea.innerHTML = '✨ 进入下一关！继续找黑色影子吧 ✨';
updateUI();
// 语音播报下一关
setTimeout(() => {
speak(`第${currentLevel + 1}关，找找${levels[currentLevel].objectName}的影子`);
}, 300);
} else {
// 完成所有关卡
completeGame();
}
}
// 完成游戏
function completeGame() {
gameContent.classList.add('hidden');
completionScreen.classList.remove('hidden');
// 播放完成音乐
playCompleteMusic();
// 语音播报
speak(`恭喜你完成了所有30关！最终得分 ${score} 分！`);
}
// 重新开始游戏
function restartGame() {
currentLevel = 0;
score = 0;
canSelect = true;
nextLevelBtn.style.display = 'none';
gameContent.classList.remove('hidden');
completionScreen.classList.add('hidden');
updateUI();
messageArea.innerHTML = '💡 点击正确的黑色影子就能过关啦！';
updateProgress();
// 欢迎语音
setTimeout(() => {
speak("重新开始游戏！找到正确的黑色影子就能过关啦！");
}, 300);
}
// 事件监听
nextLevelBtn.addEventListener('click', nextLevel);
restartBtn.addEventListener('click', restartGame);
playAgainBtn.addEventListener('click', restartGame);
// 设置总关卡数
totalLevelsSpan.textContent = levels.length;
// 初始化游戏
updateUI();
// 预加载语音系统
if ('speechSynthesis' in window) {
window.speechSynthesis.getVoices();
}
// 欢迎语音
setTimeout(() => {
speak(`欢迎来到找影子游戏！一共30关，第一关，找找${levels[0].objectName}的黑色影子`);
}, 500);
</script>
</body>
</html>'''
# 保存到指定路径
file_path = r'D:\test\20桌面素材\20260326动物影子配对\04 30关找影子游戏_儿童益智版.html'
# 确保目录存在
os.makedirs(os.path.dirname(file_path), exist_ok=True)
try:
with open(file_path, 'w', encoding='utf-8') as f:
f.write(html_content)
print(f'✅ 找影子游戏（30关）已成功生成！')
print(f'📁 文件保存位置: {file_path}')
print('🎮 游戏特性：')
print(' - 🎯 30个精彩关卡，内容丰富多样')
print(' - 🐶 动物类：小狗、小猫、小老鼠、奶牛、小猪、狮子、企鹅、大象、长颈鹿、猴子、狼、狐狸')
print(' - 🍎 水果类：苹果、橙子、草莓、西瓜、香蕉、樱桃')
print(' - 🚗 交通工具：小汽车、公交车、自行车、飞机、火箭、轮船')
print(' - 🏠 生活用品：房子、书本、电话、灯泡、手表、气球')
print(' - 🔍 4个黑色剪影选项，需要找出正确匹配')
print(' - 🖤 影子使用黑色剪影效果，清晰区分彩色物体')
print(' - 🗣️ 选中正确：语音播报"正确，是XX"')
print(' - 🗣️ 选中错误：语音播报"找错了，再试试"')
print(' - 🎵 正确/错误都有音效反馈')
print(' - ⭐ 每关正确+10分，总分300分')
print(' - 📊 进度条显示通关进度')
print(' - 🎉 完成所有30关有庆祝音乐和语音')
print(' - 👶 专为3-6岁幼儿设计的简单操作')
print(' - 📱 响应式设计，支持平板和手机触摸')
return file_path
except Exception as e:
print(f'❌ 生成文件失败: {e}')
return None
if __name__ == '__main__':
generate_shadow_game()
五、不要滚动条
python
'''
找动物影子，四选一， 有声音提示、白色底纹、黑色动物选项05
制作30关（内有重复）
无滚动条
Deepseek，阿夏
20260326
'''
import os
def generate_shadow_game():
"""
生成找影子游戏HTML文件
4个黑色影子，1个彩色物体，一共30关
影子使用黑色剪影，选择后语音反馈
优化布局，无需滚动条
"""
html_content = '''<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
<title>找影子 - 儿童益智游戏（30关）</title>
<style>
* {
user-select: none;
-webkit-tap-highlight-color: transparent;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Segoe UI', 'Comic Neue', 'Comic Sans MS', 'Chalkboard SE', cursive, sans-serif;
overflow: hidden;
position: fixed;
}
.game-container {
background: rgba(255, 255, 255, 0.95);
border-radius: 48px;
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
padding: 20px;
max-width: 700px;
width: 90%;
height: auto;
max-height: 95vh;
display: flex;
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
}
/* 自定义滚动条（更美观） */
.game-container::-webkit-scrollbar {
width: 4px;
}
.game-container::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.game-container::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}
/* 头部信息 */
.game-header {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
border-radius: 40px;
padding: 12px 20px;
margin-bottom: 15px;
display: flex;
justify-content: space-between;
align-items: center;
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
flex-shrink: 0;
}
.level-info, .score-info {
background: rgba(255,255,255,0.2);
padding: 5px 15px;
border-radius: 30px;
font-weight: bold;
font-size: 0.9rem;
}
.level-info span, .score-info span {
font-size: 1.2rem;
margin-left: 5px;
color: #ffeb3b;
}
/* 物体显示区域 */
.object-area {
background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
border-radius: 35px;
padding: 15px;
margin-bottom: 15px;
box-shadow: 0 8px 15px rgba(0,0,0,0.1);
flex-shrink: 0;
}
.object-title {
font-size: 1rem;
color: white;
margin-bottom: 10px;
font-weight: bold;
}
.object-display {
font-size: 5rem;
background: rgba(255,255,255,0.9);
border-radius: 25px;
padding: 10px;
display: inline-block;
box-shadow: 0 5px 12px rgba(0,0,0,0.2);
}
/* 影子选项区域 */
.shadows-area {
margin-bottom: 15px;
flex-shrink: 0;
}
.shadows-title {
font-size: 1rem;
color: #764ba2;
margin-bottom: 12px;
font-weight: bold;
}
.shadows-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
margin-bottom: 10px;
}
.shadow-card {
background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%);
border-radius: 20px;
padding: 15px;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
border: 2px solid #d0d7de;
}
.shadow-card:hover {
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}
.shadow-card.selected {
background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);
transform: scale(0.98);
border-color: #f39c12;
}
.shadow-card.correct {
background: linear-gradient(135deg, #a8e6cf 0%, #6ab04c 100%);
animation: correctAnimation 0.5s ease;
border-color: #27ae60;
}
.shadow-card.wrong {
background: linear-gradient(135deg, #ffb3ba 0%, #e74c3c 100%);
animation: wrongAnimation 0.3s ease;
border-color: #c0392b;
}
@keyframes correctAnimation {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
@keyframes wrongAnimation {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
/* 影子效果 - 黑色剪影 */
.shadow-emoji {
font-size: 2.8rem;
transition: all 0.2s ease;
filter: brightness(0) invert(0) drop-shadow(1px 1px 2px rgba(0,0,0,0.2));
}
/* 正确时影子变成彩色庆祝 */
.shadow-card.correct .shadow-emoji {
filter: brightness(1) invert(0);
}
/* 消息区域 */
.message-area {
background: #f8f9fa;
border-radius: 25px;
padding: 8px;
margin: 10px 0;
font-size: 0.9rem;
font-weight: bold;
color: #2c3e50;
border: 2px solid #e0e0e0;
min-height: 50px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* 按钮区域 */
.game-buttons {
display: flex;
gap: 12px;
justify-content: center;
flex-shrink: 0;
}
button {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
font-family: inherit;
font-weight: bold;
font-size: 0.9rem;
padding: 8px 20px;
border-radius: 25px;
color: white;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}
button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}
button:active {
transform: translateY(0px);
}
/* 进度条 */
.progress-bar {
margin: 8px 0 12px 0;
background: #e0e0e0;
border-radius: 15px;
height: 6px;
overflow: hidden;
flex-shrink: 0;
}
.progress-fill {
background: linear-gradient(90deg, #f093fb, #f5576c);
height: 100%;
width: 0%;
transition: width 0.3s ease;
border-radius: 15px;
}
/* 完成界面 */
.completion-screen {
text-align: center;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 300px;
}
.completion-screen h2 {
color: #f5576c;
font-size: 1.5rem;
margin: 15px 0;
}
.completion-screen p {
font-size: 1rem;
color: #667eea;
margin-bottom: 20px;
}
.completion-emoji {
font-size: 4rem;
margin: 15px 0;
}
.hidden {
display: none;
}
/* 响应式设计 - 小屏幕优化 */
@media (max-width: 600px) {
.game-container {
padding: 15px;
width: 95%;
}
.shadows-grid {
gap: 10px;
}
.object-display {
font-size: 3.5rem;
padding: 8px;
}
.shadow-emoji {
font-size: 2rem;
}
.game-header {
padding: 8px 15px;
}
.level-info, .score-info {
font-size: 0.8rem;
padding: 4px 12px;
}
.level-info span, .score-info span {
font-size: 1rem;
}
.object-title, .shadows-title {
font-size: 0.9rem;
}
.message-area {
font-size: 0.8rem;
min-height: 45px;
}
button {
font-size: 0.8rem;
padding: 6px 15px;
}
}
@media (max-width: 450px) {
.shadow-emoji {
font-size: 1.8rem;
}
.object-display {
font-size: 3rem;
}
.shadows-grid {
gap: 8px;
}
}
</style>
</head>
<body>
<div class="game-container" id="gameContainer">
<div class="game-header">
<div class="level-info">📚 第 <span id="levelNum">1</span> / <span id="totalLevels">30</span> 关</div>
<div class="score-info">⭐ 得分 <span id="scoreNum">0</span></div>
</div>
<div class="progress-bar">
<div class="progress-fill" id="progressFill"></div>
</div>
<div id="gameContent">
<div class="object-area">
<div class="object-title">🔍 找到下面这个物体的影子</div>
<div class="object-display" id="objectDisplay">🐶</div>
</div>
<div class="shadows-area">
<div class="shadows-title">❓ 哪个是它的影子？（黑色剪影）</div>
<div class="shadows-grid" id="shadowsGrid"></div>
</div>
<div class="message-area" id="messageArea">
💡 点击正确的黑色影子就能过关啦！
</div>
<div class="game-buttons">
<button id="nextLevelBtn" style="display: none;">下一关 🎮</button>
<button id="restartBtn">重新开始 🔄</button>
</div>
</div>
<div id="completionScreen" class="completion-screen hidden">
<div class="completion-emoji">🏆</div>
<h2>恭喜你完成所有30关！</h2>
<p>你真是个找影子小能手！</p>
<button id="playAgainBtn">再玩一次 🎮</button>
</div>
</div>
<script>
// 游戏数据 - 30个关卡，包含动物、水果、交通工具、生活用品等
const levels = [
// 动物类 (1-12)
{ object: "🐶", objectName: "小狗", shadows: ["🐱", "🐭", "🐹", "🐶"], correctIndex: 3 },
{ object: "🐱", objectName: "小猫", shadows: ["🐶", "🐭", "🐱", "🐹"], correctIndex: 2 },
{ object: "🐭", objectName: "小老鼠", shadows: ["🐹", "🐱", "🐶", "🐭"], correctIndex: 3 },
{ object: "🐮", objectName: "奶牛", shadows: ["🐷", "🐮", "🐑", "🐴"], correctIndex: 1 },
{ object: "🐷", objectName: "小猪", shadows: ["🐮", "🐑", "🐷", "🐴"], correctIndex: 2 },
{ object: "🦁", objectName: "狮子", shadows: ["🐯", "🦁", "🐻", "🐨"], correctIndex: 1 },
{ object: "🐧", objectName: "企鹅", shadows: ["🐦", "🦆", "🐧", "🦉"], correctIndex: 2 },
{ object: "🐘", objectName: "大象", shadows: ["🦒", "🐘", "🦏", "🐫"], correctIndex: 1 },
{ object: "🦒", objectName: "长颈鹿", shadows: ["🐘", "🦒", "🦏", "🐪"], correctIndex: 1 },
{ object: "🐒", objectName: "猴子", shadows: ["🦍", "🐒", "🐵", "🦧"], correctIndex: 1 },
{ object: "🐺", objectName: "狼", shadows: ["🐶", "🐺", "🦊", "🐱"], correctIndex: 1 },
{ object: "🦊", objectName: "狐狸", shadows: ["🐺", "🦊", "🐶", "🐱"], correctIndex: 1 },
// 水果类 (13-18)
{ object: "🍎", objectName: "苹果", shadows: ["🍊", "🍎", "🍓", "🍒"], correctIndex: 1 },
{ object: "🍊", objectName: "橙子", shadows: ["🍎", "🍊", "🍓", "🍒"], correctIndex: 1 },
{ object: "🍓", objectName: "草莓", shadows: ["🍎", "🍊", "🍓", "🍒"], correctIndex: 2 },
{ object: "🍉", objectName: "西瓜", shadows: ["🍎", "🍊", "🍉", "🍒"], correctIndex: 2 },
{ object: "🍌", objectName: "香蕉", shadows: ["🍎", "🍊", "🍌", "🍒"], correctIndex: 2 },
{ object: "🍒", objectName: "樱桃", shadows: ["🍎", "🍊", "🍓", "🍒"], correctIndex: 3 },
// 交通工具类 (19-24)
{ object: "🚗", objectName: "小汽车", shadows: ["🚲", "🚗", "🚌", "🚑"], correctIndex: 1 },
{ object: "🚌", objectName: "公交车", shadows: ["🚗", "🚌", "🚑", "🚲"], correctIndex: 1 },
{ object: "🚲", objectName: "自行车", shadows: ["🚗", "🚌", "🚲", "🚑"], correctIndex: 2 },
{ object: "✈️", objectName: "飞机", shadows: ["🚁", "✈️", "🛸", "🚀"], correctIndex: 1 },
{ object: "🚀", objectName: "火箭", shadows: ["🚁", "✈️", "🛸", "🚀"], correctIndex: 3 },
{ object: "🚢", objectName: "轮船", shadows: ["⛵", "🚢", "🛳️", "🚤"], correctIndex: 1 },
// 生活用品类 (25-30)
{ object: "🏠", objectName: "房子", shadows: ["🏢", "🏠", "🏪", "🏫"], correctIndex: 1 },
{ object: "📚", objectName: "书本", shadows: ["📱", "📚", "✏️", "📖"], correctIndex: 1 },
{ object: "☎️", objectName: "电话", shadows: ["📱", "☎️", "💻", "📺"], correctIndex: 1 },
{ object: "💡", objectName: "灯泡", shadows: ["🔦", "💡", "🕯️", "🔋"], correctIndex: 1 },
{ object: "⌚", objectName: "手表", shadows: ["📱", "⌚", "💍", "👑"], correctIndex: 1 },
{ object: "🎈", objectName: "气球", shadows: ["🎈", "🎉", "🎁", "🎀"], correctIndex: 0 }
];
let currentLevel = 0;
let score = 0;
let canSelect = true;
// DOM 元素
const gameContent = document.getElementById('gameContent');
const completionScreen = document.getElementById('completionScreen');
const levelNumSpan = document.getElementById('levelNum');
const totalLevelsSpan = document.getElementById('totalLevels');
const scoreNumSpan = document.getElementById('scoreNum');
const objectDisplay = document.getElementById('objectDisplay');
const shadowsGrid = document.getElementById('shadowsGrid');
const messageArea = document.getElementById('messageArea');
const nextLevelBtn = document.getElementById('nextLevelBtn');
const restartBtn = document.getElementById('restartBtn');
const playAgainBtn = document.getElementById('playAgainBtn');
const progressFill = document.getElementById('progressFill');
// 更新进度条
function updateProgress() {
const progress = ((currentLevel) / levels.length) * 100;
progressFill.style.width = `${progress}%`;
}
// 语音播报函数
function speak(text) {
if ('speechSynthesis' in window) {
window.speechSynthesis.cancel();
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'zh-CN';
utterance.rate = 0.9;
utterance.pitch = 1.2;
utterance.volume = 1;
const voices = window.speechSynthesis.getVoices();
const chineseVoice = voices.find(voice => voice.lang === 'zh-CN');
if (chineseVoice) {
utterance.voice = chineseVoice;
}
window.speechSynthesis.speak(utterance);
}
}
// 播放正确音效
function playCorrectSound() {
try {
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);
oscillator.frequency.value = 880;
oscillator.type = 'sine';
gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
gainNode.gain.exponentialRampToValueAtTime(0.0001, audioContext.currentTime + 0.3);
oscillator.start();
oscillator.stop(audioContext.currentTime + 0.3);
} catch(e) {
console.log('音效播放失败');
}
}
// 播放错误音效
function playWrongSound() {
try {
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);
oscillator.frequency.value = 440;
oscillator.type = 'sawtooth';
gainNode.gain.setValueAtTime(0.2, audioContext.currentTime);
gainNode.gain.exponentialRampToValueAtTime(0.0001, audioContext.currentTime + 0.2);
oscillator.start();
oscillator.stop(audioContext.currentTime + 0.2);
} catch(e) {
console.log('音效播放失败');
}
}
// 播放完成音乐
function playCompleteMusic() {
try {
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const notes = [523.25, 587.33, 659.25, 698.46, 783.99, 880.00];
notes.forEach((freq, index) => {
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);
oscillator.frequency.value = freq;
oscillator.type = 'sine';
gainNode.gain.setValueAtTime(0.2, audioContext.currentTime + index * 0.15);
gainNode.gain.exponentialRampToValueAtTime(0.0001, audioContext.currentTime + (index * 0.15) + 0.2);
oscillator.start(audioContext.currentTime + index * 0.15);
oscillator.stop(audioContext.currentTime + (index * 0.15) + 0.2);
});
} catch(e) {
console.log('音乐播放失败');
}
}
// 更新UI
function updateUI() {
levelNumSpan.textContent = currentLevel + 1;
scoreNumSpan.textContent = score;
updateProgress();
const level = levels[currentLevel];
objectDisplay.textContent = level.object;
// 生成影子选项
renderShadows(level.shadows);
}
// 渲染影子选项 - 所有影子都是黑色剪影效果
function renderShadows(shadows) {
shadowsGrid.innerHTML = '';
shadows.forEach((shadow, index) => {
const shadowCard = document.createElement('div');
shadowCard.className = 'shadow-card';
shadowCard.innerHTML = `<div class="shadow-emoji">${shadow}</div>`;
shadowCard.addEventListener('click', () => checkAnswer(index));
shadowsGrid.appendChild(shadowCard);
});
}
// 检查答案
function checkAnswer(selectedIndex) {
if (!canSelect) return;
const level = levels[currentLevel];
const isCorrect = (selectedIndex === level.correctIndex);
if (isCorrect) {
canSelect = false;
score += 10;
scoreNumSpan.textContent = score;
const cards = document.querySelectorAll('.shadow-card');
cards[selectedIndex].classList.add('correct');
messageArea.innerHTML = `🎉 正确！是${level.objectName}！ 🎉`;
speak(`正确，是${level.objectName}`);
playCorrectSound();
nextLevelBtn.style.display = 'inline-block';
if (currentLevel === levels.length - 1) {
nextLevelBtn.textContent = '完成游戏 🏆';
}
} else {
const cards = document.querySelectorAll('.shadow-card');
cards[selectedIndex].classList.add('wrong');
messageArea.innerHTML = '😅 找错了，再试试！';
speak('找错了，再试试');
playWrongSound();
setTimeout(() => {
cards[selectedIndex].classList.remove('wrong');
}, 500);
}
}
// 进入下一关
function nextLevel() {
if (currentLevel < levels.length - 1) {
currentLevel++;
canSelect = true;
nextLevelBtn.style.display = 'none';
messageArea.innerHTML = '✨ 进入下一关！继续找黑色影子吧 ✨';
updateUI();
setTimeout(() => {
speak(`第${currentLevel + 1}关，找找${levels[currentLevel].objectName}的影子`);
}, 300);
} else {
completeGame();
}
}
// 完成游戏
function completeGame() {
gameContent.classList.add('hidden');
completionScreen.classList.remove('hidden');
playCompleteMusic();
speak(`恭喜你完成了所有30关！最终得分 ${score} 分！`);
}
// 重新开始游戏
function restartGame() {
currentLevel = 0;
score = 0;
canSelect = true;
nextLevelBtn.style.display = 'none';
gameContent.classList.remove('hidden');
completionScreen.classList.add('hidden');
updateUI();
messageArea.innerHTML = '💡 点击正确的黑色影子就能过关啦！';
updateProgress();
setTimeout(() => {
speak("重新开始游戏！找到正确的黑色影子就能过关啦！");
}, 300);
}
// 事件监听
nextLevelBtn.addEventListener('click', nextLevel);
restartBtn.addEventListener('click', restartGame);
playAgainBtn.addEventListener('click', restartGame);
// 设置总关卡数
totalLevelsSpan.textContent = levels.length;
// 初始化游戏
updateUI();
// 预加载语音系统
if ('speechSynthesis' in window) {
window.speechSynthesis.getVoices();
}
// 欢迎语音
setTimeout(() => {
speak(`欢迎来到找影子游戏！一共30关，第一关，找找${levels[0].objectName}的黑色影子`);
}, 500);
</script>
</body>
</html>'''
# 保存到指定路径
file_path = r'D:\test\20桌面素材\20260326动物影子配对\05无滚动条 找影子游戏_儿童益智版.html'
# 确保目录存在
os.makedirs(os.path.dirname(file_path), exist_ok=True)
try:
with open(file_path, 'w', encoding='utf-8') as f:
f.write(html_content)
print(f'✅ 找影子游戏（30关）已成功生成！')
print(f'📁 文件保存位置: {file_path}')
print('🎮 游戏特性：')
print(' - 🎯 30个精彩关卡，内容丰富多样')
print(' - 📱 优化布局，完美适配网页大小，无需滚动条')
print(' - 🖤 影子使用黑色剪影效果，清晰区分彩色物体')
print(' - 🗣️ 选中正确：语音播报"正确，是XX"')
print(' - 🗣️ 选中错误：语音播报"找错了，再试试"')
print(' - 🎵 正确/错误都有音效反馈')
print(' - ⭐ 每关正确+10分，总分300分')
print(' - 📊 进度条显示通关进度')
print(' - 🎉 完成所有30关有庆祝音乐和语音')
print(' - 👶 专为3-6岁幼儿设计的简单操作')
print(' - 📱 响应式设计，完美支持各种屏幕尺寸')
return file_path
except Exception as e:
print(f'❌ 生成文件失败: {e}')
return None
if __name__ == '__main__':
generate_shadow_game()狼和狐狸的影子太像了
内容全部显示了，，不需要滚动条拉一下，显示最下面的下一页
但是动物都"居左排列"了，后续再修改成"居中排列"
六、防误触功能
python
'''
找动物影子，四选一， 有声音提示、白色底纹、黑色动物选项06
制作30关（内有重复）
无滚动条
界面固定？
Deepseek，阿夏
20260326
'''
import os
def generate_shadow_game():
"""
生成找影子游戏HTML文件
4个黑色影子，1个彩色物体，一共30关
影子使用黑色剪影，选择后语音反馈
优化布局，锁定页面滚动，防止触屏误操作
"""
html_content = '''<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
<title>找影子 - 儿童益智游戏（30关）</title>
<style>
* {
user-select: none;
-webkit-tap-highlight-color: transparent;
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
justify-content: center;
align-items: center;
font-family: 'Segoe UI', 'Comic Neue', 'Comic Sans MS', 'Chalkboard SE', cursive, sans-serif;
-webkit-overflow-scrolling: touch;
touch-action: pan-y pinch-zoom; /* 允许垂直滚动和缩放，但不允许水平滚动 */
}
.game-container {
background: rgba(255, 255, 255, 0.95);
border-radius: 48px;
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
padding: 20px;
max-width: 700px;
width: 90%;
height: auto;
max-height: 95vh;
display: flex;
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
touch-action: pan-y; /* 允许垂直滚动，阻止水平滚动和缩放 */
-webkit-overflow-scrolling: touch;
}
/* 自定义滚动条（更美观） */
.game-container::-webkit-scrollbar {
width: 4px;
}
.game-container::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.game-container::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}
/* 头部信息 */
.game-header {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
border-radius: 40px;
padding: 12px 20px;
margin-bottom: 15px;
display: flex;
justify-content: space-between;
align-items: center;
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
flex-shrink: 0;
}
.level-info, .score-info {
background: rgba(255,255,255,0.2);
padding: 5px 15px;
border-radius: 30px;
font-weight: bold;
font-size: 0.9rem;
}
.level-info span, .score-info span {
font-size: 1.2rem;
margin-left: 5px;
color: #ffeb3b;
}
/* 物体显示区域 */
.object-area {
background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
border-radius: 35px;
padding: 15px;
margin-bottom: 15px;
box-shadow: 0 8px 15px rgba(0,0,0,0.1);
flex-shrink: 0;
}
.object-title {
font-size: 1rem;
color: white;
margin-bottom: 10px;
font-weight: bold;
}
.object-display {
font-size: 5rem;
background: rgba(255,255,255,0.9);
border-radius: 25px;
padding: 10px;
display: inline-block;
box-shadow: 0 5px 12px rgba(0,0,0,0.2);
pointer-events: none; /* 防止物体被拖动 */
}
/* 影子选项区域 */
.shadows-area {
margin-bottom: 15px;
flex-shrink: 0;
}
.shadows-title {
font-size: 1rem;
color: #764ba2;
margin-bottom: 12px;
font-weight: bold;
}
.shadows-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
margin-bottom: 10px;
}
.shadow-card {
background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%);
border-radius: 20px;
padding: 15px;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
border: 2px solid #d0d7de;
touch-action: manipulation; /* 优化触摸操作 */
-webkit-tap-highlight-color: transparent;
}
.shadow-card:active {
transform: scale(0.98);
}
.shadow-card.selected {
background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);
transform: scale(0.98);
border-color: #f39c12;
}
.shadow-card.correct {
background: linear-gradient(135deg, #a8e6cf 0%, #6ab04c 100%);
animation: correctAnimation 0.5s ease;
border-color: #27ae60;
}
.shadow-card.wrong {
background: linear-gradient(135deg, #ffb3ba 0%, #e74c3c 100%);
animation: wrongAnimation 0.3s ease;
border-color: #c0392b;
}
@keyframes correctAnimation {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
@keyframes wrongAnimation {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
/* 影子效果 - 黑色剪影 */
.shadow-emoji {
font-size: 2.8rem;
transition: all 0.2s ease;
filter: brightness(0) invert(0) drop-shadow(1px 1px 2px rgba(0,0,0,0.2));
pointer-events: none; /* 防止emoji被单独拖动 */
}
/* 正确时影子变成彩色庆祝 */
.shadow-card.correct .shadow-emoji {
filter: brightness(1) invert(0);
}
/* 消息区域 */
.message-area {
background: #f8f9fa;
border-radius: 25px;
padding: 8px;
margin: 10px 0;
font-size: 0.9rem;
font-weight: bold;
color: #2c3e50;
border: 2px solid #e0e0e0;
min-height: 50px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
pointer-events: none; /* 防止消息区域干扰点击 */
}
/* 按钮区域 */
.game-buttons {
display: flex;
gap: 12px;
justify-content: center;
flex-shrink: 0;
}
button {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
font-family: inherit;
font-weight: bold;
font-size: 0.9rem;
padding: 8px 20px;
border-radius: 25px;
color: white;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 3px 6px rgba(0,0,0,0.2);
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
button:active {
transform: translateY(2px);
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
/* 进度条 */
.progress-bar {
margin: 8px 0 12px 0;
background: #e0e0e0;
border-radius: 15px;
height: 6px;
overflow: hidden;
flex-shrink: 0;
}
.progress-fill {
background: linear-gradient(90deg, #f093fb, #f5576c);
height: 100%;
width: 0%;
transition: width 0.3s ease;
border-radius: 15px;
}
/* 完成界面 */
.completion-screen {
text-align: center;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 300px;
}
.completion-screen h2 {
color: #f5576c;
font-size: 1.5rem;
margin: 15px 0;
}
.completion-screen p {
font-size: 1rem;
color: #667eea;
margin-bottom: 20px;
}
.completion-emoji {
font-size: 4rem;
margin: 15px 0;
}
.hidden {
display: none;
}
/* 防止拖拽和选中 */
img, div {
-webkit-user-drag: none;
user-drag: none;
}
/* 响应式设计 - 小屏幕优化 */
@media (max-width: 600px) {
.game-container {
padding: 15px;
width: 95%;
}
.shadows-grid {
gap: 10px;
}
.object-display {
font-size: 3.5rem;
padding: 8px;
}
.shadow-emoji {
font-size: 2rem;
}
.game-header {
padding: 8px 15px;
}
.level-info, .score-info {
font-size: 0.8rem;
padding: 4px 12px;
}
.level-info span, .score-info span {
font-size: 1rem;
}
.object-title, .shadows-title {
font-size: 0.9rem;
}
.message-area {
font-size: 0.8rem;
min-height: 45px;
}
button {
font-size: 0.8rem;
padding: 6px 15px;
}
}
@media (max-width: 450px) {
.shadow-emoji {
font-size: 1.8rem;
}
.object-display {
font-size: 3rem;
}
.shadows-grid {
gap: 8px;
}
}
/* 防止页面被拖动 */
body {
touch-action: pan-y pinch-zoom;
}
/* 禁用页面滚动 */
html {
overflow: hidden;
position: fixed;
}
</style>
</head>
<body>
<div class="game-container" id="gameContainer">
<div class="game-header">
<div class="level-info">📚 第 <span id="levelNum">1</span> / <span id="totalLevels">30</span> 关</div>
<div class="score-info">⭐ 得分 <span id="scoreNum">0</span></div>
</div>
<div class="progress-bar">
<div class="progress-fill" id="progressFill"></div>
</div>
<div id="gameContent">
<div class="object-area">
<div class="object-title">🔍 找到下面这个物体的影子</div>
<div class="object-display" id="objectDisplay">🐶</div>
</div>
<div class="shadows-area">
<div class="shadows-title">❓ 哪个是它的影子？（黑色剪影）</div>
<div class="shadows-grid" id="shadowsGrid"></div>
</div>
<div class="message-area" id="messageArea">
💡 点击正确的黑色影子就能过关啦！
</div>
<div class="game-buttons">
<button id="nextLevelBtn" style="display: none;">下一关 🎮</button>
<button id="restartBtn">重新开始 🔄</button>
</div>
</div>
<div id="completionScreen" class="completion-screen hidden">
<div class="completion-emoji">🏆</div>
<h2>恭喜你完成所有30关！</h2>
<p>你真是个找影子小能手！</p>
<button id="playAgainBtn">再玩一次 🎮</button>
</div>
</div>
<script>
// 游戏数据 - 30个关卡，包含动物、水果、交通工具、生活用品等
const levels = [
// 动物类 (1-12)
{ object: "🐶", objectName: "小狗", shadows: ["🐱", "🐭", "🐹", "🐶"], correctIndex: 3 },
{ object: "🐱", objectName: "小猫", shadows: ["🐶", "🐭", "🐱", "🐹"], correctIndex: 2 },
{ object: "🐭", objectName: "小老鼠", shadows: ["🐹", "🐱", "🐶", "🐭"], correctIndex: 3 },
{ object: "🐮", objectName: "奶牛", shadows: ["🐷", "🐮", "🐑", "🐴"], correctIndex: 1 },
{ object: "🐷", objectName: "小猪", shadows: ["🐮", "🐑", "🐷", "🐴"], correctIndex: 2 },
{ object: "🦁", objectName: "狮子", shadows: ["🐯", "🦁", "🐻", "🐨"], correctIndex: 1 },
{ object: "🐧", objectName: "企鹅", shadows: ["🐦", "🦆", "🐧", "🦉"], correctIndex: 2 },
{ object: "🐘", objectName: "大象", shadows: ["🦒", "🐘", "🦏", "🐫"], correctIndex: 1 },
{ object: "🦒", objectName: "长颈鹿", shadows: ["🐘", "🦒", "🦏", "🐪"], correctIndex: 1 },
{ object: "🐒", objectName: "猴子", shadows: ["🦍", "🐒", "🐵", "🦧"], correctIndex: 1 },
{ object: "🐺", objectName: "狼", shadows: ["🐶", "🐺", "🦊", "🐱"], correctIndex: 1 },
{ object: "🦊", objectName: "狐狸", shadows: ["🐺", "🦊", "🐶", "🐱"], correctIndex: 1 },
// 水果类 (13-18)
{ object: "🍎", objectName: "苹果", shadows: ["🍊", "🍎", "🍓", "🍒"], correctIndex: 1 },
{ object: "🍊", objectName: "橙子", shadows: ["🍎", "🍊", "🍓", "🍒"], correctIndex: 1 },
{ object: "🍓", objectName: "草莓", shadows: ["🍎", "🍊", "🍓", "🍒"], correctIndex: 2 },
{ object: "🍉", objectName: "西瓜", shadows: ["🍎", "🍊", "🍉", "🍒"], correctIndex: 2 },
{ object: "🍌", objectName: "香蕉", shadows: ["🍎", "🍊", "🍌", "🍒"], correctIndex: 2 },
{ object: "🍒", objectName: "樱桃", shadows: ["🍎", "🍊", "🍓", "🍒"], correctIndex: 3 },
// 交通工具类 (19-24)
{ object: "🚗", objectName: "小汽车", shadows: ["🚲", "🚗", "🚌", "🚑"], correctIndex: 1 },
{ object: "🚌", objectName: "公交车", shadows: ["🚗", "🚌", "🚑", "🚲"], correctIndex: 1 },
{ object: "🚲", objectName: "自行车", shadows: ["🚗", "🚌", "🚲", "🚑"], correctIndex: 2 },
{ object: "✈️", objectName: "飞机", shadows: ["🚁", "✈️", "🛸", "🚀"], correctIndex: 1 },
{ object: "🚀", objectName: "火箭", shadows: ["🚁", "✈️", "🛸", "🚀"], correctIndex: 3 },
{ object: "🚢", objectName: "轮船", shadows: ["⛵", "🚢", "🛳️", "🚤"], correctIndex: 1 },
// 生活用品类 (25-30)
{ object: "🏠", objectName: "房子", shadows: ["🏢", "🏠", "🏪", "🏫"], correctIndex: 1 },
{ object: "📚", objectName: "书本", shadows: ["📱", "📚", "✏️", "📖"], correctIndex: 1 },
{ object: "☎️", objectName: "电话", shadows: ["📱", "☎️", "💻", "📺"], correctIndex: 1 },
{ object: "💡", objectName: "灯泡", shadows: ["🔦", "💡", "🕯️", "🔋"], correctIndex: 1 },
{ object: "⌚", objectName: "手表", shadows: ["📱", "⌚", "💍", "👑"], correctIndex: 1 },
{ object: "🎈", objectName: "气球", shadows: ["🎈", "🎉", "🎁", "🎀"], correctIndex: 0 }
];
let currentLevel = 0;
let score = 0;
let canSelect = true;
// DOM 元素
const gameContent = document.getElementById('gameContent');
const completionScreen = document.getElementById('completionScreen');
const levelNumSpan = document.getElementById('levelNum');
const totalLevelsSpan = document.getElementById('totalLevels');
const scoreNumSpan = document.getElementById('scoreNum');
const objectDisplay = document.getElementById('objectDisplay');
const shadowsGrid = document.getElementById('shadowsGrid');
const messageArea = document.getElementById('messageArea');
const nextLevelBtn = document.getElementById('nextLevelBtn');
const restartBtn = document.getElementById('restartBtn');
const playAgainBtn = document.getElementById('playAgainBtn');
const progressFill = document.getElementById('progressFill');
// 禁用页面滚动和拖拽
function preventDragAndScroll() {
document.body.addEventListener('touchmove', function(e) {
// 如果触摸的目标是.game-container内的可滚动区域，允许滚动
const target = e.target;
const container = document.querySelector('.game-container');
if (container && container.contains(target)) {
// 检查是否需要滚动
const isAtTop = container.scrollTop === 0;
const isAtBottom = container.scrollHeight - container.scrollTop === container.clientHeight;
if ((isAtTop && e.touches[0].clientY > 0) ||
(isAtBottom && e.touches[0].clientY < 0)) {
e.preventDefault();
}
} else {
e.preventDefault();
}
}, { passive: false });
// 禁用页面拖拽
document.body.addEventListener('dragstart', function(e) {
e.preventDefault();
return false;
});
}
// 更新进度条
function updateProgress() {
const progress = ((currentLevel) / levels.length) * 100;
progressFill.style.width = `${progress}%`;
}
// 语音播报函数
function speak(text) {
if ('speechSynthesis' in window) {
window.speechSynthesis.cancel();
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'zh-CN';
utterance.rate = 0.9;
utterance.pitch = 1.2;
utterance.volume = 1;
const voices = window.speechSynthesis.getVoices();
const chineseVoice = voices.find(voice => voice.lang === 'zh-CN');
if (chineseVoice) {
utterance.voice = chineseVoice;
}
window.speechSynthesis.speak(utterance);
}
}
// 播放正确音效
function playCorrectSound() {
try {
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);
oscillator.frequency.value = 880;
oscillator.type = 'sine';
gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
gainNode.gain.exponentialRampToValueAtTime(0.0001, audioContext.currentTime + 0.3);
oscillator.start();
oscillator.stop(audioContext.currentTime + 0.3);
} catch(e) {
console.log('音效播放失败');
}
}
// 播放错误音效
function playWrongSound() {
try {
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);
oscillator.frequency.value = 440;
oscillator.type = 'sawtooth';
gainNode.gain.setValueAtTime(0.2, audioContext.currentTime);
gainNode.gain.exponentialRampToValueAtTime(0.0001, audioContext.currentTime + 0.2);
oscillator.start();
oscillator.stop(audioContext.currentTime + 0.2);
} catch(e) {
console.log('音效播放失败');
}
}
// 播放完成音乐
function playCompleteMusic() {
try {
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const notes = [523.25, 587.33, 659.25, 698.46, 783.99, 880.00];
notes.forEach((freq, index) => {
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);
oscillator.frequency.value = freq;
oscillator.type = 'sine';
gainNode.gain.setValueAtTime(0.2, audioContext.currentTime + index * 0.15);
gainNode.gain.exponentialRampToValueAtTime(0.0001, audioContext.currentTime + (index * 0.15) + 0.2);
oscillator.start(audioContext.currentTime + index * 0.15);
oscillator.stop(audioContext.currentTime + (index * 0.15) + 0.2);
});
} catch(e) {
console.log('音乐播放失败');
}
}
// 更新UI
function updateUI() {
levelNumSpan.textContent = currentLevel + 1;
scoreNumSpan.textContent = score;
updateProgress();
const level = levels[currentLevel];
objectDisplay.textContent = level.object;
// 生成影子选项
renderShadows(level.shadows);
}
// 渲染影子选项 - 所有影子都是黑色剪影效果
function renderShadows(shadows) {
shadowsGrid.innerHTML = '';
shadows.forEach((shadow, index) => {
const shadowCard = document.createElement('div');
shadowCard.className = 'shadow-card';
shadowCard.innerHTML = `<div class="shadow-emoji">${shadow}</div>`;
shadowCard.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
checkAnswer(index);
});
shadowsGrid.appendChild(shadowCard);
});
}
// 检查答案
function checkAnswer(selectedIndex) {
if (!canSelect) return;
const level = levels[currentLevel];
const isCorrect = (selectedIndex === level.correctIndex);
if (isCorrect) {
canSelect = false;
score += 10;
scoreNumSpan.textContent = score;
const cards = document.querySelectorAll('.shadow-card');
cards[selectedIndex].classList.add('correct');
messageArea.innerHTML = `🎉 正确！是${level.objectName}！ 🎉`;
speak(`正确，是${level.objectName}`);
playCorrectSound();
nextLevelBtn.style.display = 'inline-block';
if (currentLevel === levels.length - 1) {
nextLevelBtn.textContent = '完成游戏 🏆';
}
} else {
const cards = document.querySelectorAll('.shadow-card');
cards[selectedIndex].classList.add('wrong');
messageArea.innerHTML = '😅 找错了，再试试！';
speak('找错了，再试试');
playWrongSound();
setTimeout(() => {
cards[selectedIndex].classList.remove('wrong');
}, 500);
}
}
// 进入下一关
function nextLevel() {
if (currentLevel < levels.length - 1) {
currentLevel++;
canSelect = true;
nextLevelBtn.style.display = 'none';
messageArea.innerHTML = '✨ 进入下一关！继续找黑色影子吧 ✨';
updateUI();
setTimeout(() => {
speak(`第${currentLevel + 1}关，找找${levels[currentLevel].objectName}的影子`);
}, 300);
} else {
completeGame();
}
}
// 完成游戏
function completeGame() {
gameContent.classList.add('hidden');
completionScreen.classList.remove('hidden');
playCompleteMusic();
speak(`恭喜你完成了所有30关！最终得分 ${score} 分！`);
}
// 重新开始游戏
function restartGame() {
currentLevel = 0;
score = 0;
canSelect = true;
nextLevelBtn.style.display = 'none';
gameContent.classList.remove('hidden');
completionScreen.classList.add('hidden');
updateUI();
messageArea.innerHTML = '💡 点击正确的黑色影子就能过关啦！';
updateProgress();
setTimeout(() => {
speak("重新开始游戏！找到正确的黑色影子就能过关啦！");
}, 300);
}
// 事件监听
nextLevelBtn.addEventListener('click', nextLevel);
restartBtn.addEventListener('click', restartGame);
playAgainBtn.addEventListener('click', restartGame);
// 设置总关卡数
totalLevelsSpan.textContent = levels.length;
// 禁用页面滚动和拖拽
preventDragAndScroll();
// 初始化游戏
updateUI();
// 预加载语音系统
if ('speechSynthesis' in window) {
window.speechSynthesis.getVoices();
}
// 欢迎语音
setTimeout(() => {
speak(`欢迎来到找影子游戏！一共30关，第一关，找找${levels[0].objectName}的黑色影子`);
}, 500);
</script>
</body>
</html>'''
# 保存到指定路径
file_path = r'D:\test\20桌面素材\20260326动物影子配对\06防误触 找影子游戏_儿童益智版.html'
# 确保目录存在
os.makedirs(os.path.dirname(file_path), exist_ok=True)
try:
with open(file_path, 'w', encoding='utf-8') as f:
f.write(html_content)
print(f'✅ 找影子游戏（30关）已成功生成！')
print(f'📁 文件保存位置: {file_path}')
print('🎮 游戏特性：')
print(' - 🎯 30个精彩关卡，内容丰富多样')
print(' - 🔒 锁定页面滚动，防止希沃白板中误触移动')
print(' - 🖤 影子使用黑色剪影效果，清晰区分彩色物体')
print(' - 🗣️ 选中正确：语音播报"正确，是XX"')
print(' - 🗣️ 选中错误：语音播报"找错了，再试试"')
print(' - 🎵 正确/错误都有音效反馈')
print(' - ⭐ 每关正确+10分，总分300分')
print(' - 📊 进度条显示通关进度')
print(' - 🎉 完成所有30关有庆祝音乐和语音')
print(' - 👶 专为3-6岁幼儿设计的简单操作')
print(' - 📱 完美支持希沃白板触摸操作，点击区域优化')
return file_path
except Exception as e:
print(f'❌ 生成文件失败: {e}')
return None
if __name__ == '__main__':
generate_shadow_game()
感觉与05版本差不多，没有滚动条，一页全部显示了
放到电脑里测试看看
把04和05都传到微信助手里
昨天的水果连连看已经不见了，希沃不能保存之前的文件
打开白板里面的微信，把HTML拖拉到桌面上
文件自动保存位置
文件拖到桌面上
只能用microsoft edge，其他网页放不了
存在问题1
滚动条还是在的，需要向下滑动，才能看到"下一页"
来园早的孩子玩一下
存在问题2
七、适配希沃白板+修改动物
python
'''
找动物影子，四选一， 有声音提示、白色底纹、黑色动物选项06
制作30关（内有重复）
无滚动条
界面固定？
适配笔记本和希沃白板的不同显示屏比例
Deepseek，阿夏
20260326
'''
import os
def generate_shadow_game():
"""
生成找影子游戏HTML文件
4个黑色影子，1个彩色物体，一共30关
影子使用黑色剪影，选择后语音反馈
完全适配希沃白板，无滚动条，固定屏幕
"""
html_content = '''<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
<title>找影子 - 儿童益智游戏（30关）</title>
<style>
* {
user-select: none;
-webkit-tap-highlight-color: transparent;
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: 0;
}
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
justify-content: center;
align-items: center;
font-family: 'Segoe UI', 'Comic Neue', 'Comic Sans MS', 'Chalkboard SE', cursive, sans-serif;
overflow: hidden;
}
.game-container {
background: rgba(255, 255, 255, 0.95);
border-radius: 48px;
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
padding: 20px;
width: 90%;
max-width: 700px;
height: auto;
max-height: 90vh;
display: flex;
flex-direction: column;
overflow: visible;
}
/* 头部信息 */
.game-header {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
border-radius: 40px;
padding: 12px 20px;
margin-bottom: 15px;
display: flex;
justify-content: space-between;
align-items: center;
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
flex-shrink: 0;
}
.level-info, .score-info {
background: rgba(255,255,255,0.2);
padding: 5px 15px;
border-radius: 30px;
font-weight: bold;
font-size: 0.9rem;
}
.level-info span, .score-info span {
font-size: 1.2rem;
margin-left: 5px;
color: #ffeb3b;
}
/* 进度条 */
.progress-bar {
margin: 8px 0 12px 0;
background: #e0e0e0;
border-radius: 15px;
height: 6px;
overflow: hidden;
flex-shrink: 0;
}
.progress-fill {
background: linear-gradient(90deg, #f093fb, #f5576c);
height: 100%;
width: 0%;
transition: width 0.3s ease;
border-radius: 15px;
}
/* 物体显示区域 */
.object-area {
background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
border-radius: 35px;
padding: 12px;
margin-bottom: 15px;
box-shadow: 0 8px 15px rgba(0,0,0,0.1);
flex-shrink: 0;
}
.object-title {
font-size: 1rem;
color: white;
margin-bottom: 8px;
font-weight: bold;
}
.object-display {
font-size: 4.5rem;
background: rgba(255,255,255,0.9);
border-radius: 25px;
padding: 8px;
display: inline-block;
box-shadow: 0 5px 12px rgba(0,0,0,0.2);
pointer-events: none;
}
/* 影子选项区域 */
.shadows-area {
margin-bottom: 12px;
flex-shrink: 0;
}
.shadows-title {
font-size: 1rem;
color: #764ba2;
margin-bottom: 10px;
font-weight: bold;
}
.shadows-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin-bottom: 8px;
}
.shadow-card {
background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%);
border-radius: 20px;
padding: 12px;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
border: 2px solid #d0d7de;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.shadow-card:active {
transform: scale(0.98);
}
.shadow-card.selected {
background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);
transform: scale(0.98);
border-color: #f39c12;
}
.shadow-card.correct {
background: linear-gradient(135deg, #a8e6cf 0%, #6ab04c 100%);
animation: correctAnimation 0.5s ease;
border-color: #27ae60;
}
.shadow-card.wrong {
background: linear-gradient(135deg, #ffb3ba 0%, #e74c3c 100%);
animation: wrongAnimation 0.3s ease;
border-color: #c0392b;
}
@keyframes correctAnimation {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
@keyframes wrongAnimation {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
/* 影子效果 - 黑色剪影 */
.shadow-emoji {
font-size: 2.5rem;
transition: all 0.2s ease;
filter: brightness(0) invert(0) drop-shadow(1px 1px 2px rgba(0,0,0,0.2));
pointer-events: none;
}
/* 正确时影子变成彩色庆祝 */
.shadow-card.correct .shadow-emoji {
filter: brightness(1) invert(0);
}
/* 消息区域 */
.message-area {
background: #f8f9fa;
border-radius: 25px;
padding: 8px;
margin: 10px 0;
font-size: 0.9rem;
font-weight: bold;
color: #2c3e50;
border: 2px solid #e0e0e0;
min-height: 48px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
pointer-events: none;
}
/* 按钮区域 */
.game-buttons {
display: flex;
gap: 12px;
justify-content: center;
flex-shrink: 0;
margin-top: 5px;
}
button {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
font-family: inherit;
font-weight: bold;
font-size: 0.9rem;
padding: 8px 20px;
border-radius: 25px;
color: white;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 3px 6px rgba(0,0,0,0.2);
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
button:active {
transform: translateY(2px);
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
/* 完成界面 */
.completion-screen {
text-align: center;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 280px;
}
.completion-screen h2 {
color: #f5576c;
font-size: 1.5rem;
margin: 15px 0;
}
.completion-screen p {
font-size: 1rem;
color: #667eea;
margin-bottom: 20px;
}
.completion-emoji {
font-size: 4rem;
margin: 15px 0;
}
.hidden {
display: none;
}
/* 防止拖拽和选中 */
img, div {
-webkit-user-drag: none;
user-drag: none;
}
/* 希沃白板专用优化 - 完全锁定屏幕 */
body {
touch-action: none;
-ms-touch-action: none;
}
.game-container {
touch-action: pan-y;
-ms-touch-action: pan-y;
}
/* 响应式设计 - 根据屏幕高度自动调整 */
@media (max-height: 700px) {
.game-container {
padding: 12px;
}
.object-display {
font-size: 3.5rem;
}
.shadow-emoji {
font-size: 2rem;
}
.shadow-card {
padding: 8px;
}
.game-header {
padding: 8px 15px;
}
.object-area {
padding: 8px;
}
.message-area {
min-height: 40px;
font-size: 0.8rem;
}
}
@media (max-height: 600px) {
.object-display {
font-size: 3rem;
}
.shadow-emoji {
font-size: 1.8rem;
}
.game-header {
margin-bottom: 8px;
}
.object-area {
margin-bottom: 8px;
}
.shadows-grid {
gap: 8px;
}
}
@media (max-width: 600px) {
.game-container {
padding: 12px;
width: 92%;
}
.shadow-emoji {
font-size: 2rem;
}
.object-display {
font-size: 3.5rem;
}
}
</style>
</head>
<body>
<div class="game-container" id="gameContainer">
<div class="game-header">
<div class="level-info">📚 第 <span id="levelNum">1</span> / <span id="totalLevels">30</span> 关</div>
<div class="score-info">⭐ 得分 <span id="scoreNum">0</span></div>
</div>
<div class="progress-bar">
<div class="progress-fill" id="progressFill"></div>
</div>
<div id="gameContent">
<div class="object-area">
<div class="object-title">🔍 找到下面这个物体的影子</div>
<div class="object-display" id="objectDisplay">🐶</div>
</div>
<div class="shadows-area">
<div class="shadows-title">❓ 哪个是它的影子？（黑色剪影）</div>
<div class="shadows-grid" id="shadowsGrid"></div>
</div>
<div class="message-area" id="messageArea">
💡 点击正确的黑色影子就能过关啦！
</div>
<div class="game-buttons">
<button id="nextLevelBtn" style="display: none;">下一关 🎮</button>
<button id="restartBtn">重新开始 🔄</button>
</div>
</div>
<div id="completionScreen" class="completion-screen hidden">
<div class="completion-emoji">🏆</div>
<h2>恭喜你完成所有30关！</h2>
<p>你真是个找影子小能手！</p>
<button id="playAgainBtn">再玩一次 🎮</button>
</div>
</div>
<script>
// 游戏数据 - 30个关卡
const levels = [
{ object: "🐶", objectName: "小狗", shadows: ["🐱", "🐭", "🐹", "🐶"], correctIndex: 3 },
{ object: "🐱", objectName: "小猫", shadows: ["🐶", "🐭", "🐱", "🐹"], correctIndex: 2 },
{ object: "🐭", objectName: "小老鼠", shadows: ["🐹", "🐱", "🐶", "🐭"], correctIndex: 3 },
{ object: "🐮", objectName: "奶牛", shadows: ["🐷", "🐮", "🐑", "🐴"], correctIndex: 1 },
{ object: "🐷", objectName: "小猪", shadows: ["🐮", "🐑", "🐷", "🐴"], correctIndex: 2 },
{ object: "🦁", objectName: "狮子", shadows: ["🐯", "🦁", "🐻", "🐨"], correctIndex: 1 },
{ object: "🐧", objectName: "企鹅", shadows: ["🐦", "🦆", "🐧", "🦉"], correctIndex: 2 },
{ object: "🐘", objectName: "大象", shadows: ["🦒", "🐘", "🦏", "🐫"], correctIndex: 1 },
{ object: "🦒", objectName: "长颈鹿", shadows: ["🐘", "🦒", "🦏", "🐪"], correctIndex: 1 },
{ object: "🐒", objectName: "猴子", shadows: ["🦍", "🐒", "🐵", "🦧"], correctIndex: 1 },
{ object: "🐺", objectName: "狼", shadows: ["🐶", "🐺", "🐷", "🐱"], correctIndex: 1 },
{ object: "🦊", objectName: "狐狸", shadows: ["🦁", "🦊", "🐶", "🐱"], correctIndex: 1 },
{ object: "🍎", objectName: "苹果", shadows: ["🍊", "🍎", "🍓", "🍒"], correctIndex: 1 },
{ object: "🍊", objectName: "橙子", shadows: ["🍎", "🍊", "🍓", "🍒"], correctIndex: 1 },
{ object: "🍓", objectName: "草莓", shadows: ["🍎", "🍊", "🍓", "🍒"], correctIndex: 2 },
{ object: "🍉", objectName: "西瓜", shadows: ["🍎", "🍊", "🍉", "🍒"], correctIndex: 2 },
{ object: "🍌", objectName: "香蕉", shadows: ["🍎", "🍊", "🍌", "🍒"], correctIndex: 2 },
{ object: "🍒", objectName: "樱桃", shadows: ["🍎", "🍊", "🍓", "🍒"], correctIndex: 3 },
{ object: "🚗", objectName: "小汽车", shadows: ["🚲", "🚗", "🚌", "🚑"], correctIndex: 1 },
{ object: "🚌", objectName: "公交车", shadows: ["🚗", "🚌", "🚑", "🚲"], correctIndex: 1 },
{ object: "🚲", objectName: "自行车", shadows: ["🚗", "🚌", "🚲", "🚑"], correctIndex: 2 },
{ object: "✈️", objectName: "飞机", shadows: ["🚁", "✈️", "🛸", "🚀"], correctIndex: 1 },
{ object: "🚀", objectName: "火箭", shadows: ["🚁", "✈️", "🛸", "🚀"], correctIndex: 3 },
{ object: "🚢", objectName: "轮船", shadows: ["⛵", "🚢", "🛳️", "🚤"], correctIndex: 1 },
{ object: "🏠", objectName: "房子", shadows: ["🏢", "🏠", "🏪", "🏫"], correctIndex: 1 },
{ object: "📚", objectName: "书本", shadows: ["📱", "📚", "✏️", "📖"], correctIndex: 1 },
{ object: "☎️", objectName: "电话", shadows: ["📱", "☎️", "💻", "📺"], correctIndex: 1 },
{ object: "💡", objectName: "灯泡", shadows: ["🔦", "💡", "🕯️", "🔋"], correctIndex: 1 },
{ object: "⌚", objectName: "手表", shadows: ["📱", "⌚", "💍", "👑"], correctIndex: 1 },
{ object: "🎈", objectName: "气球", shadows: ["🎈", "🎉", "🎁", "🎀"], correctIndex: 0 }
];
let currentLevel = 0;
let score = 0;
let canSelect = true;
// DOM 元素
const gameContent = document.getElementById('gameContent');
const completionScreen = document.getElementById('completionScreen');
const levelNumSpan = document.getElementById('levelNum');
const totalLevelsSpan = document.getElementById('totalLevels');
const scoreNumSpan = document.getElementById('scoreNum');
const objectDisplay = document.getElementById('objectDisplay');
const shadowsGrid = document.getElementById('shadowsGrid');
const messageArea = document.getElementById('messageArea');
const nextLevelBtn = document.getElementById('nextLevelBtn');
const restartBtn = document.getElementById('restartBtn');
const playAgainBtn = document.getElementById('playAgainBtn');
const progressFill = document.getElementById('progressFill');
// 完全禁止页面滚动
function lockScreen() {
// 禁止触摸移动
document.body.addEventListener('touchmove', function(e) {
e.preventDefault();
}, { passive: false });
// 禁止鼠标拖动滚动
document.body.addEventListener('wheel', function(e) {
e.preventDefault();
}, { passive: false });
// 禁止键盘滚动
window.addEventListener('keydown', function(e) {
if (e.key === 'ArrowUp' || e.key === 'ArrowDown' ||
e.key === 'PageUp' || e.key === 'PageDown' ||
e.key === 'Home' || e.key === 'End') {
e.preventDefault();
}
});
}
// 更新进度条
function updateProgress() {
const progress = ((currentLevel) / levels.length) * 100;
progressFill.style.width = `${progress}%`;
}
// 语音播报函数
function speak(text) {
if ('speechSynthesis' in window) {
window.speechSynthesis.cancel();
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'zh-CN';
utterance.rate = 0.9;
utterance.pitch = 1.2;
utterance.volume = 1;
const voices = window.speechSynthesis.getVoices();
const chineseVoice = voices.find(voice => voice.lang === 'zh-CN');
if (chineseVoice) {
utterance.voice = chineseVoice;
}
window.speechSynthesis.speak(utterance);
}
}
// 播放正确音效
function playCorrectSound() {
try {
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);
oscillator.frequency.value = 880;
oscillator.type = 'sine';
gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
gainNode.gain.exponentialRampToValueAtTime(0.0001, audioContext.currentTime + 0.3);
oscillator.start();
oscillator.stop(audioContext.currentTime + 0.3);
} catch(e) {
console.log('音效播放失败');
}
}
// 播放错误音效
function playWrongSound() {
try {
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);
oscillator.frequency.value = 440;
oscillator.type = 'sawtooth';
gainNode.gain.setValueAtTime(0.2, audioContext.currentTime);
gainNode.gain.exponentialRampToValueAtTime(0.0001, audioContext.currentTime + 0.2);
oscillator.start();
oscillator.stop(audioContext.currentTime + 0.2);
} catch(e) {
console.log('音效播放失败');
}
}
// 播放完成音乐
function playCompleteMusic() {
try {
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const notes = [523.25, 587.33, 659.25, 698.46, 783.99, 880.00];
notes.forEach((freq, index) => {
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);
oscillator.frequency.value = freq;
oscillator.type = 'sine';
gainNode.gain.setValueAtTime(0.2, audioContext.currentTime + index * 0.15);
gainNode.gain.exponentialRampToValueAtTime(0.0001, audioContext.currentTime + (index * 0.15) + 0.2);
oscillator.start(audioContext.currentTime + index * 0.15);
oscillator.stop(audioContext.currentTime + (index * 0.15) + 0.2);
});
} catch(e) {
console.log('音乐播放失败');
}
}
// 更新UI
function updateUI() {
levelNumSpan.textContent = currentLevel + 1;
scoreNumSpan.textContent = score;
updateProgress();
const level = levels[currentLevel];
objectDisplay.textContent = level.object;
renderShadows(level.shadows);
}
// 渲染影子选项
function renderShadows(shadows) {
shadowsGrid.innerHTML = '';
shadows.forEach((shadow, index) => {
const shadowCard = document.createElement('div');
shadowCard.className = 'shadow-card';
shadowCard.innerHTML = `<div class="shadow-emoji">${shadow}</div>`;
shadowCard.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
checkAnswer(index);
});
shadowsGrid.appendChild(shadowCard);
});
}
// 检查答案
function checkAnswer(selectedIndex) {
if (!canSelect) return;
const level = levels[currentLevel];
const isCorrect = (selectedIndex === level.correctIndex);
if (isCorrect) {
canSelect = false;
score += 10;
scoreNumSpan.textContent = score;
const cards = document.querySelectorAll('.shadow-card');
cards[selectedIndex].classList.add('correct');
messageArea.innerHTML = `🎉 正确！是${level.objectName}！ 🎉`;
speak(`正确，是${level.objectName}`);
playCorrectSound();
nextLevelBtn.style.display = 'inline-block';
if (currentLevel === levels.length - 1) {
nextLevelBtn.textContent = '完成游戏 🏆';
}
} else {
const cards = document.querySelectorAll('.shadow-card');
cards[selectedIndex].classList.add('wrong');
messageArea.innerHTML = '😅 找错了，再试试！';
speak('找错了，再试试');
playWrongSound();
setTimeout(() => {
cards[selectedIndex].classList.remove('wrong');
}, 500);
}
}
// 进入下一关
function nextLevel() {
if (currentLevel < levels.length - 1) {
currentLevel++;
canSelect = true;
nextLevelBtn.style.display = 'none';
messageArea.innerHTML = '✨ 进入下一关！继续找黑色影子吧 ✨';
updateUI();
setTimeout(() => {
speak(`第${currentLevel + 1}关，找找${levels[currentLevel].objectName}的影子`);
}, 300);
} else {
completeGame();
}
}
// 完成游戏
function completeGame() {
gameContent.classList.add('hidden');
completionScreen.classList.remove('hidden');
playCompleteMusic();
speak(`恭喜你完成了所有30关！最终得分 ${score} 分！`);
}
// 重新开始游戏
function restartGame() {
currentLevel = 0;
score = 0;
canSelect = true;
nextLevelBtn.style.display = 'none';
gameContent.classList.remove('hidden');
completionScreen.classList.add('hidden');
updateUI();
messageArea.innerHTML = '💡 点击正确的黑色影子就能过关啦！';
updateProgress();
setTimeout(() => {
speak("重新开始游戏！找到正确的黑色影子就能过关啦！");
}, 300);
}
// 事件监听
nextLevelBtn.addEventListener('click', nextLevel);
restartBtn.addEventListener('click', restartGame);
playAgainBtn.addEventListener('click', restartGame);
// 设置总关卡数
totalLevelsSpan.textContent = levels.length;
// 锁定屏幕防止滚动
lockScreen();
// 初始化游戏
updateUI();
// 预加载语音系统
if ('speechSynthesis' in window) {
window.speechSynthesis.getVoices();
}
// 欢迎语音
setTimeout(() => {
speak(`欢迎来到找影子游戏！一共30关，第一关，找找${levels[0].objectName}的黑色影子`);
}, 500);
</script>
</body>
</html>'''
# 保存到指定路径
file_path = r'D:\test\20桌面素材\20260326动物影子配对\07 适配希沃白板 找影子游戏_儿童益智版.html'
# 确保目录存在
os.makedirs(os.path.dirname(file_path), exist_ok=True)
try:
with open(file_path, 'w', encoding='utf-8') as f:
f.write(html_content)
print(f'✅ 找影子游戏（30关）已成功生成！')
print(f'📁 文件保存位置: {file_path}')
print('🎮 游戏特性：')
print(' - 🎯 30个精彩关卡，内容丰富多样')
print(' - 🔒 完全锁定屏幕，消除所有滚动条')
print(' - 🖤 影子使用黑色剪影效果，清晰区分彩色物体')
print(' - 🗣️ 选中正确：语音播报"正确，是XX"')
print(' - 🗣️ 选中错误：语音播报"找错了，再试试"')
print(' - 🎵 正确/错误都有音效反馈')
print(' - ⭐ 每关正确+10分，总分300分')
print(' - 📊 进度条显示通关进度')
print(' - 🎉 完成所有30关有庆祝音乐和语音')
print(' - 📱 完美适配希沃白板，触摸操作优化')
print(' - 💯 根据屏幕高度自动调整布局，无滚动条')
return file_path
except Exception as e:
print(f'❌ 生成文件失败: {e}')
return None
if __name__ == '__main__':
generate_shadow_game()
def generate_shadow_game():
"""
生成找影子游戏HTML文件
4个黑色影子，1个彩色物体，一共30关
影子使用黑色剪影，选择后语音反馈
完全适配希沃白板，无滚动条，固定屏幕
"""
html_content = '''<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
<title>找影子 - 儿童益智游戏（30关）</title>
<style>
* {
user-select: none;
-webkit-tap-highlight-color: transparent;
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: 0;
}
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
justify-content: center;
align-items: center;
font-family: 'Segoe UI', 'Comic Neue', 'Comic Sans MS', 'Chalkboard SE', cursive, sans-serif;
overflow: hidden;
}
.game-container {
background: rgba(255, 255, 255, 0.95);
border-radius: 48px;
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
padding: 20px;
width: 90%;
max-width: 700px;
height: auto;
max-height: 90vh;
display: flex;
flex-direction: column;
overflow: visible;
}
/* 头部信息 */
.game-header {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
border-radius: 40px;
padding: 12px 20px;
margin-bottom: 15px;
display: flex;
justify-content: space-between;
align-items: center;
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
flex-shrink: 0;
}
.level-info, .score-info {
background: rgba(255,255,255,0.2);
padding: 5px 15px;
border-radius: 30px;
font-weight: bold;
font-size: 0.9rem;
}
.level-info span, .score-info span {
font-size: 1.2rem;
margin-left: 5px;
color: #ffeb3b;
}
/* 进度条 */
.progress-bar {
margin: 8px 0 12px 0;
background: #e0e0e0;
border-radius: 15px;
height: 6px;
overflow: hidden;
flex-shrink: 0;
}
.progress-fill {
background: linear-gradient(90deg, #f093fb, #f5576c);
height: 100%;
width: 0%;
transition: width 0.3s ease;
border-radius: 15px;
}
/* 物体显示区域 */
.object-area {
background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
border-radius: 35px;
padding: 12px;
margin-bottom: 15px;
box-shadow: 0 8px 15px rgba(0,0,0,0.1);
flex-shrink: 0;
}
.object-title {
font-size: 1rem;
color: white;
margin-bottom: 8px;
font-weight: bold;
}
.object-display {
font-size: 4.5rem;
background: rgba(255,255,255,0.9);
border-radius: 25px;
padding: 8px;
display: inline-block;
box-shadow: 0 5px 12px rgba(0,0,0,0.2);
pointer-events: none;
}
/* 影子选项区域 */
.shadows-area {
margin-bottom: 12px;
flex-shrink: 0;
}
.shadows-title {
font-size: 1rem;
color: #764ba2;
margin-bottom: 10px;
font-weight: bold;
}
.shadows-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin-bottom: 8px;
}
.shadow-card {
background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%);
border-radius: 20px;
padding: 12px;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
border: 2px solid #d0d7de;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.shadow-card:active {
transform: scale(0.98);
}
.shadow-card.selected {
background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);
transform: scale(0.98);
border-color: #f39c12;
}
.shadow-card.correct {
background: linear-gradient(135deg, #a8e6cf 0%, #6ab04c 100%);
animation: correctAnimation 0.5s ease;
border-color: #27ae60;
}
.shadow-card.wrong {
background: linear-gradient(135deg, #ffb3ba 0%, #e74c3c 100%);
animation: wrongAnimation 0.3s ease;
border-color: #c0392b;
}
@keyframes correctAnimation {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
@keyframes wrongAnimation {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
/* 影子效果 - 黑色剪影 */
.shadow-emoji {
font-size: 2.5rem;
transition: all 0.2s ease;
filter: brightness(0) invert(0) drop-shadow(1px 1px 2px rgba(0,0,0,0.2));
pointer-events: none;
}
/* 正确时影子变成彩色庆祝 */
.shadow-card.correct .shadow-emoji {
filter: brightness(1) invert(0);
}
/* 消息区域 */
.message-area {
background: #f8f9fa;
border-radius: 25px;
padding: 8px;
margin: 10px 0;
font-size: 0.9rem;
font-weight: bold;
color: #2c3e50;
border: 2px solid #e0e0e0;
min-height: 48px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
pointer-events: none;
}
/* 按钮区域 */
.game-buttons {
display: flex;
gap: 12px;
justify-content: center;
flex-shrink: 0;
margin-top: 5px;
}
button {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
font-family: inherit;
font-weight: bold;
font-size: 0.9rem;
padding: 8px 20px;
border-radius: 25px;
color: white;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 3px 6px rgba(0,0,0,0.2);
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
button:active {
transform: translateY(2px);
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
/* 完成界面 */
.completion-screen {
text-align: center;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 280px;
}
.completion-screen h2 {
color: #f5576c;
font-size: 1.5rem;
margin: 15px 0;
}
.completion-screen p {
font-size: 1rem;
color: #667eea;
margin-bottom: 20px;
}
.completion-emoji {
font-size: 4rem;
margin: 15px 0;
}
.hidden {
display: none;
}
/* 防止拖拽和选中 */
img, div {
-webkit-user-drag: none;
user-drag: none;
}
/* 希沃白板专用优化 - 完全锁定屏幕 */
body {
touch-action: none;
-ms-touch-action: none;
}
.game-container {
touch-action: pan-y;
-ms-touch-action: pan-y;
}
/* 响应式设计 - 根据屏幕高度自动调整 */
@media (max-height: 700px) {
.game-container {
padding: 12px;
}
.object-display {
font-size: 3.5rem;
}
.shadow-emoji {
font-size: 2rem;
}
.shadow-card {
padding: 8px;
}
.game-header {
padding: 8px 15px;
}
.object-area {
padding: 8px;
}
.message-area {
min-height: 40px;
font-size: 0.8rem;
}
}
@media (max-height: 600px) {
.object-display {
font-size: 3rem;
}
.shadow-emoji {
font-size: 1.8rem;
}
.game-header {
margin-bottom: 8px;
}
.object-area {
margin-bottom: 8px;
}
.shadows-grid {
gap: 8px;
}
}
@media (max-width: 600px) {
.game-container {
padding: 12px;
width: 92%;
}
.shadow-emoji {
font-size: 2rem;
}
.object-display {
font-size: 3.5rem;
}
}
</style>
</head>
<body>
<div class="game-container" id="gameContainer">
<div class="game-header">
<div class="level-info">📚 第 <span id="levelNum">1</span> / <span id="totalLevels">30</span> 关</div>
<div class="score-info">⭐ 得分 <span id="scoreNum">0</span></div>
</div>
<div class="progress-bar">
<div class="progress-fill" id="progressFill"></div>
</div>
<div id="gameContent">
<div class="object-area">
<div class="object-title">🔍 找到下面这个物体的影子</div>
<div class="object-display" id="objectDisplay">🐶</div>
</div>
<div class="shadows-area">
<div class="shadows-title">❓ 哪个是它的影子？（黑色剪影）</div>
<div class="shadows-grid" id="shadowsGrid"></div>
</div>
<div class="message-area" id="messageArea">
💡 点击正确的黑色影子就能过关啦！
</div>
<div class="game-buttons">
<button id="nextLevelBtn" style="display: none;">下一关 🎮</button>
<button id="restartBtn">重新开始 🔄</button>
</div>
</div>
<div id="completionScreen" class="completion-screen hidden">
<div class="completion-emoji">🏆</div>
<h2>恭喜你完成所有30关！</h2>
<p>你真是个找影子小能手！</p>
<button id="playAgainBtn">再玩一次 🎮</button>
</div>
</div>
<script>
// 游戏数据 - 30个关卡
const levels = [
{ object: "🐶", objectName: "小狗", shadows: ["🐱", "🐭", "🐹", "🐶"], correctIndex: 3 },
{ object: "🐱", objectName: "小猫", shadows: ["🐶", "🐭", "🐱", "🐹"], correctIndex: 2 },
{ object: "🐭", objectName: "小老鼠", shadows: ["🐹", "🐱", "🐶", "🐭"], correctIndex: 3 },
{ object: "🐮", objectName: "奶牛", shadows: ["🐷", "🐮", "🐑", "🐴"], correctIndex: 1 },
{ object: "🐷", objectName: "小猪", shadows: ["🐮", "🐑", "🐷", "🐴"], correctIndex: 2 },
{ object: "🦁", objectName: "狮子", shadows: ["🐯", "🦁", "🐻", "🐨"], correctIndex: 1 },
{ object: "🐧", objectName: "企鹅", shadows: ["🐦", "🦆", "🐧", "🦉"], correctIndex: 2 },
{ object: "🐘", objectName: "大象", shadows: ["🦒", "🐘", "🦏", "🐫"], correctIndex: 1 },
{ object: "🦒", objectName: "长颈鹿", shadows: ["🐘", "🦒", "🦏", "🐪"], correctIndex: 1 },
{ object: "🐒", objectName: "猴子", shadows: ["🦍", "🐒", "🐵", "🦧"], correctIndex: 1 },
# { object: "🐺", objectName: "狼", shadows: ["🐶", "🐺", "🦊", "🐱"], correctIndex: 1 },
# { object: "🦊", objectName: "狐狸", shadows: ["🐺", "🦊", "🐶", "🐱"], correctIndex: 1 },
{ object: "🐺", objectName: "狼", shadows: ["🐶", "🐺", "🐷", "🐱"], correctIndex: 1 },
{ object: "🦊", objectName: "狐狸", shadows: ["🦁", "🦊", "🐶", "🐱"], correctIndex: 1 },
{ object: "🍎", objectName: "苹果", shadows: ["🍊", "🍎", "🍓", "🍒"], correctIndex: 1 },
{ object: "🍊", objectName: "橙子", shadows: ["🍎", "🍊", "🍓", "🍒"], correctIndex: 1 },
{ object: "🍓", objectName: "草莓", shadows: ["🍎", "🍊", "🍓", "🍒"], correctIndex: 2 },
{ object: "🍉", objectName: "西瓜", shadows: ["🍎", "🍊", "🍉", "🍒"], correctIndex: 2 },
{ object: "🍌", objectName: "香蕉", shadows: ["🍎", "🍊", "🍌", "🍒"], correctIndex: 2 },
{ object: "🍒", objectName: "樱桃", shadows: ["🍎", "🍊", "🍓", "🍒"], correctIndex: 3 },
{ object: "🚗", objectName: "小汽车", shadows: ["🚲", "🚗", "🚌", "🚑"], correctIndex: 1 },
{ object: "🚌", objectName: "公交车", shadows: ["🚗", "🚌", "🚑", "🚲"], correctIndex: 1 },
{ object: "🚲", objectName: "自行车", shadows: ["🚗", "🚌", "🚲", "🚑"], correctIndex: 2 },
{ object: "✈️", objectName: "飞机", shadows: ["🚁", "✈️", "🛸", "🚀"], correctIndex: 1 },
{ object: "🚀", objectName: "火箭", shadows: ["🚁", "✈️", "🛸", "🚀"], correctIndex: 3 },
{ object: "🚢", objectName: "轮船", shadows: ["⛵", "🚢", "🛳️", "🚤"], correctIndex: 1 },
{ object: "🏠", objectName: "房子", shadows: ["🏢", "🏠", "🏪", "🏫"], correctIndex: 1 },
{ object: "📚", objectName: "书本", shadows: ["📱", "📚", "✏️", "📖"], correctIndex: 1 },
{ object: "☎️", objectName: "电话", shadows: ["📱", "☎️", "💻", "📺"], correctIndex: 1 },
{ object: "💡", objectName: "灯泡", shadows: ["🔦", "💡", "🕯️", "🔋"], correctIndex: 1 },
{ object: "⌚", objectName: "手表", shadows: ["📱", "⌚", "💍", "👑"], correctIndex: 1 },
{ object: "🎈", objectName: "气球", shadows: ["🎈", "🎉", "🎁", "🎀"], correctIndex: 0 }
];
let currentLevel = 0;
let score = 0;
let canSelect = true;
// DOM 元素
const gameContent = document.getElementById('gameContent');
const completionScreen = document.getElementById('completionScreen');
const levelNumSpan = document.getElementById('levelNum');
const totalLevelsSpan = document.getElementById('totalLevels');
const scoreNumSpan = document.getElementById('scoreNum');
const objectDisplay = document.getElementById('objectDisplay');
const shadowsGrid = document.getElementById('shadowsGrid');
const messageArea = document.getElementById('messageArea');
const nextLevelBtn = document.getElementById('nextLevelBtn');
const restartBtn = document.getElementById('restartBtn');
const playAgainBtn = document.getElementById('playAgainBtn');
const progressFill = document.getElementById('progressFill');
// 完全禁止页面滚动
function lockScreen() {
// 禁止触摸移动
document.body.addEventListener('touchmove', function(e) {
e.preventDefault();
}, { passive: false });
// 禁止鼠标拖动滚动
document.body.addEventListener('wheel', function(e) {
e.preventDefault();
}, { passive: false });
// 禁止键盘滚动
window.addEventListener('keydown', function(e) {
if (e.key === 'ArrowUp' || e.key === 'ArrowDown' ||
e.key === 'PageUp' || e.key === 'PageDown' ||
e.key === 'Home' || e.key === 'End') {
e.preventDefault();
}
});
}
// 更新进度条
function updateProgress() {
const progress = ((currentLevel) / levels.length) * 100;
progressFill.style.width = `${progress}%`;
}
// 语音播报函数
function speak(text) {
if ('speechSynthesis' in window) {
window.speechSynthesis.cancel();
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'zh-CN';
utterance.rate = 0.9;
utterance.pitch = 1.2;
utterance.volume = 1;
const voices = window.speechSynthesis.getVoices();
const chineseVoice = voices.find(voice => voice.lang === 'zh-CN');
if (chineseVoice) {
utterance.voice = chineseVoice;
}
window.speechSynthesis.speak(utterance);
}
}
// 播放正确音效
function playCorrectSound() {
try {
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);
oscillator.frequency.value = 880;
oscillator.type = 'sine';
gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
gainNode.gain.exponentialRampToValueAtTime(0.0001, audioContext.currentTime + 0.3);
oscillator.start();
oscillator.stop(audioContext.currentTime + 0.3);
} catch(e) {
console.log('音效播放失败');
}
}
// 播放错误音效
function playWrongSound() {
try {
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);
oscillator.frequency.value = 440;
oscillator.type = 'sawtooth';
gainNode.gain.setValueAtTime(0.2, audioContext.currentTime);
gainNode.gain.exponentialRampToValueAtTime(0.0001, audioContext.currentTime + 0.2);
oscillator.start();
oscillator.stop(audioContext.currentTime + 0.2);
} catch(e) {
console.log('音效播放失败');
}
}
// 播放完成音乐
function playCompleteMusic() {
try {
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const notes = [523.25, 587.33, 659.25, 698.46, 783.99, 880.00];
notes.forEach((freq, index) => {
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);
oscillator.frequency.value = freq;
oscillator.type = 'sine';
gainNode.gain.setValueAtTime(0.2, audioContext.currentTime + index * 0.15);
gainNode.gain.exponentialRampToValueAtTime(0.0001, audioContext.currentTime + (index * 0.15) + 0.2);
oscillator.start(audioContext.currentTime + index * 0.15);
oscillator.stop(audioContext.currentTime + (index * 0.15) + 0.2);
});
} catch(e) {
console.log('音乐播放失败');
}
}
// 更新UI
function updateUI() {
levelNumSpan.textContent = currentLevel + 1;
scoreNumSpan.textContent = score;
updateProgress();
const level = levels[currentLevel];
objectDisplay.textContent = level.object;
renderShadows(level.shadows);
}
// 渲染影子选项
function renderShadows(shadows) {
shadowsGrid.innerHTML = '';
shadows.forEach((shadow, index) => {
const shadowCard = document.createElement('div');
shadowCard.className = 'shadow-card';
shadowCard.innerHTML = `<div class="shadow-emoji">${shadow}</div>`;
shadowCard.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
checkAnswer(index);
});
shadowsGrid.appendChild(shadowCard);
});
}
// 检查答案
function checkAnswer(selectedIndex) {
if (!canSelect) return;
const level = levels[currentLevel];
const isCorrect = (selectedIndex === level.correctIndex);
if (isCorrect) {
canSelect = false;
score += 10;
scoreNumSpan.textContent = score;
const cards = document.querySelectorAll('.shadow-card');
cards[selectedIndex].classList.add('correct');
messageArea.innerHTML = `🎉 正确！是${level.objectName}！ 🎉`;
speak(`正确，是${level.objectName}`);
playCorrectSound();
nextLevelBtn.style.display = 'inline-block';
if (currentLevel === levels.length - 1) {
nextLevelBtn.textContent = '完成游戏 🏆';
}
} else {
const cards = document.querySelectorAll('.shadow-card');
cards[selectedIndex].classList.add('wrong');
messageArea.innerHTML = '😅 找错了，再试试！';
speak('找错了，再试试');
playWrongSound();
setTimeout(() => {
cards[selectedIndex].classList.remove('wrong');
}, 500);
}
}
// 进入下一关
function nextLevel() {
if (currentLevel < levels.length - 1) {
currentLevel++;
canSelect = true;
nextLevelBtn.style.display = 'none';
messageArea.innerHTML = '✨ 进入下一关！继续找黑色影子吧 ✨';
updateUI();
setTimeout(() => {
speak(`第${currentLevel + 1}关，找找${levels[currentLevel].objectName}的影子`);
}, 300);
} else {
completeGame();
}
}
// 完成游戏
function completeGame() {
gameContent.classList.add('hidden');
completionScreen.classList.remove('hidden');
playCompleteMusic();
speak(`恭喜你完成了所有30关！最终得分 ${score} 分！`);
}
// 重新开始游戏
function restartGame() {
currentLevel = 0;
score = 0;
canSelect = true;
nextLevelBtn.style.display = 'none';
gameContent.classList.remove('hidden');
completionScreen.classList.add('hidden');
updateUI();
messageArea.innerHTML = '💡 点击正确的黑色影子就能过关啦！';
updateProgress();
setTimeout(() => {
speak("重新开始游戏！找到正确的黑色影子就能过关啦！");
}, 300);
}
// 事件监听
nextLevelBtn.addEventListener('click', nextLevel);
restartBtn.addEventListener('click', restartGame);
playAgainBtn.addEventListener('click', restartGame);
// 设置总关卡数
totalLevelsSpan.textContent = levels.length;
// 锁定屏幕防止滚动
lockScreen();
// 初始化游戏
updateUI();
// 预加载语音系统
if ('speechSynthesis' in window) {
window.speechSynthesis.getVoices();
}
// 欢迎语音
setTimeout(() => {
speak(`欢迎来到找影子游戏！一共30关，第一关，找找${levels[0].objectName}的黑色影子`);
}, 500);
</script>
</body>
</html>'''
# 保存到指定路径
file_path = r'D:\test\20桌面素材\20260326动物影子配对\07 适配希沃白板 找影子游戏_儿童益智版.html'
# 确保目录存在
os.makedirs(os.path.dirname(file_path), exist_ok=True)
try:
with open(file_path, 'w', encoding='utf-8') as f:
f.write(html_content)
print(f'✅ 找影子游戏（30关）已成功生成！')
print(f'📁 文件保存位置: {file_path}')
print('🎮 游戏特性：')
print(' - 🎯 30个精彩关卡，内容丰富多样')
print(' - 🔒 完全锁定屏幕，消除所有滚动条')
print(' - 🖤 影子使用黑色剪影效果，清晰区分彩色物体')
print(' - 🗣️ 选中正确：语音播报"正确，是XX"')
print(' - 🗣️ 选中错误：语音播报"找错了，再试试"')
print(' - 🎵 正确/错误都有音效反馈')
print(' - ⭐ 每关正确+10分，总分300分')
print(' - 📊 进度条显示通关进度')
print(' - 🎉 完成所有30关有庆祝音乐和语音')
print(' - 📱 完美适配希沃白板，触摸操作优化')
print(' - 💯 根据屏幕高度自动调整布局，无滚动条')
return file_path
except Exception as e:
print(f'❌ 生成文件失败: {e}')
return None
if __name__ == '__main__':
generate_shadow_game()11、12题中间的狐狸和狼替换成跟其他动物
这四个选项里面不能隐藏 ，只能删除
无滚动条
第11和12关内容已经修改
希沃白板上测试
都在一页上，无滚动条
手指在网页上滑动，网页没有移动（网页锁定）
因为选项在下方，所以矮个子孩子也能操作
要改的太多了，还是让AI给我全部代码
python
'''
找动物影子，四选一， 有声音提示、白色底纹、黑色动物选项06
制作30关（内有重复）
无滚动条
界面固定！确定
适配笔记本和希沃白板的不同显示屏比例
图案全部居中
Deepseek，阿夏
20260326
'''
import os
def generate_shadow_game():
"""
生成找影子游戏HTML文件
4个黑色影子，1个彩色物体，一共30关
影子使用黑色剪影，选择后语音反馈
完全适配希沃白板，无滚动条，固定屏幕
"""
html_content = '''<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
<title>找影子 - 儿童益智游戏（30关）</title>
<style>
* {
user-select: none;
-webkit-tap-highlight-color: transparent;
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: 0;
}
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
justify-content: center;
align-items: center;
font-family: 'Segoe UI', 'Comic Neue', 'Comic Sans MS', 'Chalkboard SE', cursive, sans-serif;
overflow: hidden;
}
.game-container {
background: rgba(255, 255, 255, 0.95);
border-radius: 48px;
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
padding: 20px;
width: 90%;
max-width: 700px;
height: auto;
max-height: 90vh;
display: flex;
flex-direction: column;
overflow: visible;
}
/* 头部信息 */
.game-header {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
border-radius: 40px;
padding: 12px 20px;
margin-bottom: 15px;
display: flex;
justify-content: space-between;
align-items: center;
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
flex-shrink: 0;
}
.level-info, .score-info {
background: rgba(255,255,255,0.2);
padding: 5px 15px;
border-radius: 30px;
font-weight: bold;
font-size: 0.9rem;
}
.level-info span, .score-info span {
font-size: 1.2rem;
margin-left: 5px;
color: #ffeb3b;
}
/* 进度条 */
.progress-bar {
margin: 8px 0 12px 0;
background: #e0e0e0;
border-radius: 15px;
height: 6px;
overflow: hidden;
flex-shrink: 0;
}
.progress-fill {
background: linear-gradient(90deg, #f093fb, #f5576c);
height: 100%;
width: 0%;
transition: width 0.3s ease;
border-radius: 15px;
}
/* 物体显示区域 - 居中 */
.object-area {
background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
border-radius: 35px;
padding: 12px;
margin-bottom: 15px;
box-shadow: 0 8px 15px rgba(0,0,0,0.1);
flex-shrink: 0;
text-align: center;
}
.object-title {
font-size: 1rem;
color: white;
margin-bottom: 8px;
font-weight: bold;
}
.object-display {
font-size: 4.5rem;
background: rgba(255,255,255,0.9);
border-radius: 25px;
padding: 8px;
display: inline-block;
box-shadow: 0 5px 12px rgba(0,0,0,0.2);
pointer-events: none;
margin: 0 auto;
}
/* 影子选项区域 */
.shadows-area {
margin-bottom: 12px;
flex-shrink: 0;
}
.shadows-title {
font-size: 1rem;
color: #764ba2;
margin-bottom: 10px;
font-weight: bold;
text-align: center;
}
.shadows-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin-bottom: 8px;
}
.shadow-card {
background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%);
border-radius: 20px;
padding: 12px;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
border: 2px solid #d0d7de;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
text-align: center;
}
.shadow-card:active {
transform: scale(0.98);
}
.shadow-card.selected {
background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);
transform: scale(0.98);
border-color: #f39c12;
}
.shadow-card.correct {
background: linear-gradient(135deg, #a8e6cf 0%, #6ab04c 100%);
animation: correctAnimation 0.5s ease;
border-color: #27ae60;
}
.shadow-card.wrong {
background: linear-gradient(135deg, #ffb3ba 0%, #e74c3c 100%);
animation: wrongAnimation 0.3s ease;
border-color: #c0392b;
}
@keyframes correctAnimation {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
@keyframes wrongAnimation {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
/* 影子效果 - 黑色剪影 */
.shadow-emoji {
font-size: 2.5rem;
transition: all 0.2s ease;
filter: brightness(0) invert(0) drop-shadow(1px 1px 2px rgba(0,0,0,0.2));
pointer-events: none;
display: inline-block;
}
/* 正确时影子变成彩色庆祝 */
.shadow-card.correct .shadow-emoji {
filter: brightness(1) invert(0);
}
/* 消息区域 - 居中 */
.message-area {
background: #f8f9fa;
border-radius: 25px;
padding: 8px;
margin: 10px 0;
font-size: 0.9rem;
font-weight: bold;
color: #2c3e50;
border: 2px solid #e0e0e0;
min-height: 48px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
pointer-events: none;
text-align: center;
}
/* 按钮区域 */
.game-buttons {
display: flex;
gap: 12px;
justify-content: center;
flex-shrink: 0;
margin-top: 5px;
}
button {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
font-family: inherit;
font-weight: bold;
font-size: 0.9rem;
padding: 8px 20px;
border-radius: 25px;
color: white;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 3px 6px rgba(0,0,0,0.2);
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
button:active {
transform: translateY(2px);
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
/* 完成界面 */
.completion-screen {
text-align: center;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 280px;
}
.completion-screen h2 {
color: #f5576c;
font-size: 1.5rem;
margin: 15px 0;
}
.completion-screen p {
font-size: 1rem;
color: #667eea;
margin-bottom: 20px;
}
.completion-emoji {
font-size: 4rem;
margin: 15px 0;
}
.hidden {
display: none;
}
/* 防止拖拽和选中 */
img, div {
-webkit-user-drag: none;
user-drag: none;
}
/* 希沃白板专用优化 - 完全锁定屏幕 */
body {
touch-action: none;
-ms-touch-action: none;
}
.game-container {
touch-action: pan-y;
-ms-touch-action: pan-y;
}
/* 响应式设计 - 根据屏幕高度自动调整 */
@media (max-height: 700px) {
.game-container {
padding: 12px;
}
.object-display {
font-size: 3.5rem;
}
.shadow-emoji {
font-size: 2rem;
}
.shadow-card {
padding: 8px;
}
.game-header {
padding: 8px 15px;
}
.object-area {
padding: 8px;
}
.message-area {
min-height: 40px;
font-size: 0.8rem;
}
}
@media (max-height: 600px) {
.object-display {
font-size: 3rem;
}
.shadow-emoji {
font-size: 1.8rem;
}
.game-header {
margin-bottom: 8px;
}
.object-area {
margin-bottom: 8px;
}
.shadows-grid {
gap: 8px;
}
}
@media (max-width: 600px) {
.game-container {
padding: 12px;
width: 92%;
}
.shadow-emoji {
font-size: 2rem;
}
.object-display {
font-size: 3.5rem;
}
}
</style>
</head>
<body>
<div class="game-container" id="gameContainer">
<div class="game-header">
<div class="level-info">📚 第 <span id="levelNum">1</span> / <span id="totalLevels">30</span> 关</div>
<div class="score-info">⭐ 得分 <span id="scoreNum">0</span></div>
</div>
<div class="progress-bar">
<div class="progress-fill" id="progressFill"></div>
</div>
<div id="gameContent">
<div class="object-area">
<div class="object-title">🔍 找到下面这个物体的影子</div>
<div class="object-display" id="objectDisplay">🐶</div>
</div>
<div class="shadows-area">
<div class="shadows-title">❓ 哪个是它的影子？（黑色剪影）</div>
<div class="shadows-grid" id="shadowsGrid"></div>
</div>
<div class="message-area" id="messageArea">
💡 点击正确的黑色影子就能过关啦！
</div>
<div class="game-buttons">
<button id="nextLevelBtn" style="display: none;">下一关 🎮</button>
<button id="restartBtn">重新开始 🔄</button>
</div>
</div>
<div id="completionScreen" class="completion-screen hidden">
<div class="completion-emoji">🏆</div>
<h2>恭喜你完成所有30关！</h2>
<p>你真是个找影子小能手！</p>
<button id="playAgainBtn">再玩一次 🎮</button>
</div>
</div>
<script>
// 游戏数据 - 30个关卡
const levels = [
{ object: "🐶", objectName: "小狗", shadows: ["🐱", "🐭", "🐹", "🐶"], correctIndex: 3 },
{ object: "🐱", objectName: "小猫", shadows: ["🐶", "🐭", "🐱", "🐹"], correctIndex: 2 },
{ object: "🐭", objectName: "小老鼠", shadows: ["🐹", "🐱", "🐶", "🐭"], correctIndex: 3 },
{ object: "🐮", objectName: "奶牛", shadows: ["🐷", "🐮", "🐑", "🐴"], correctIndex: 1 },
{ object: "🐷", objectName: "小猪", shadows: ["🐮", "🐑", "🐷", "🐴"], correctIndex: 2 },
{ object: "🦁", objectName: "狮子", shadows: ["🐯", "🦁", "🐻", "🐨"], correctIndex: 1 },
{ object: "🐧", objectName: "企鹅", shadows: ["🐦", "🦆", "🐧", "🦉"], correctIndex: 2 },
{ object: "🐘", objectName: "大象", shadows: ["🦒", "🐘", "🦏", "🐫"], correctIndex: 1 },
{ object: "🦒", objectName: "长颈鹿", shadows: ["🐘", "🦒", "🦏", "🐪"], correctIndex: 1 },
{ object: "🐒", objectName: "猴子", shadows: ["🦍", "🐒", "🐵", "🦧"], correctIndex: 1 },
{ object: "🐺", objectName: "狼", shadows: ["🐶", "🐺", "🐷", "🐱"], correctIndex: 1 },
{ object: "🦊", objectName: "狐狸", shadows: ["🦁", "🦊", "🐶", "🐱"], correctIndex: 1 },
{ object: "🍎", objectName: "苹果", shadows: ["🍊", "🍎", "🍓", "🍒"], correctIndex: 1 },
{ object: "🍊", objectName: "橙子", shadows: ["🍎", "🍊", "🍓", "🍒"], correctIndex: 1 },
{ object: "🍓", objectName: "草莓", shadows: ["🍎", "🍊", "🍓", "🍒"], correctIndex: 2 },
{ object: "🍉", objectName: "西瓜", shadows: ["🍎", "🍊", "🍉", "🍒"], correctIndex: 2 },
{ object: "🍌", objectName: "香蕉", shadows: ["🍎", "🍊", "🍌", "🍒"], correctIndex: 2 },
{ object: "🍒", objectName: "樱桃", shadows: ["🍎", "🍊", "🍓", "🍒"], correctIndex: 3 },
{ object: "🚗", objectName: "小汽车", shadows: ["🚲", "🚗", "🚌", "🚑"], correctIndex: 1 },
{ object: "🚌", objectName: "公交车", shadows: ["🚗", "🚌", "🚑", "🚲"], correctIndex: 1 },
{ object: "🚲", objectName: "自行车", shadows: ["🚗", "🚌", "🚲", "🚑"], correctIndex: 2 },
{ object: "✈️", objectName: "飞机", shadows: ["🚁", "✈️", "🛸", "🚀"], correctIndex: 1 },
{ object: "🚀", objectName: "火箭", shadows: ["🚁", "✈️", "🛸", "🚀"], correctIndex: 3 },
{ object: "🚢", objectName: "轮船", shadows: ["⛵", "🚢", "🛳️", "🚤"], correctIndex: 1 },
{ object: "🏠", objectName: "房子", shadows: ["🏢", "🏠", "🏪", "🏫"], correctIndex: 1 },
{ object: "📚", objectName: "书本", shadows: ["📱", "📚", "✏️", "📖"], correctIndex: 1 },
{ object: "☎️", objectName: "电话", shadows: ["📱", "☎️", "💻", "📺"], correctIndex: 1 },
{ object: "💡", objectName: "灯泡", shadows: ["🔦", "💡", "🕯️", "🔋"], correctIndex: 1 },
{ object: "⌚", objectName: "手表", shadows: ["📱", "⌚", "💍", "👑"], correctIndex: 1 },
{ object: "🎈", objectName: "气球", shadows: ["🎈", "🎉", "🎁", "🎀"], correctIndex: 0 }
];
let currentLevel = 0;
let score = 0;
let canSelect = true;
// DOM 元素
const gameContent = document.getElementById('gameContent');
const completionScreen = document.getElementById('completionScreen');
const levelNumSpan = document.getElementById('levelNum');
const totalLevelsSpan = document.getElementById('totalLevels');
const scoreNumSpan = document.getElementById('scoreNum');
const objectDisplay = document.getElementById('objectDisplay');
const shadowsGrid = document.getElementById('shadowsGrid');
const messageArea = document.getElementById('messageArea');
const nextLevelBtn = document.getElementById('nextLevelBtn');
const restartBtn = document.getElementById('restartBtn');
const playAgainBtn = document.getElementById('playAgainBtn');
const progressFill = document.getElementById('progressFill');
// 完全禁止页面滚动
function lockScreen() {
// 禁止触摸移动
document.body.addEventListener('touchmove', function(e) {
e.preventDefault();
}, { passive: false });
// 禁止鼠标拖动滚动
document.body.addEventListener('wheel', function(e) {
e.preventDefault();
}, { passive: false });
// 禁止键盘滚动
window.addEventListener('keydown', function(e) {
if (e.key === 'ArrowUp' || e.key === 'ArrowDown' ||
e.key === 'PageUp' || e.key === 'PageDown' ||
e.key === 'Home' || e.key === 'End') {
e.preventDefault();
}
});
}
// 更新进度条
function updateProgress() {
const progress = ((currentLevel) / levels.length) * 100;
progressFill.style.width = `${progress}%`;
}
// 语音播报函数
function speak(text) {
if ('speechSynthesis' in window) {
window.speechSynthesis.cancel();
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'zh-CN';
utterance.rate = 0.9;
utterance.pitch = 1.2;
utterance.volume = 1;
const voices = window.speechSynthesis.getVoices();
const chineseVoice = voices.find(voice => voice.lang === 'zh-CN');
if (chineseVoice) {
utterance.voice = chineseVoice;
}
window.speechSynthesis.speak(utterance);
}
}
// 播放正确音效
function playCorrectSound() {
try {
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);
oscillator.frequency.value = 880;
oscillator.type = 'sine';
gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
gainNode.gain.exponentialRampToValueAtTime(0.0001, audioContext.currentTime + 0.3);
oscillator.start();
oscillator.stop(audioContext.currentTime + 0.3);
} catch(e) {
console.log('音效播放失败');
}
}
// 播放错误音效
function playWrongSound() {
try {
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);
oscillator.frequency.value = 440;
oscillator.type = 'sawtooth';
gainNode.gain.setValueAtTime(0.2, audioContext.currentTime);
gainNode.gain.exponentialRampToValueAtTime(0.0001, audioContext.currentTime + 0.2);
oscillator.start();
oscillator.stop(audioContext.currentTime + 0.2);
} catch(e) {
console.log('音效播放失败');
}
}
// 播放完成音乐
function playCompleteMusic() {
try {
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const notes = [523.25, 587.33, 659.25, 698.46, 783.99, 880.00];
notes.forEach((freq, index) => {
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);
oscillator.frequency.value = freq;
oscillator.type = 'sine';
gainNode.gain.setValueAtTime(0.2, audioContext.currentTime + index * 0.15);
gainNode.gain.exponentialRampToValueAtTime(0.0001, audioContext.currentTime + (index * 0.15) + 0.2);
oscillator.start(audioContext.currentTime + index * 0.15);
oscillator.stop(audioContext.currentTime + (index * 0.15) + 0.2);
});
} catch(e) {
console.log('音乐播放失败');
}
}
// 更新UI
function updateUI() {
levelNumSpan.textContent = currentLevel + 1;
scoreNumSpan.textContent = score;
updateProgress();
const level = levels[currentLevel];
objectDisplay.textContent = level.object;
renderShadows(level.shadows);
}
// 渲染影子选项
function renderShadows(shadows) {
shadowsGrid.innerHTML = '';
shadows.forEach((shadow, index) => {
const shadowCard = document.createElement('div');
shadowCard.className = 'shadow-card';
shadowCard.innerHTML = `<div class="shadow-emoji">${shadow}</div>`;
shadowCard.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
checkAnswer(index);
});
shadowsGrid.appendChild(shadowCard);
});
}
// 检查答案
function checkAnswer(selectedIndex) {
if (!canSelect) return;
const level = levels[currentLevel];
const isCorrect = (selectedIndex === level.correctIndex);
if (isCorrect) {
canSelect = false;
score += 10;
scoreNumSpan.textContent = score;
const cards = document.querySelectorAll('.shadow-card');
cards[selectedIndex].classList.add('correct');
messageArea.innerHTML = `🎉 正确！是${level.objectName}！ 🎉`;
speak(`正确，是${level.objectName}`);
playCorrectSound();
nextLevelBtn.style.display = 'inline-block';
if (currentLevel === levels.length - 1) {
nextLevelBtn.textContent = '完成游戏 🏆';
}
} else {
const cards = document.querySelectorAll('.shadow-card');
cards[selectedIndex].classList.add('wrong');
messageArea.innerHTML = '😅 找错了，再试试！';
speak('找错了，再试试');
playWrongSound();
setTimeout(() => {
cards[selectedIndex].classList.remove('wrong');
}, 500);
}
}
// 进入下一关
function nextLevel() {
if (currentLevel < levels.length - 1) {
currentLevel++;
canSelect = true;
nextLevelBtn.style.display = 'none';
messageArea.innerHTML = '✨ 进入下一关！继续找黑色影子吧 ✨';
updateUI();
setTimeout(() => {
speak(`第${currentLevel + 1}关，找找${levels[currentLevel].objectName}的影子`);
}, 300);
} else {
completeGame();
}
}
// 完成游戏
function completeGame() {
gameContent.classList.add('hidden');
completionScreen.classList.remove('hidden');
playCompleteMusic();
speak(`恭喜你完成了所有30关！最终得分 ${score} 分！`);
}
// 重新开始游戏
function restartGame() {
currentLevel = 0;
score = 0;
canSelect = true;
nextLevelBtn.style.display = 'none';
gameContent.classList.remove('hidden');
completionScreen.classList.add('hidden');
updateUI();
messageArea.innerHTML = '💡 点击正确的黑色影子就能过关啦！';
updateProgress();
setTimeout(() => {
speak("重新开始游戏！找到正确的黑色影子就能过关啦！");
}, 300);
}
// 事件监听
nextLevelBtn.addEventListener('click', nextLevel);
restartBtn.addEventListener('click', restartGame);
playAgainBtn.addEventListener('click', restartGame);
// 设置总关卡数
totalLevelsSpan.textContent = levels.length;
// 锁定屏幕防止滚动
lockScreen();
// 初始化游戏
updateUI();
// 预加载语音系统
if ('speechSynthesis' in window) {
window.speechSynthesis.getVoices();
}
// 欢迎语音
setTimeout(() => {
speak(`欢迎来到找影子游戏！一共30关，第一关，找找${levels[0].objectName}的黑色影子`);
}, 500);
</script>
</body>
</html>'''
# 保存到指定路径
file_path = r'D:\test\20桌面素材\20260326动物影子配对\07 适配希沃白板 图案居中 找影子游戏_儿童益智版.html'
# 确保目录存在
os.makedirs(os.path.dirname(file_path), exist_ok=True)
try:
with open(file_path, 'w', encoding='utf-8') as f:
f.write(html_content)
print(f'✅ 找影子游戏（30关）已成功生成！')
print(f'📁 文件保存位置: {file_path}')
print('🎮 游戏特性：')
print(' - 🎯 30个精彩关卡，内容丰富多样')
print(' - 🔒 完全锁定屏幕，消除所有滚动条')
print(' - 🖤 影子使用黑色剪影效果，清晰区分彩色物体')
print(' - 🗣️ 选中正确：语音播报"正确，是XX"')
print(' - 🗣️ 选中错误：语音播报"找错了，再试试"')
print(' - 🎵 正确/错误都有音效反馈')
print(' - ⭐ 每关正确+10分，总分300分')
print(' - 📊 进度条显示通关进度')
print(' - 🎉 完成所有30关有庆祝音乐和语音')
print(' - 📱 完美适配希沃白板，触摸操作优化')
print(' - 💯 根据屏幕高度自动调整布局，无滚动条')
print(' - 🎨 所有内容居中对齐，视觉效果更好')
return file_path
except Exception as e:
print(f'❌ 生成文件失败: {e}')
return None
if __name__ == '__main__':
generate_shadow_game()
希沃白板效果
底部任务栏的按钮，误触，还是会出现界面遮挡HTML
