像素游戏 · Pixel Ball

网页像素风游戏项目。当前完成 阶段 5：丧尸围城战（完整版）——丧尸会叠罗汉搭塔 仰攻、奇异丧尸高跳突袭、还会爬楼攻击幸存者；获救者能被看见地"住"在球里。

运行

无需任何依赖，直接双击打开 index.html 即可。

（也可以在本目录起一个本地服务器：python -m http.server 8637，然后访问 http://127.0.0.1:8637/）

玩法

• 移动鼠标：空心小球用弹性动画追随光标，速度越快沿运动方向拉伸越明显
• 滚轮（或 - / = 键）：调整小球体积（半径 4~20），体积越大移动越慢、 目标越大；体积越小越灵活、子弹射速也越快
• 子弹：自动瞄准最近的敌人持续射击（青色光点）
• 点击画面：向点击处弹射闪避，同时释放链式雷电——劈向最近的敌人并 跳跃至附近敌人，最多连 4 个（冷却 0.9 秒）
• 碰到小球即为进攻成功：丧尸扣 12 血、丧尸鸟 8 血、奇异丧尸 16 血， 受创后 0.9 秒无敌闪烁；血量归零 → GAME OVER，点击重新开始

敌人图鉴

敌人	行为	应对
丧尸（绿）	地面蹒跚逼近，越走越快	子弹 / 雷电
丧尸塔	球在高处时丧尸人踩人叠成金字塔（最多 4 层）够到半空	打掉下层会让上层滑落换位
丧尸鸟（紫）	空中振翅俯冲，带惯性转向	全程威胁
奇异丧尸（紫、角）	20 秒后出现；蹲伏 0.35 秒蓄力后高高跃起撞半空的球，落地 1.2 秒冷却	看到蹲伏前摇就躲

幸存者与职业

楼顶会出现挥手求救的幸存者（3 点生命，限时停留，快消失时会闪烁），共七种 一眼可辨的职业（楼顶为 2 倍大像素，球内也能看清）：

职业	外观	带来的增益
平民	深色头发、彩衣	+50 分
医生	白帽白褂红十字	救援回血 15（平民 8）
士兵	绿军装钢盔、肩扛步枪	每人射击间隔 -15%（最多 4 人）
工程师	黄色安全帽	每人雷电冷却 -25%（最多 3 人）
忍者	紫装红头带	每人点击弹射力度 +40%（最多 2 人）
炮手	红贝雷帽、肩扛迫击炮	每人子弹 +1 次穿透（最多 2 人）
科学家	护目镜白蓝褂	每人雷电链 +1 跳（最多 2 人，最长 6 跳）

出现权重：平民 30%，医生/士兵/工程师各 15%，忍者 10%，炮手/科学家各 7.5%。 HUD 下方一排小色块即当前编队的职业构成。丧尸也不会放过他们：

• 普通丧尸会改道扑向矮楼顶的幸存者——爬墙上去近身撕咬（0.8 秒一击）
• 奇异丧尸会瞄准任意屋顶的幸存者起跳，空中撞到造成伤害（每跳一次）
• 幸存者被攻击时闪白；血量归零就会被击杀

圆球接触幸存者后将其吸入球内。获救者会站在球的内壁底部，从外面能直接 看到职业；球的体积越大能携带的编队越多。救援要冒险飞高楼顶——丧尸在爬墙、 奇异丧尸在跳跃、天上还有鸟。

体积

体积范围扩大为半径 8~28（基准 14）。小球是刺客：飞快、目标小、射速快但装不下 几个人；大球是巴士：笨重但皮实、一次能救一整支编队，职业增益也滚雪球。

HUD

左上角依次是：速度条（体积越小越快）、血条、雷电就绪灯、rescued 救出人数、 职业编队徽章；顶部中央为得分。

画面

• 都市夜景背景：分段色带夜空、月亮、远景/近景两层楼群、随机亮窗、 楼顶天线红灯闪烁、路面路灯，全部程序化生成并预渲染到离屏画布
• 空心小球：只绘制环壁，内部透出背景；左上高光、底部带城市暖色反光
• 雷电为逐像素折线（白色电芯 + 青色辉光）；击杀 / 救援有漂浮得分文字
• 受创有屏幕震动，敌人死亡迸出对应颜色的残渣（绿色尸块 / 紫色魔法 / 羽毛）

轨迹技（光标画招）

用光标画出特定轨迹，球会就地发动对应技能（各自独立冷却）：

