Skip to content

FayLeeStudio/MinutePuzzle

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

MinutePuzzle ⏱️

一个 24 小时 GameJam 作品,主题 1min(一分钟)

每关都是一局「一分钟拼图」:中间是一张实时变化的画面,你要趁 60 秒倒计时归零前,把打散的碎片拖回正确位置、拼成完整画面。碎片是那张画面「对应区域、此刻」的取景框——画面一变,所有碎片同步变,所以只能靠空间位置 / 相对关系来拼,记不住。

关卡(线性闯关,5 关)

  1. 倒计时 —— 一块七段数码管显示屏,60 → 00 每秒一跳。
  2. 贪吃蛇 —— 自动对局的贪吃蛇(沿哈密顿回路行进,60 秒内逐渐吃满屏)。
  3. 影像一 —— 视频影像(VideoAsset1.mp4)。
  4. 影像二 —— 视频影像(VideoAsset0.mp4)。
  5. 摄像头 —— 实时摄像头画面,拼的就是「此刻的你」。

玩法

  • 中间是一个 4×3 = 12 格的拼合区,呈现当前关的实时画面。
  • 开局先看一眼完整画面,点「开始」后 12 块方形碎片瞬间打散到外围放置区。
  • 拖拽碎片到中间网格,松手会吸附到最近的格子。
  • 目标格已有碎片时,拖上去会交换位置(两块对调)。
  • 全部碎片归位即胜。

胜负

  • 归零(到 00)前把 12 块全部拼对 → 胜利,记录定格时的剩余秒数。
  • 倒计时越过 00 仍未拼完 → 判负
  • 结束 / 胜利后可一键重玩或进下一关。

操作

  • 鼠标 / 触屏拖拽即可(基于 pointer 事件,自动兼容)。
  • 浮层(准备 / 胜 / 负)点按钮推进。

运行

纯原生 vanilla JavaScript + Canvas 2D,零依赖、零构建,单文件 index.html

  • 倒计时 / 贪吃蛇关:双击 index.html 即可玩。
  • 视频关(影像一 / 二):浏览器禁止 file:// 加载本地视频,需通过本地服务器(如 python3 -m http.server)或线上托管打开。
  • 摄像头关:需安全环境httpslocalhost)+ 用户授权摄像头。
  • 综上,完整体验建议用本地服务器或线上(itch.io / 托管页面)打开。

技术说明

  • 单文件 index.html(HTML + CSS + JS 同文件)。多关卡用 LEVELS 配置数组 + 可选生命周期钩子驱动,引擎与单关内容解耦。
  • 倒计时用时间戳推算(performance.now()),不逐帧累加。
  • 每关把整张画面每帧画到离屏 canvas,碎片用 drawImage 取对应子矩形。
  • 视频关共用一套可复用渲染(cover 填满、进游戏即预加载、只播当前关那一路);摄像头仅在第 5 关捕捉,离开即关闭。

素材出处

  • 画面(数码管、贪吃蛇)由代码实时绘制,无外部素材。
  • 视频素材:VideoAsset0.mp4VideoAsset1.mp4 —— 出处 / 授权:(待补:请填写来源与许可,自有素材或 CC/CC0 等)
  • 摄像头为运行时实时画面,不含外部素材,仅在本地处理、不上传。

About

Complete the puzzle in one minute and read a short story

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages