原生 JavaScript 横版 2D 超级马里奥

用原生 JavaScript 构建经典的横版 2D 超级马里奥

在现代 JavaScript 框架和库盛行的时代，回归基础，用原生 JavaScript 构建复古游戏是一种令人耳目一新的体验。经典的横版 2D 超级马里奥游戏是重温童年回忆和磨练编程技能的完美项目。

设置画布

构建马里奥游戏的第一步是创建一个画布元素和关联的上下文。画布是游戏场景的容器，而上下文允许我们绘制图形和文本。

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

// 设置画布尺寸
canvas.width = 800;
canvas.height = 600;

定义角色和变量

接下来，我们需要定义马里奥、敌人和其他游戏对象，以及用于跟踪游戏状态的变量。

// 马里奥对象
const mario = {
  x: 50,
  y: 400,
  width: 40,
  height: 60,
  speed: 5,
};

// 敌人对象
const enemies = [
  {
    x: 100,
    y: 400,
    width: 40,
    height: 60,
    speed: 3,
  },
];

// 游戏状态变量
let gameOver = false;
let score = 0;

游戏循环

游戏循环是游戏的核心，负责更新游戏状态和绘制场景。它是一个无限循环，持续调用自身，让游戏保持运行。

function gameLoop() {
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 更新马里奥的位置
  mario.x += mario.speed;

  // 更新敌人位置
  enemies.forEach((enemy) => {
    enemy.x -= enemy.speed;
  });

  // 检测碰撞
  enemies.forEach((enemy) => {
    if (mario.x + mario.width > enemy.x &&
        mario.x < enemy.x + enemy.width &&
        mario.y + mario.height > enemy.y &&
        mario.y < enemy.y + enemy.height) {
      gameOver = true;
    }
  });

  // 绘制马里奥
  ctx.fillRect(mario.x, mario.y, mario.width, mario.height);

  // 绘制敌人
  enemies.forEach((enemy) => {
    ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
  });

  // 如果游戏结束，显示 game over 消息
  if (gameOver) {
    ctx.fillText('Game Over', canvas.width / 2, canvas.height / 2);
  }

  // 递归调用 gameLoop 以继续游戏
  requestAnimationFrame(gameLoop);
}

控制

最后，我们需要添加对玩家输入的控制。我们将使用键盘事件监听器来响应玩家的按键。

// 键盘事件监听器
document.addEventListener('keydown', (event) => {
  switch (event.key) {
    case 'ArrowLeft':
      mario.speed = -5;
      break;
    case 'ArrowRight':
      mario.speed = 5;
      break;
    case 'ArrowUp':
      // 跳跃逻辑
      break;
  }
});

结论

通过遵循这些步骤，您已经成功地用原生 JavaScript 构建了一个经典的横版 2D 超级马里奥游戏。虽然这个实现是一个简化的版本，但它提供了一个基础，您可以根据自己的需求进行扩展和增强。

常见问题解答

• Q：游戏中的碰撞检测是如何工作的？
  • A： 碰撞检测是通过检查马里奥和每个敌人的边界来实现的。如果马里奥与任何敌人的边界重叠，则游戏结束。
• Q：如何控制马里奥？
  • A： 可以使用箭头键控制马里奥的左右移动。向左移动时，马里奥的速度为负值；向右移动时，速度为正值。
• Q：如何让敌人移动？
  • A： 敌人是通过在游戏循环中更新其位置来移动的。每次循环，敌人的位置都根据其速度减少。
• Q：如何扩展这个游戏？
  • A： 您可以通过添加更多敌人、关卡、障碍物和物品来扩展这个游戏。您还可以添加声音效果和音乐。
• Q：有没有其他资源可以帮助我了解如何用 JavaScript 构建游戏？
  • A： 网上有很多资源可以帮助您了解用 JavaScript 构建游戏，例如 MDN Web Docs 和 JavaScript 游戏开发社区。