CANVAS ARCADE / BUILT FROM THE RULES

像素双游
经典玩法,用自己的代码重做一遍。

让机器小人越过平台,也让飞羽目标成为一次反应挑战。用 Canvas 2D 从角色运动、碰撞判定和滚动相机写起,再把计时、命中反馈、键盘与触屏连接成两种完整玩法。

Canvas 2D碰撞与滚动相机计时与命中判定键盘 / 触屏

玩法复刻版 · 原创代码与程序绘制 · 浏览器本地运行 · 支持全屏

像素双游实际运行画面:程序绘制的机器小人、横向平台与飞羽打靶场景
游戏实际运行画面。本页只展示静态封面,进入游戏后才加载游戏内容。
TWO MODES / 选择你的挑战

一边掌握起跳,
一边练习准头。

进入游戏后选择“像素闯关”或“飞羽打靶”,再点击开始。手机可使用屏幕按钮与直接点按;横屏能获得更大的场景和操作区域。

点击顶部全屏按钮放大游戏。需要确认操作时,可以随时展开中文说明。

  1. 01 / 像素闯关← → 或 A D 移动,空格 / W / ↑ 跳跃,Shift 加速。收集晶体,踩过巡逻机器人,抵达终点信标。
  2. 02 / 飞羽打靶鼠标或手指点中飞鸟,R 或装填按钮补弹。每轮 45 秒、每次 6 发,连续命中可获得连击加分。
  3. 暂停与重新挑战P / Esc 或暂停按钮暂停,重新开始按钮可再次挑战。手机闯关使用左右与跳跃按钮;打靶直接点中目标。
CONTROLS / 一眼找到操作

按键清楚,反馈直接。

游戏内同样显示操作提示。

01 / PLATFORM

← → / A D 移动

空格 / W / ↑ 跳跃,Shift 加速。晶体加 100 分,踩中巡逻机器人加 200 分。带着剩余护盾抵达信标,还能获得通关奖励。

02 / TARGET

点击飞鸟 · R 装填

每轮 45 秒、弹匣 6 发;打空后自动装填。普通飞鸟 100 分,金色目标 200 分,连续命中额外加分。结算查看命中率与本地最佳成绩。

INSIDE THE CODE / 从规则到实现

两种玩法,共用清晰的游戏状态。

角色、场景与交互由本站代码实现。

01 / CANVAS & CAMERA

用代码画角色,也让镜头跟上

Canvas 2D 绘制机器小人、平台与环境。角色在世界坐标中移动,相机将位置映射到屏幕,形成连续的横向闯关场景。

02 / MOVEMENT & COLLISION

从跳跃到落地,处理碰撞状态

使用固定时间步长与 AABB 单轴碰撞处理移动、重力和落地。跳跃缓冲与离地宽容让略早的按键、刚离开边缘的起跳仍有合理响应,相机随角色前进。

03 / HIT TEST & TIMER

让每次点按都有明确判定

点击位置转换为画布坐标后,根据目标半径判定命中。45 秒回合每 15 秒提高目标密度与速度;弹匣、装填、连击与结算共同构成完整的打靶状态。

04 / INPUT & LIFECYCLE

把电脑和手机接入同一套规则

键盘、触屏按钮与直接点按连接同一套游戏规则。像素比上限为 1.5;仅在运行时持续绘制,窗口失去焦点时暂停,减少空闲绘制。

REFERENCE & OWN IMPLEMENTATION

玩法参考与原创实现

玩法参考参考用户提供的 Mario / Duck Hunt 页面 ↗所展示的横向闯关与点击打靶机制,重新设计本站机器小人和飞羽场景。

本站实现以原创 Canvas 2D 代码实现角色、场景、碰撞、相机、打靶和界面。图形由程序绘制,不使用 NES 模拟器、商业卡带或任天堂角色素材。

运行范围当前包含一段完整平台关卡与 45 秒打靶挑战,在浏览器本地运行,键盘与触屏均可体验。查看作品来源与实现说明 →;其他业务项目的实际职责见能力速览。

开始游玩 ↗← 返回全部作品演示