视觉英语闪卡挑战

选择一个主题开始学习

主题：家庭名词共 22

学习范围: - 0 / 22

准备开始学习

点击播放按钮开始

登录 / 注册

/** * 视觉英语学习系统 - 宠物模块 * 版本：1.0.0 * 功能：学习宠物陪伴系统 * * 使用方法： * 1. 在 HTML 页面中引入此文件： * 2. 宠物会自动显示在页面右下角 * 3. 调用 PetWidget.onWordLearned() 来喂食宠物 */ (function() { 'use strict'; // 宠物系统全局对象 window.PetWidget = { // 版本信息 version: '1.0.0', // 宠物数据 data: { name: 'Wordy', level: 1, exp: 0, hunger: 80, // 饥饿度 0-100 happiness: 90, // 快乐度 0-100 lastFeedTime: Date.now(), totalWordsLearned: 0 }, // 配置选项 config: { hungerDecreaseRate: 5, // 每小时减少的饥饿度 feedValue: 10, // 每次喂食增加的饱食度 expPerWord: 10, // 每个单词的经验值 levelUpExp: 100, // 升级所需经验 autoSave: true, // 自动保存 position: 'bottom-right' // 位置：bottom-right, bottom-left, top-right, top-left }, // UI 元素引用 ui: {}, // 初始化 init: function() { console.log('🐾 Pet Widget v' + this.version + ' 初始化中...'); // 加载保存的数据 this.loadData(); // 创建 UI this.createUI(); // 启动定时器 this.startTimers(); // 绑定全局事件 this.bindEvents(); console.log('✅ Pet Widget 初始化完成！'); // 显示欢迎消息 this.showMessage('Hi! 我是 ' + this.data.name + '！一起学习吧！'); }, // 创建 UI createUI: function() { // 创建主容器 const container = document.createElement('div'); container.id = 'pet-widget-container'; container.innerHTML = `

${this.data.name}

Level ${this.data.level}

🍎 饥饿度

😊 快乐度

⭐ 经验值

`; // 添加到页面 document.body.appendChild(container); // 保存 UI 元素引用 this.ui = { container: container, hungerBar: document.getElementById('hunger-bar'), happinessBar: document.getElementById('happiness-bar'), expBar: document.getElementById('exp-bar'), speech: document.getElementById('pet-speech'), petImage: document.getElementById('pet-image'), levelText: container.querySelector('.pet-level') }; }, // 显示消息 showMessage: function(message, duration = 3000) { const bubble = this.ui.speech; bubble.textContent = message; bubble.classList.add('show'); clearTimeout(this.messageTimeout); this.messageTimeout = setTimeout(() => { bubble.classList.remove('show'); }, duration); }, // 宠物点击事件 onPetClick: function() { this.ui.petImage.classList.add('happy'); setTimeout(() => { this.ui.petImage.classList.remove('happy'); }, 500); const messages = [ '嗨！一起学习吧！', '今天学了多少单词呀？', '我有点饿了...', '你真棒！继续加油！', '陪我玩一会儿吧~' ]; this.showMessage(messages[Math.floor(Math.random() * messages.length)]); }, // 学习单词时调用（主要接口） onWordLearned: function(word) { console.log('🎉 学习了新单词:', word); // 增加饱食度 this.data.hunger = Math.min(100, this.data.hunger + this.config.feedValue); // 增加经验 this.addExp(this.config.expPerWord); // 增加快乐度 this.data.happiness = Math.min(100, this.data.happiness + 2); // 记录学习数量 this.data.totalWordsLearned++; // 更新 UI this.updateUI(); // 显示吃东西动画 this.ui.petImage.classList.add('eating'); setTimeout(() => { this.ui.petImage.classList.remove('eating'); }, 300); // 显示鼓励消息 const encouragements = [ `"${word}" 真好吃！😋`, '太棒了！又学会一个！', '继续加油哦！💪', '你真聪明！🌟', '美味的知识！🍎' ]; this.showMessage(encouragements[Math.floor(Math.random() * encouragements.length)]); // 保存数据 this.saveData(); }, // 喂食 feed: function() { if (this.data.hunger >= 100) { this.showMessage('我已经吃饱了！去学习吧~'); return; } this.showMessage('需要学习单词才能喂食哦！'); // 如果集成了学习系统，可以触发学习 if (window.startLearning) { window.startLearning(); } }, // 玩耍 play: function() { if (this.data.happiness >= 100) { this.showMessage('我现在很开心！😊'); return; } // 简单的互动游戏 this.ui.petImage.classList.add('happy'); this.data.happiness = Math.min(100, this.data.happiness + 10); this.updateUI(); setTimeout(() => { this.ui.petImage.classList.remove('happy'); }, 500); this.showMessage('好开心！谢谢陪我玩！'); this.saveData(); }, // 显示详细信息 toggleInfo: function() { const info = ` 等级: ${this.data.level} 经验: ${this.data.exp} 已学单词: ${this.data.totalWordsLearned} 连续学习: ${this.getStreak()} 天 `; this.showMessage(info.trim(), 5000); }, // 增加经验值 addExp: function(amount) { this.data.exp += amount; // 检查升级 while (this.data.exp >= this.config.levelUpExp * this.data.level) { this.data.exp -= this.config.levelUpExp * this.data.level; this.data.level++; this.onLevelUp(); } this.updateUI(); }, // 升级 onLevelUp: function() { console.log('🎊 宠物升级了！等级:', this.data.level); // 升级奖励 this.data.hunger = 100; this.data.happiness = 100; // 显示升级动画和消息 this.ui.petImage.classList.add('happy'); this.showMessage(`🎉 升级了！现在是 Level ${this.data.level}！`, 5000); setTimeout(() => { this.ui.petImage.classList.remove('happy'); }, 1000); // 可以解锁新功能 if (this.data.level === 5) { this.showMessage('解锁了新外观！', 4000); } }, // 更新 UI updateUI: function() { // 更新进度条 this.ui.hungerBar.style.width = this.data.hunger + '%'; this.ui.happinessBar.style.width = this.data.happiness + '%'; this.ui.expBar.style.width = (this.data.exp % this.config.levelUpExp) / this.config.levelUpExp * 100 + '%'; // 更新等级文本 this.ui.levelText.textContent = 'Level ' + this.data.level; // 根据状态更新宠物表情 this.updatePetMood(); }, // 更新宠物表情 updatePetMood: function() { // 这里可以根据不同状态切换不同的图片 // 暂时使用 SVG 的简单实现 if (this.data.hunger < 30) { // 饥饿表情 this.ui.petImage.style.filter = 'grayscale(50%)'; } else if (this.data.happiness > 80) { // 开心表情 this.ui.petImage.style.filter = 'brightness(1.1)'; } else { // 正常表情 this.ui.petImage.style.filter = 'none'; } }, // 启动定时器 startTimers: function() { // 每分钟更新一次饥饿度 this.hungerTimer = setInterval(() => { const now = Date.now(); const hoursPassed = (now - this.data.lastFeedTime) / (1000 * 60 * 60); if (hoursPassed > 0.1) { // 至少过了6分钟 this.data.hunger = Math.max(0, this.data.hunger - this.config.hungerDecreaseRate); this.data.happiness = Math.max(0, this.data.happiness - 2); this.data.lastFeedTime = now; this.updateUI(); this.saveData(); // 饥饿提醒 if (this.data.hunger < 30 && this.data.hunger > 0) { this.showMessage('我好饿...快来学习喂我吧！'); } } }, 60000); // 每分钟检查一次 }, // 获取连续学习天数 getStreak: function() { // 简化版本，实际应该记录每天的学习情况 return Math.floor(this.data.totalWordsLearned / 20); }, // 保存数据 saveData: function() { if (this.config.autoSave) { localStorage.setItem('petWidgetData', JSON.stringify(this.data)); console.log('💾 宠物数据已保存'); } }, // 加载数据 loadData: function() { const saved = localStorage.getItem('petWidgetData'); if (saved) { try { const parsed = JSON.parse(saved); Object.assign(this.data, parsed); console.log('📂 已加载保存的宠物数据'); } catch (e) { console.error('加载宠物数据失败:', e); } } }, // 绑定全局事件 bindEvents: function() { // 页面关闭时保存 window.addEventListener('beforeunload', () => { this.saveData(); }); // 页面可见性改变时更新 document.addEventListener('visibilitychange', () => { if (!document.hidden) { this.updateUI(); } }); }, // 销毁 destroy: function() { clearInterval(this.hungerTimer); clearTimeout(this.messageTimeout); if (this.ui.container) { this.ui.container.remove(); } console.log('👋 Pet Widget 已销毁'); }, // 隐藏/显示 hide: function() { if (this.ui.container) { this.ui.container.style.display = 'none'; } }, show: function() { if (this.ui.container) { this.ui.container.style.display = 'block'; } }, // API：与学习系统集成 api: { // 当正确回答时 onCorrectAnswer: function() { PetWidget.onWordLearned('correct'); }, // 当完成一个主题时 onTopicComplete: function() { PetWidget.addExp(50); PetWidget.showMessage('完成了一个主题！太厉害了！🎊'); }, // 当达成成就时 onAchievement: function(achievement) { PetWidget.data.happiness = 100; PetWidget.updateUI(); PetWidget.showMessage(`🏆 获得成就：${achievement}！`); } } }; // 页面加载完成后自动初始化 if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', function() { PetWidget.init(); }); } else { // 页面已经加载完成 setTimeout(() => { PetWidget.init(); }, 100); } })();