【1024Builder作品秀】智勇闯关 · 1024 Builder Edition
话题：
#1024Builder作品秀#
一、作品介绍
《智勇闯关》是一款用纯原生 Canvas + JavaScript 手写的 2D 清版闯关动作游戏，无任何引擎、无第三方运行时依赖，打开网页即玩。
玩家操控一名蓝色小勇士，在像素风房间里击败全部敌人，出口大门会从红色锁定变为绿色开启，触碰即可进入下一关。三关难度递进，从教学关到混合了弓手、精英骑士与能量炮塔的终局战场。为了让作品契合 1024 程序员节，本次特别加入了 「1024 · BUILDER EDITION」 主题彩蛋。
二、玩法特色
-
能量枪：
K / 空格朝射程内最近敌人手动开火，方向在出手瞬间固定，考验走位与预判。 -
闪避：
J向前冲刺，附带无敌帧，是穿越弹幕、脱离包围的核心手段。 -
大招清屏：
L释放能量炸弹，清空全场敌方弹幕并重创所有敌人。 -
连击与积分：3 秒内连续击杀累积连击，倍率最高 ×2.5。
-
增益掉落：击败敌人概率掉落金币、血包与「连射 / 散射 / 穿透」武器增益。
-
跳跃与平台：长按高跳、轻点小跳，离开平台瞬间仍可起跳（土狼时间）。
-
进度存档：通关进度写入 localStorage，主菜单可直接「继续第 N 关」。
三、1024 彩蛋（本次作品秀重点）
作为 1024 程序员节的献礼，游戏里埋了两处彩蛋：
-
隐藏按键序列：闯关过程中依次按下
1、0、2、4，会触发「1024 BUILDER!」庆祝——青色冲击波粒子、全屏闪光、屏幕震动、专属音效，以及屏幕中央的「1024 / BUILDER EDITION」横幅。 -
得分里程碑：每关得分首次达到 1024 时同样自动触发庆祝，并在右上角点亮持久的青色「1024 ✓ BUILDER」标记。
彩蛋音效由 Web Audio API 实时合成：从 512 Hz 起跳、落在 1024 Hz，再向上拨两个八度，用频率本身致敬 1024。
四、截图
主菜单：1024 Builder Edition 霓虹徽章
实战画面：清版战斗与 HUD
彩蛋触发：1024 横幅 + 青色冲击波 + 浮动文字
触发后：右上角持久点亮「1024 ✓ BUILDER」标记
五、Demo 链接
-
在线试玩：Cloudflare Pages https://tryp.pages.dev/
-
本地运行：
# 项目根目录执行（无需安装依赖）
node _server.js 8090
# 浏览器打开 http://localhost:8090
也可直接用任意静态服务器托管项目根目录（index.html 为入口）。
六、TRAE 在创作中发挥的作用
这个项目从零到可玩，TRAE 全程参与：
-
需求拆解与架构设计：把「像素风清版闯关」拆成配置、输入、实体、武器、玩家、敌人、关卡、游戏控制 8 个模块，确定「先跑通一关，再迭代手感」的路线。
-
核心代码实现：主循环与状态机、平台碰撞与土狼时间、敌人 AI 与弹幕、连击积分、掉落系统、HUD 等均由 TRAE 按模块逐步落地。
-
调试与修复：定位并修复了闪避冲刺被逐帧输入覆盖失效、掉落物穿透地板导致金币不可拾取、前景遮罩世界坐标错位、小房间相机未居中、受击硬直缺失、大招结算期间能量自我回充等一批问题。
-
回归验证：启动本地静态服务器，用浏览器自动化实际走完「主菜单 → 选关 → 战斗 → 暂停/继续 → 通关」流程，检查 console 无报错，并核对黑幕、震屏、粒子上限、调试面板等细节。
-
主题彩蛋与展示：完成 1024 徽章、隐藏按键序列、得分里程碑、专属音效与庆祝特效，并整理截图与投稿文案。
七、操作说明
| 按键 | 功能 |
|---|---|
← → / A D |
左右移动 |
↑ / W / Shift |
跳跃（长按高跳） |
K / 空格 |
发射能量弹 |
J |
闪避（无敌帧） |
L |
大招（能量满时） |
Esc |
暂停 / 继续 |
1 0 2 4 |
1024 隐藏彩蛋 |
F2 / ` |
开发者调试面板 |
八、技术栈
-
HTML5 Canvas 2D
-
原生 JavaScript（无框架、无构建）
-
Web Audio API 实时合成音效
-
CSS 变量与动画
-
localStorage 进度存档
-
目标部署：Cloudflare Pages（纯静态站点）