ES6+Canvas搭载盖楼小游戏快速制作指南（一）

前端

2024-01-30 08:19:49

引言

作为一个JavaScript爱好者，你有没有想过自己开发一款小游戏？盖楼小游戏是一款简单有趣的休闲游戏，非常适合新手入门。在这篇文章中，我将带你一步一步地创建这款游戏，从头到尾的代码都有详细注释。

准备工作

在开始之前，你需要准备以下工具：

一个文本编辑器（比如VSCode、Sublime Text）
一个现代浏览器（比如Chrome、Firefox）
一些基本的JavaScript知识

第一步：创建画布

首先，我们需要创建一个HTML文件，并在其中添加一个<canvas>元素。这个元素将作为我们的游戏画布。

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <canvas id="canvas" width="400" height="400"></canvas>

  <script src="script.js"></script>
</body>
</html>

第二步：获取画布上下文

接下来，我们需要获取画布的上下文，以便我们可以用它来绘制图形。

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

第三步：定义游戏变量

现在，我们需要定义一些游戏变量，比如玩家的分数、楼层高度等。

let score = 0;
let floorHeight = 10;

第四步：绘制游戏场景

接下来，我们需要绘制游戏场景，包括地面、天空、楼房等。

ctx.fillStyle = '#000';
ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = '#fff';
ctx.fillRect(0, canvas.height - floorHeight, canvas.width, floorHeight);

ctx.fillStyle = '#f00';
ctx.fillRect(100, canvas.height - floorHeight - 100, 100, 100);

第五步：编写游戏逻辑

最后，我们需要编写游戏逻辑，比如玩家控制、分数计算等。

document.addEventListener('keydown', function(e) {
  if (e.keyCode === 32) {
    // 按下空格键，玩家跳跃
    player.jump();
  }
});

function update() {
  // 更新游戏状态
  player.update();
  floor.update();

  // 检测碰撞
  if (player.y + player.height >= floor.y) {
    // 玩家碰到地面，游戏结束
    gameOver();
  }

  // 绘制游戏场景
  draw();
}

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

  // 绘制地面
  ctx.fillStyle = '#fff';
  ctx.fillRect(0, canvas.height - floorHeight, canvas.width, floorHeight);

  // 绘制楼房
  ctx.fillStyle = '#f00';
  ctx.fillRect(100, canvas.height - floorHeight - 100, 100, 100);

  // 绘制玩家
  ctx.fillStyle = '#00f';
  ctx.fillRect(player.x, player.y, player.width, player.height);
}

function gameOver() {
  // 游戏结束，显示分数
  ctx.fillStyle = '#000';
  ctx.font = 'bold 48px Arial';
  ctx.fillText(`游戏结束，你的分数是：${score}`, 100, 100);
}

// 启动游戏循环
setInterval(update, 1000 / 60);