logo
0
0
Login
feat(game): 重构火柴人游戏为冒险跑酷类型并优化代码结构

小小火柴人格斗游戏

这是一个基于 HTML5 Canvas 开发的简单而有趣的火柴人格斗游戏。玩家可以控制一个蓝色火柴人与红色 AI 对手进行对战。

快速体验

  1. Fork 本仓库到自己的组织下
  2. 然后点击 云原生小桂子,启动 进入云原生开发
  3. PORTS 面板添加 80 端口,然后在浏览器中访问即可

二次创作

打开AI代码助手,切换到 Craft,给AI提要求即可。

游戏特点

  • 流畅的动画效果
  • 丰富的战斗机制
  • 华丽的打击特效
  • 智能的 AI 对手
  • 连击系统
  • 屏幕震动效果

操作说明

操作指南

基础操作

  • 移动: 左右方向键 - 控制角色移动方向
  • 跳跃: 上方向键 - 进行垂直跳跃
  • 攻击: 空格键 - 执行基础攻击
  • 左翻跟斗: Z 键 - 向左翻滚,提供无敌帧
  • 右翻跟斗: X 键 - 向右翻滚,提供无敌帧

进阶操作技巧

连击技巧
  • 快速连续按攻击键可触发连击
  • 连击间隔需控制在500ms内
  • 观察连击数提示,把握节奏
  • 利用翻跟斗重置位置继续连击
雷电系统(小桂子)
  • 通过连击积累雷电能量
  • 注意观察雷电光环的变化
  • 能量满时把握时机释放
  • 可以配合翻跟斗调整位置后释放
魂环系统(大家)
  • 利用魂环增益进行持续输出
  • 观察魂环波动选择进攻时机
  • 合理利用防御增益
  • 把握特殊效果的触发时机

战斗策略

小桂子打法
  • 利用高机动性保持距离
  • 寻找机会打出连击
  • 积累雷电能量到充能状态
  • 选择最佳时机释放雷电攻击
  • 使用翻跟斗躲避敌人攻击
大家打法
  • 利用魂环优势持续施压
  • 保持稳定输出节奏
  • 合理运用防御能力
  • 预判对手行动路线
  • 把握反击时机

角色特点

小桂子(蓝色)

  • 装备:昊天锤
  • 特点:灵活的近战攻击
  • 连击可积累能量

大家(红色)

  • 装备:三十米大刀
  • 特点:拥有五个魂环
    • 十年魂环(红色)
    • 百年魂环(橙色)
    • 千年魂环(黄色)
    • 万年魂环(紫色)
    • 十万年魂环(黑色)

战斗技巧

  • 快速连续攻击可以触发连击,造成更高伤害
  • 使用翻跟斗可以躲避攻击,翻跟斗过程中处于无敌状态
  • 合理利用跳跃和翻跟斗来靠近或远离敌人

游戏机制

基础机制

生命值系统

  • 小桂子: 150点生命值(强化后)
  • 大家: 100点生命值
  • 生命值显示方式:通过角色状态反映
  • 受伤时有明显的视觉反馈

伤害计算

  • 基础伤害

    • 小桂子:基础伤害 × 1.5(强化后)
    • 大家:标准基础伤害
  • 连击加成

    • 每次连击增加伤害
    • 连击数越高,加成越大
    • 连击重置会清空加成
  • 特殊状态加成

    • 小桂子雷电充能:双倍伤害
    • 大家魂环增益:持续性加成

防御机制

  • 无敌帧

    • 翻跟斗期间完全无敌
    • 受击后短暂无敌时间
    • 特殊技能施放时的保护
  • 击退系统

    • 受击时后退距离与伤害相关
    • 可以通过操作减少击退距离
    • 连续受击会叠加击退效果

AI系统

  • 智能判断

    • 自动识别玩家位置
    • 预判玩家攻击路线
    • 根据距离选择行动
  • 战斗策略

    • 近距离:积极攻击
    • 中距离:观察寻机
    • 远距离:主动接近
  • 防御行为

    • 自动闪避玩家攻击
    • 合理使用翻跟斗
    • 保持安全距离

高级战斗技巧

连招系统

  1. 基础连招

    • 普通攻击 → 跳跃 → 空中攻击
    • 翻跟斗 → 快速攻击 → 后撤
  2. 进阶连招

    • 跳跃 → 攻击 → 落地 → 翻跟斗 → 连击
    • 前冲 → 连击 → 翻跟斗 → 背后攻击
  3. 小桂子专属连招

    • 雷电充能 → 跳跃 → 空中连击
    • 翻跟斗 → 雷电爆发 → 追击
  4. 大家专属连招

    • 魂环增益 → 连续突进 → 范围攻击
    • 防御姿态 → 蓄力 → 爆发输出

场地运用

  • 角落战斗

    • 利用墙角限制对手移动
    • 创造连击机会
    • 注意保持逃生路线
  • 中场对战

    • 保持机动性
    • 控制战斗节奏
    • 利用空间拉扯

节奏控制

  • 进攻节奏

    • 短暂试探
    • 寻找破绽
    • 把握机会
    • 全力输出
    • 及时撤退
  • 防守节奏

    • 保持警惕
    • 观察对手
    • 预判攻击
    • 寻找反击
    • 建立优势

进阶策略

对战技巧

  1. 心理战

    • 通过假动作迷惑对手
    • 建立进攻节奏后突然改变
    • 利用对手习惯性反应
  2. 资源管理

    • 合理利用能量系统
    • 控制连击节奏
    • 把握释放时机
  3. 场景利用

    • 利用场地限制对手
    • 创造有利战斗环境
    • 控制战场主动权
  4. 节奏把控

    • 在适当时机切换攻守
    • 不要过分贪图连击
    • 保持冷静判断

