一个 24 小时 GameJam 作品,主题 1min(一分钟)。
每关都是一局「一分钟拼图」:中间是一张实时变化的画面,你要趁 60 秒倒计时归零前,把打散的碎片拖回正确位置、拼成完整画面。碎片是那张画面「对应区域、此刻」的取景框——画面一变,所有碎片同步变,所以只能靠空间位置 / 相对关系来拼,记不住。
- 倒计时 —— 一块七段数码管显示屏,60 → 00 每秒一跳。
- 贪吃蛇 —— 自动对局的贪吃蛇(沿哈密顿回路行进,60 秒内逐渐吃满屏)。
- 影像一 —— 视频影像(
VideoAsset1.mp4)。 - 影像二 —— 视频影像(
VideoAsset0.mp4)。 - 摄像头 —— 实时摄像头画面,拼的就是「此刻的你」。
- 中间是一个 4×3 = 12 格的拼合区,呈现当前关的实时画面。
- 开局先看一眼完整画面,点「开始」后 12 块方形碎片瞬间打散到外围放置区。
- 拖拽碎片到中间网格,松手会吸附到最近的格子。
- 目标格已有碎片时,拖上去会交换位置(两块对调)。
- 全部碎片归位即胜。
- 归零(到 00)前把 12 块全部拼对 → 胜利,记录定格时的剩余秒数。
- 倒计时越过 00 仍未拼完 → 判负。
- 结束 / 胜利后可一键重玩或进下一关。
- 鼠标 / 触屏拖拽即可(基于 pointer 事件,自动兼容)。
- 浮层(准备 / 胜 / 负)点按钮推进。
纯原生 vanilla JavaScript + Canvas 2D,零依赖、零构建,单文件 index.html。
- 倒计时 / 贪吃蛇关:双击
index.html即可玩。 - 视频关(影像一 / 二):浏览器禁止
file://加载本地视频,需通过本地服务器(如python3 -m http.server)或线上托管打开。 - 摄像头关:需安全环境(
https或localhost)+ 用户授权摄像头。 - 综上,完整体验建议用本地服务器或线上(itch.io / 托管页面)打开。
- 单文件
index.html(HTML + CSS + JS 同文件)。多关卡用LEVELS配置数组 + 可选生命周期钩子驱动,引擎与单关内容解耦。 - 倒计时用时间戳推算(
performance.now()),不逐帧累加。 - 每关把整张画面每帧画到离屏 canvas,碎片用
drawImage取对应子矩形。 - 视频关共用一套可复用渲染(cover 填满、进游戏即预加载、只播当前关那一路);摄像头仅在第 5 关捕捉,离开即关闭。
- 画面(数码管、贪吃蛇)由代码实时绘制,无外部素材。
- 视频素材:
VideoAsset0.mp4、VideoAsset1.mp4—— 出处 / 授权:(待补:请填写来源与许可,自有素材或 CC/CC0 等)。 - 摄像头为运行时实时画面,不含外部素材,仅在本地处理、不上传。