卧室过家家游戏：用纯前端技术打造温馨互动小屋

华为云训练营作品 · 纯原生 Web 技术栈 · 零依赖即开即玩

引言

在华为云训练营的学习过程中，我开发了一款名为"卧室过家家游戏"的互动小游戏。玩家可以通过拖放家具装扮自己的虚拟卧室，放置角色并让它们执行各种动作，还能切换白天、夜晚和雨天三种主题氛围。本文分享项目的设计思路、技术实现和开发心得。

一、项目设计思路

核心玩法

• 🪑 家具放置：从左侧面板选择家具，点击房间空白处放置，支持拖拽移动和右键删除
• 👫 角色互动：放置女孩和男孩角色，点击角色会根据附近家具智能推荐动作（床→睡觉，电脑→玩电脑）
• 🌙 主题切换：白天、夜晚、雨天三种氛围，夜晚有星星闪烁，雨天有雨滴飘落
• ⭐ 积分系统：放置家具和角色动作均可获得积分
• 💾 存档功能：使用 localStorage 自动保存房间布局

二、技术选型

纯原生 Web 技术栈，不依赖任何框架或第三方库：

三、核心功能实现

3.1 家具系统

12 种家具用 Emoji 图标表示，绝对定位放置在房间容器内，通过鼠标事件实现拖拽和删除。

3.2 角色动作系统

2 个角色 × 5 种动作动画（空闲、行走、睡觉、坐下、玩耍）。点击角色时根据附近家具类型智能推荐动作。

3.3 主题切换与粒子效果

夜晚模式动态生成 30 个星星 + 月亮；雨天模式生成 60 个雨滴粒子，随机延迟实现自然效果。

3.4 音效系统

Web Audio API 的 OscillatorNode 生成 6 种事件音效，支持开关。

3.5 存档系统

localStorage 保存游戏状态，页面刷新后自动恢复。

四、技术心得

1. DOM 操作优于 Canvas：频繁交互场景下，DOM 原生事件绑定更方便
2. CSS 动画 vs JS 动画：keyframes 性能更优，JS 只切换 className
3. Emoji 作为图标：减小体积、跨平台一致、自带彩色

五、作品链接

• 🔗 GitCode 仓库：https://gitcode.com/Eddygit/bedroom-playhouse-game
• 🎨 开发者画廊：https://gallery.developer.huaweicloud.com/gallery/004e28ff8b000000
• 🌐 在线预览：通过 DevBridge 隧道访问

六、总结

项目涵盖前端开发多个核心知识点：DOM 操作、事件处理、CSS 动画、Web Audio API、localStorage、响应式设计。感谢华为云训练营提供的平台和资源！