返回

HTML+原生JS构建Super Mario兄弟游戏

前端

前言

Super Mario兄弟是一款经典的横版卷轴游戏，由任天堂于1985年发行。游戏讲述了马里奥和路易吉兄弟拯救蘑菇王国的故事。玩家控制马里奥或路易吉，在游戏中收集金币、消灭敌人、 преодолеть препятствия. 游戏共有8个世界，每个世界有4个关卡。

游戏玩法

游戏玩法很简单。玩家控制马里奥或路易吉，在游戏中收集金币、消灭敌人、 преодолеть препятствия. 当最后一个金币被收集到了之后, 这一关就通过了。 玩家通过键盘上下左右来控制马里奥或路易吉的移动，空格键来跳跃。

游戏的关卡

游戏一共有5关, 每关都有不同的背景和敌人。第一关是草原关，敌人有蘑菇怪、食人花和飞天乌龟。第二关是沙漠关，敌人有仙人掌怪、蝎子和响尾蛇。第三关是森林关，敌人有树精、藤条怪和毒蘑菇。第四关是水下关，敌人有水母、海星和鲨鱼。第五关是城堡关，敌人有盔甲怪、火焰怪和巨龙。

游戏的基本机制

游戏的基本机制包括：

  • 碰撞检测 ：游戏需要检测玩家和敌人之间的碰撞。当玩家与敌人发生碰撞时，玩家会损失生命值。当玩家与金币发生碰撞时，玩家会获得分数。
  • 得分系统 ：游戏需要有一个得分系统来记录玩家的分数。玩家可以通过收集金币、消灭敌人来获得分数。
  • 游戏保存 ：游戏需要能够保存玩家的进度。这样，玩家就可以在下次玩游戏时继续从上次离开的地方开始玩。

游戏实现

游戏可以使用HTML和原生JS来实现。游戏的HTML代码如下：

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas id="game" width="800" height="600"></canvas>
<script src="script.js"></script>
</body>
</html>

游戏的JS代码如下：

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

const player = {
  x: 100,
  y: 100,
  width: 50,
  height: 50,
  color: 'red',
  speed: 5
};

const enemies = [];

const coins = [];

let score = 0;

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

  // 绘制玩家
  ctx.fillStyle = player.color;
  ctx.fillRect(player.x, player.y, player.width, player.height);

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

  // 绘制金币
  coins.forEach((coin) => {
    ctx.fillStyle = coin.color;
    ctx.fillRect(coin.x, coin.y, coin.width, coin.height);
  });

  // 检查玩家和敌人的碰撞
  enemies.forEach((enemy) => {
    if (player.x + player.width > enemy.x &&
        player.x < enemy.x + enemy.width &&
        player.y + player.height > enemy.y &&
        player.y < enemy.y + enemy.height) {
      // 玩家和敌人发生碰撞
      player.lives--;
    }
  });

  // 检查玩家和金币的碰撞
  coins.forEach((coin) => {
    if (player.x + player.width > coin.x &&
        player.x < coin.x + coin.width &&
        player.y + player.height > coin.y &&
        player.y < coin.y + coin.height) {
      // 玩家和金币发生碰撞
      score++;
      coin.x = Math.random() * canvas.width;
      coin.y = Math.random() * canvas.height;
    }
  });

  // 检查玩家是否死亡
  if (player.lives <= 0) {
    // 玩家死亡
    alert('游戏结束！');
    location.reload();
  }

  // 检查游戏是否结束
  if (coins.length === 0) {
    // 游戏结束
    alert('恭喜你，你赢了！');
    location.reload();
  }

  // 更新游戏状态
  player.x += player.speed;
  enemies.forEach((enemy) => {
    enemy.x += enemy.speed;
  });

  // 请求下一次动画帧
  requestAnimationFrame(gameLoop);
};

// 启动游戏循环
gameLoop();

结语

这是一款简单的Super Mario兄弟游戏，它使用HTML和原生JS实现。游戏具有基本的玩法和游戏机制，包括碰撞检测、得分系统和游戏保存。玩家可以通过键盘上下左右来控制马里奥或路易吉的移动，空格键来跳跃。当玩家收集到所有金币后，这一关就通过了。游戏共有5关, 每关都有不同的背景和敌人。