进阶机制

角色专属系统

  • 雷电系统(小桂子专属)

    • 五环雷电光环系统
      • 闪电之力(青色):提供基础雷电增益
      • 雷霆之心(皇家蓝):增强连击效果
      • 风暴之眼(道奇蓝):提供额外的机动性
      • 天雷之怒(深天蓝):强化攻击威力
      • 雷神之翼(淡蓝):提供视觉特效
    • 雷电充能机制
      • 通过连击积累雷电能量
      • 每次连击增加20+连击数×5点能量
      • 能量达到100时自动进入充能状态
      • 充能状态下攻击造成双倍伤害
      • 释放充能时触发范围雷电特效
    • 强化属性
      • 基础伤害提升50%
      • 更快的移动速度
      • 更高的跳跃能力
      • 更多的生命值
  • 魂环系统(大家专属)

    • 五环魂环系统
      • 十年魂环(红色):提供基础增益
      • 百年魂环(橙色):增强攻击力
      • 千年魂环(黄色):提供额外防御
      • 万年魂环(紫色):增加特殊效果
      • 十万年魂环(黑色):终极增强
    • 魂环特性
      • 环绕角色自动旋转
      • 随时间产生波动效果
      • 提供持续性增益
      • 增强视觉表现

通用战斗机制

  • 连击系统

    • 快速连续攻击触发连击
    • 连击数增加伤害倍率
    • 连击积累专属能量
    • 连击重置时间:500ms
  • 闪避系统

    • 翻跟斗提供无敌帧
    • 可用于躲避攻击
    • 可进行空中机动
    • 左右方向均可翻滚
  • 击退系统

    • 受击时产生击退效果
    • 击退距离与伤害相关
    • 可通过操作快速恢复
    • 防止连续受击

视觉特效系统

  • 打击特效

    • 基础攻击特效
    • 连击提升特效
    • 充能释放特效
    • 受击反馈特效
  • 环境效果

    • 屏幕震动
    • 击中闪光
    • 能量波动
    • 残影效果

平衡设计

  • 角色差异化

    • 小桂子:高机动性、爆发伤害
    • 大家:稳定输出、持续增益
  • 能量管理

    • 合理使用连击
    • 把握释放时机
    • 注意能量积累
    • 预判对手行动

技术实现

核心技术

渲染系统

  • HTML5 Canvas
    • 高性能2D渲染
    • 流畅的动画效果
    • 实时特效处理
    • 优化的绘制流程

物理引擎

  • 移动系统

    • 速度和加速度计算
    • 摩擦力模拟
    • 碰撞检测
    • 平滑的移动曲线
  • 跳跃系统

    • 重力模拟
    • 跳跃力度控制
    • 空中状态管理
    • 落地缓冲处理

特效系统

  • 粒子系统

    • 动态粒子生成
    • 物理运动模拟
    • 生命周期管理
    • 颜色和透明度渐变
  • 视觉效果

    • 屏幕震动效果
    • 打击闪光
    • 残影处理
    • 能量光环

动画系统

  • 状态机

    • 角色状态管理
    • 动画过渡控制
    • 行为逻辑处理
    • 状态同步
  • 补间动画

    • 平滑的动作过渡
    • 动态姿态调整
    • 连击动作链接
    • 特效动画同步

代码架构

核心类

  • Game: 游戏主循环和状态管理
  • StickMan: 角色基类,包含通用功能
  • Effect: 特效系统
  • Particle: 粒子系统

设计模式

  • 状态模式:管理角色状态
  • 观察者模式:处理事件系统
  • 工厂模式:创建特效和粒子
  • 单例模式:管理游戏实例

优化策略

性能优化

  • Canvas绘制优化
  • 粒子池复用
  • 事件节流处理
  • 按需渲染

内存管理

  • 对象池设计
  • 及时清理无用对象
  • 避免内存泄漏
  • 资源预加载

常见问题

游戏问题

  1. Q: 为什么有时候攻击没有伤害?

    • A: 检查是否处于对手的无敌帧期间
    • A: 确认攻击距离是否在范围内
    • A: 验证是否正确触发了攻击判定
  2. Q: 如何快速提升战斗水平?

    • A: 熟练掌握基本操作
    • A: 练习连招和技能释放时机
    • A: 了解并运用高级战斗技巧
    • A: 多观察AI的行为模式
  3. Q: 雷电系统和魂环系统如何选择?

    • A: 根据个人喜好和战斗风格选择
    • A: 雷电系统适合爆发流打法
    • A: 魂环系统适合持续输出
    • A: 两种系统都需要熟练掌握才能发挥最大效果

技术问题

  1. Q: 游戏运行卡顿怎么办?

    • A: 检查浏览器是否最新版本
    • A: 关闭其他占用资源的程序
    • A: 确认显卡驱动是否更新
    • A: 尝试降低特效数量
  2. Q: 键位没反应怎么处理?

    • A: 确认键盘按键是否正常
    • A: 检查浏览器焦点是否在游戏窗口
    • A: 刷新页面重新加载游戏
    • A: 清除浏览器缓存后重试

贡献

欢迎提交 Issue 和 Pull Request 来帮助改进游戏!

备案信息

  • ICP备案号:皖ICP备2022000948号
  • 公安备案号:皖公网安备 34010402700000号

版权声明

Copyright © 2025 合肥市小桂子网络科技有限公司. All Rights Reserved.

关于我们

合肥市小桂子网络科技有限公司是一家专注于网络游戏开发的科技公司,致力于为用户提供优质的游戏体验。我们的团队具有丰富的游戏开发经验,不断创新,追求卓越。

About

No description, topics, or website provided.
Language
JavaScript67.1%
Markdown18.3%
CSS12.8%
HTML1.5%
Others0.3%