Javascript：重现童年经典 - 超级玛丽

引言：

《超级玛丽》——一个响彻几代人的游戏名，勾起无数人的童年回忆。随着科技的进步，我们早已告别小霸王，步入了智能手机时代。但那份对马里奥冒险的渴望从未消逝。今天，让我们使用Javascript，重拾昔日经典，在代码的世界里重温《超级玛丽》的魅力。

构造游戏世界：

首先，我们使用Canvas元素来构建游戏世界。Canvas是一个HTML5元素，允许我们在浏览器中绘制图形。通过设置宽高和背景色，我们可以定义游戏的边界和背景。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 800;
canvas.height = 600;
ctx.fillStyle = '#87ceeb';
ctx.fillRect(0, 0, canvas.width, canvas.height);

创建角色：

接下来，我们需要创建游戏中的角色——马里奥。我们可以使用矩形来表示马里奥的身体，圆形来表示头部。通过设置颜色和位置，我们可以赋予马里奥生动的外观。

const mario = {
  x: 50,
  y: 50,
  width: 30,
  height: 40,
  color: '#ff0000',
};

搭建游戏场景：

游戏场景包括地板、管道、砖块等元素。我们可以使用不同的矩形和线条来绘制这些元素，营造出游戏环境。

const floor = {
  x: 0,
  y: canvas.height - 40,
  width: canvas.width,
  height: 40,
  color: '#87ceeb',
};

const pipes = [{
  x: 100,
  y: canvas.height - 120,
  width: 50,
  height: 100,
  color: '#000000',
}, {
  x: 400,
  y: canvas.height - 160,
  width: 50,
  height: 140,
  color: '#000000',
}];

实现马里奥控制：

通过键盘事件监听器，我们可以控制马里奥的移动和跳跃。按下的键决定马里奥的动作，例如左、右移动或跳跃。

document.addEventListener('keydown', (e) => {
  switch (e.key) {
    case 'ArrowLeft':
      mario.x -= 10;
      break;
    case 'ArrowRight':
      mario.x += 10;
      break;
    case 'ArrowUp':
      mario.y -= 20;
      break;
  }
});

游戏循环：

为了让游戏保持持续运行，我们需要创建一个游戏循环。在循环中，我们会不断更新游戏状态，绘制场景和角色，并处理用户的输入。

function gameLoop() {
  requestAnimationFrame(gameLoop);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = floor.color;
  ctx.fillRect(floor.x, floor.y, floor.width, floor.height);
  pipes.forEach(pipe => {
    ctx.fillStyle = pipe.color;
    ctx.fillRect(pipe.x, pipe.y, pipe.width, pipe.height);
  });
  ctx.fillStyle = mario.color;
  ctx.fillRect(mario.x, mario.y, mario.width, mario.height);
}

就这样，我们使用Javascript重现了经典游戏《超级玛丽》。尽管游戏的功能和画面还比较简陋，但它保留了原版的核心元素，让我们重温儿时的欢乐。让我们继续探索Javascript的无限可能，创造更多令人难忘的游戏体验吧！