主要观点：介绍一个游戏的开发，包括两种场景的 UI 设计（画布 UI 和 DOM 基于的 UI）、状态机管理、画布 UI 相关技术及实现细节，游戏仍在开发中并将持续记录，欢迎反馈及询问。
关键信息：

• 2025 年 3 月种植，状态为[seed]，有 874 次点击，面向创意程序员和前端开发者。
• 游戏有两种场景 UI，画布 UI 用于驾驶飞船，DOM 基于的 UI 用于每个位置。
• 通过状态机管理两个 UI 之间的切换，使用 XState 动作更新 DOM。
• 为管理复杂度将系统拆分为gameMachine和locationMachine。
• 画布 UI 用 three.js 渲染，需分离状态管理和 three.js 逻辑以实现序列化。
• 示例中飞船运动采用策略游戏方式，通过状态机控制。
  重要细节：
• 状态机的space状态代表驾驶飞船，location状态代表探索位置。
• 用invoke在进入或离开location状态时启动或停止locationMachine。
• 不能序列化的 three.js 对象如THREE.Vector3和THREE.Mesh会导致问题。
• 状态机可实现游戏进度保存加载和时间旅行等功能。
• 飞船移动通过点击位置自动移动，有idle和moving状态及相关按钮和函数控制。