转转转的小游戏：用React开发格斗游戏（二）

前端

2024-02-19 10:09:34

格斗游戏的进化：在 React 中添加攻击、血量和招牌技能

我们热切期待的 React 格斗游戏之旅第二章激动人心！在第一部分中，我们建立了游戏的基础并让角色动了起来。现在，让我们将战斗提升到一个新的水平，为游戏添加攻击系统、血量系统和一个独特的“转转转”技能。

攻击系统

当拳头挥舞和脚尖飞扬时，攻击系统让战斗变得栩栩如生。为了实现这一点，我们需要确定攻击是否命中。每当一个角色发起攻击时，我们都会检查攻击范围和方向，然后确定敌人是否在打击范围内。如果敌人被击中，他们的血量将减少并陷入僵直状态，无法立即反击。

血量系统

一场激烈的战斗离不开血量系统。每个角色都拥有自己的生命值，当生命值降至零时，他们就会倒下。为了可视化这一点，我们添加了一个简单的进度条，它实时显示角色的健康状况。随着生命值的下降，进度条会缩短，时刻提醒玩家他们的处境。

“转转转”技能

现在，让我们为这款游戏增添一抹独特风采：一个名为“转转转”的招牌技能。当玩家发动此技能时，他们将在原地高速旋转，对周围的敌人造成毁灭性的伤害。这个技能不仅威力强大，而且视觉效果惊人，让玩家感受到游戏的快节奏和激动人心的战斗体验。

深入技术细节

攻击系统代码示例：

// 获取攻击范围和方向
const attackRange = 100;
const attackDirection = player.facingDirection;

// 判断敌人是否在攻击范围内
for (let i = 0; i < enemies.length; i++) {
  const enemy = enemies[i];
  if (isCollided(player, enemy, attackRange, attackDirection)) {
    // 敌人被击中，扣除血量并产生僵直效果
    enemy.health -= 10;
    enemy.isStiff = true;
  }
}

血量系统代码示例：

// 创建血量进度条
const healthBar = document.createElement("div");
healthBar.classList.add("health-bar");
healthBar.style.width = `${player.health}%`;

// 将血量进度条添加到 DOM 中
const playerContainer = document.getElementById("player-container");
playerContainer.appendChild(healthBar);

“转转转”技能代码示例：

// 定义“转转转”技能
const spinAttack = {
  name: "Spin Attack",
  damage: 20,
  cooldown: 1000,
  isAvailable: true,
};

// 处理“转转转”技能的使用
const handleSpinAttack = () => {
  if (spinAttack.isAvailable) {
    // 播放“转转转”技能的动画
    player.playAnimation("spin-attack");

    // 对周围的敌人造成伤害
    for (let i = 0; i < enemies.length; i++) {
      const enemy = enemies[i];
      if (isCollided(player, enemy, spinAttack.range)) {
        enemy.health -= spinAttack.damage;
      }
    }

    // 技能冷却
    spinAttack.isAvailable = false;
    setTimeout(() => {
      spinAttack.isAvailable = true;
    }, spinAttack.cooldown);
  }
};