使用 Canvas 创作游戏

Canvas 是前端开发中常用的绘图工具，可以实现各种图形、交互效果和游戏。在本文中，我们将介绍如何使用 Canvas 创建一个简单的游戏，并展示如何丰富游戏内容。

准备工作

在开始之前，我们需要准备以下环境：

一个文本编辑器，如 Visual Studio Code
基本的 HTML、CSS 和 JavaScript 知识
Web 浏览器（推荐使用最新版 Chrome 或 Firefox）

绘制游戏场景

首先，我们需要在 HTML 中创建一个包含 Canvas 元素的容器，并设置相应的样式：

<!DOCTYPE html>
<html>
<head>
  <title>Canvas 游戏</title>
  <style>
    #game-container {
      width: 500px;
      height: 500px;
      background-color: #f0f0f0;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <div id="game-container"></div>
</body>
</html>

接下来，我们将在 JavaScript 中获取 Canvas 和上下文对象，并设置 Canvas 的宽度和高度：

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

const gameContainer = document.getElementById('game-container');
gameContainer.appendChild(canvas);

现在，我们已经准备好了一个空的游戏场景。

绘制游戏角色

我们将创建一个简单的游戏，其中一个方块作为玩家角色，一个圆形作为敌人角色。

首先，我们需要创建一个 Player 类和一个 Enemy 类，分别表示玩家和敌人：

class Player {
  constructor() {
    this.x = 250;
    this.y = 250;
    this.width = 50;
    this.height = 50;
    this.color = 'green';
  }
  
  draw() {
    ctx.fillStyle = this.color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }
}

class Enemy {
  constructor() {
    this.x = Math.random() * 450;
    this.y = Math.random() * 450;
    this.radius = 25;
    this.color = 'red';
  }
  
  draw() {
    ctx.fillStyle = this.color;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
    ctx.fill();
  }
}

接下来，我们需要在游戏循环中不断地绘制这两个角色。我们可以使用 requestAnimationFrame 函数来实现游戏循环：

let player = new Player();
let enemies = [];

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  player.draw();

  for (let enemy of enemies) {
    enemy.draw();
  }

  requestAnimationFrame(draw);
}

requestAnimationFrame(draw);

添加交互性

我们可以使用键盘事件来让玩家角色响应用户的操作。在刚才创建 Player 类的时候，我们已经设置了玩家的初始位置，现在在 Player 类中添加键盘事件的监听器：

class Player {
  // ...
  
  update() {
    document.addEventListener('keydown', (event) => {
      switch (event.code) {
        case 'ArrowUp':
          this.y -= 10;
          break;
        case 'ArrowDown':
          this.y += 10;
          break;
        case 'ArrowLeft':
          this.x -= 10;
          break;
        case 'ArrowRight':
          this.x += 10;
          break;
      }
    });
  }
}

let player = new Player();
player.update();

添加碰撞检测

我们可以使用简单的数学计算来检测玩家和敌人是否发生碰撞。以下是一个检测圆形和矩形碰撞的函数：

function checkCollision(circle, rect) {
  let circleDistanceX = Math.abs(circle.x - rect.x - rect.width / 2);
  let circleDistanceY = Math.abs(circle.y - rect.y - rect.height / 2);

  if (circleDistanceX > (rect.width / 2 + circle.radius)) {
    return false;
  }
  if (circleDistanceY > (rect.height / 2 + circle.radius)) {
    return false;
  }

  if (circleDistanceX <= (rect.width / 2)) {
    return true;
  }
  if (circleDistanceY <= (rect.height / 2)) {
    return true;
  }

  let cornerDistance_sq = Math.pow(circleDistanceX - rect.width / 2, 2) + Math.pow(circleDistanceY - rect.height / 2, 2);

  return (cornerDistance_sq <= Math.pow(circle.radius, 2));
}

我们需要在游戏循环中不断检测碰撞，并根据结果执行相应的操作：

// ...
function draw() {
  // ...

  // 检测碰撞
  for (let enemy of enemies) {
    if (checkCollision(enemy, player)) {
      console.log('碰撞!');
      // 执行相应的操作，如游戏结束等
    }
  }
  
  // ...
}

总结

通过上述步骤，我们已经创建了一个简单的基于 Canvas 的游戏。当然，这只是一个基础的原型，我们可以根据需求不断扩展游戏的功能和内容，比如绘制更多的敌人，添加背景音乐和音效，增加关卡和得分系统等等。使用 Canvas 创作游戏是一个有趣而又具有挑战性的前端开发任务，希望本文能给你一些启发和帮助。

本文来自极简博客，作者：落日余晖，转载请注明原文链接：使用 Canvas 创作游戏