Puzzle Master — JavaScript 游戏站模板

Puzzle Master 是一个浏览器端的 3x3 图片拼图游戏，核心玩法是让玩家上传任意本地图片，前端将图片切成九块并打乱，玩家通过拖拽还原，同时计时。项目分为两个可独立部署的部分：React 和 Vite 构建的前端负责图片上传、拼图交互与排行榜展示；Express 后端则专注于将玩家的完成时间写入 Cloud Firestore，并提供日榜、周榜和总榜的查询接口。这种前后端分离的结构让游戏逻辑完全在客户端运行，后端只做分数持久化，职责清晰。

项目适合作为益智类网页游戏的界面与交互参考，尤其是需要接入真实排行榜的场景。它支持桌面端拖拽和移动端触摸拖动，响应式体验考虑得比较周到。前端通过 Canvas 完成图片切片，后端 API 设计简洁，本地开发时前后端会自动指向 localhost:5050，部署到 Google Cloud Run 也有现成的脚本和配置文件。如果你正在寻找一个带真实在线演示、且后端已接通 Firestore 的拼图游戏模板，这个项目能省去不少从零搭建的工作。

需要注意的是，拼图网格目前固定为 3x3，没有难度选项，README 中也未提及多人实时对战或自定义关卡等功能。项目是在 2026 年的一个开发活动中用 Copilot CLI 现场构建的，虽然结构完整，但生产环境的健壮性（比如图片大小限制、并发写入、安全规则）还需要你根据实际需求自行核对和加固。部署前务必确认 Firestore 已正确配置，并检查 .env 中的项目 ID 等变量。