轨迹	技能	效果
画圆	新星冲击	以球为中心的大范围冲击波（伤害 5，冷却 3 秒）
直线冲刺	剑气斩	沿冲刺方向 120px 剑气，路径敌人全部受伤（冷却 2 秒）
垂直急坠	震地猛击	震荡地面，95px 内所有地面敌人受伤 6（冷却 3 秒）
左右抖动	环形弹幕	向四周发射 10 发子弹（冷却 2.5 秒）

识别基于光标路径的累计转角 / 位移比 / 折返次数，停顿 0.6 秒轨迹作废。

体积与重量

• 体积范围扩大为半径 8~28（基准 14）
• 每救一人球长大 1 号：能装的编队更多，但也更重、更慢——想变快可以用 滚轮缩小（编队和增益仍在，只是小人藏起来）
• 基础移速整体下调（极速 900→560），配合轨迹技的"画招"玩法节奏更沉稳

连击、掉落与 Boss

• 连击系统：2 秒内连续击杀累积连击，每 4 连击得分倍率 +1（最高 ×5）， 屏幕上方显示连击数和窗口倒计时条——贪图连击就要冒险贴近敌群
• 掉落道具：击杀有几率掉落（奇异丧尸必掉率更高）：❤ +20 血、⚡ 雷能清空 雷电冷却、★ +100 分，悬浮闪烁等待拾取
• Boss 畸变巨尸：2 分钟起每 150 秒从侧面登场，12 点血、撞球 25 伤害且本体 不死（会被击退），头顶血条；击杀 +200 分并必掉道具
• 事件横幅：60 秒鸟群来袭、180 秒尸群暴动、300 秒空中狩猎……节奏外松内紧

音频与系统

• 8-bit 合成音效（Web Audio，零素材）：射击、雷电、击杀、受创、救援、 拾取、连击音阶、Boss 登场、游戏结束，另有低音琶背景循环
• M 静音 / P 暂停；标题画面展示七职业小人；最高分本地存档， 破纪录时结算标"★ 新纪录"

打击感与视觉特效

• 薄环壁：球壁从半径的 30% 减到 18%，更轻盈，球内空间更大
• 命中即反馈：任何一次命中（不再只有击杀）都会沿受击方向迸出火花微粒 + 一圈闪光环；子弹打中也有 0.012 秒微顿帧，小球同时向外回弹一震
• 加色混合打击火花：命中火花与打击环走 lighter 混合，打在夜景上更"烫"， 一眼能分清"打中"（暖白小环）与"打死"（白内环 + 敌人配色外环二段扩散）
• 方向性火花：火花朝命中方向的反弹侧喷出（雷电沿雷链、剑气沿出剑方向、 震地猛击从地下顶起），不是无脑四周乱炸
• 击杀顿帧：每次击杀画面冻结 0.035 秒（雷电击杀 0.07 秒），受创也有顿帧
• 冲击波扩散环：击杀 / 救援时从目标点扩出白 / 金色圆环
• 枪口火花与后坐力：开火瞬间十字星闪光，球被轻微反推
• 受击反馈：红色屏幕边框闪烁 + 血条闪白 + 球壁泛红（无敌期间）+ 柔和光晕
• 雷电白屏：放电瞬间全屏微微泛白 + 震屏
• 高速排气：球高速飞行时尾部持续排出青色微粒
• 撞墙火星：高速撞边界会迸出火花并震屏
• 落地扬尘：奇异丧尸砸地时溅碎屑、扩紫环、震屏

实现要点

• 逻辑分辨率固定 480×270，按设备像素做整数倍缩放 + image-rendering: pixelated
• 小球逐像素程序化绘制：环壁内外半径判定 + 法线与光照方向的点积分档明暗
• 追随用弹簧模型（加速度正比距离 + 指数阻尼）；高速时沿速度方向挤压拉伸
• 丧尸塔用槽位系统实现（2 底 + 2 层），成员死亡后自动补位/解散
• 敌人 / 子弹 / 雷电均带简单的圆碰撞与对象标记清理，敌人上限 45

文件结构

文件	作用
index.html	页面入口
style.css	画布居中、像素化渲染、隐藏系统光标
game.js	全部游戏逻辑（背景生成 / 渲染 / 物理 / 战斗 / 输入）
test/fx-selfcheck.js	打击感 / 粒子特效自检（node test/fx-selfcheck.js，零依赖）

路线图

• 阶段 1：像素球跟随鼠标
• 阶段 2：都市夜景背景、空心球、体积影响速度
• 阶段 3：丧尸 / 丧尸鸟两路进攻，子弹 + 链式雷电反击，血量与重开
• 阶段 4：丧尸叠塔仰攻、奇异丧尸高跳、楼顶幸存者救援
• 阶段 5：球内可视化乘员、丧尸会爬楼/跳跃攻击幸存者
• 阶段 6：音效、道具与更多敌人种类