重温经典：HTML5打造超好玩贪吃蛇小游戏

2023-05-07 20:35:08

重拾经典：打造你的专属贪吃蛇游戏

回想一下那些曾经沉迷于贪吃蛇游戏的时光，它的简洁而引人入胜的本质让你流连忘返。现在，借助现代技术，你可以重拾这份乐趣，并亲手打造属于你自己的贪吃蛇游戏。跟随本指南，让我们一步步踏上创造之旅。

1. 奠定基础：创建画布

首先，你需要一个画布来呈现你的游戏。在 HTML 文件中，添加一个 <canvas> 元素，设置其宽度和高度，例如 <canvas id="canvas" width="500" height="500"></canvas>。

2. 点缀外衣：添加样式

为你的画布添加一些样式，使其看起来更美观。在 CSS 文件中添加以下代码：

canvas {
  border: 1px solid black;
}

3. 塑造核心：定义贪吃蛇

现在，是时候定义你的贪吃蛇了。在 JavaScript 文件中，创建一个名为 Snake 的类，并定义它的属性和方法：

class Snake {
  constructor() {
    this.body = [
      { x: 10, y: 10 },
      { x: 9, y: 10 },
      { x: 8, y: 10 },
    ];
    this.direction = 'right';
  }

  move() {
    // 更新头部位置
    const head = this.body[0];
    switch (this.direction) {
      case 'right':
        head.x++;
        break;
      case 'left':
        head.x--;
        break;
      case 'up':
        head.y--;
        break;
      case 'down':
        head.y++;
        break;
    }

    // 删除尾部
    this.body.pop();

    // 添加头部
    this.body.unshift(head);
  }

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

    ctx.fillStyle = 'green';
    for (const part of this.body) {
      ctx.fillRect(part.x * 10, part.y * 10, 10, 10);
    }
  }
}

4. 设置目标：添加食物

让你的贪吃蛇有目标可追。创建一个名为 Food 的类，并定义其属性和方法：

class Food {
  constructor() {
    this.x = Math.floor(Math.random() * 50);
    this.y = Math.floor(Math.random() * 50);
  }

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

    ctx.fillStyle = 'red';
    ctx.fillRect(this.x * 10, this.y * 10, 10, 10);
  }
}

5. 注入生命：添加游戏逻辑

现在，让你的游戏动起来。创建一个名为 Game 的类，并定义其属性和方法：

class Game {
  constructor() {
    this.snake = new Snake();
    this.food = new Food();
    this.interval = null;
  }

  start() {
    this.interval = setInterval(() => {
      this.update();
      this.draw();
    }, 100);
  }

  update() {
    this.snake.move();

    // 检查是否吃到食物
    if (this.snake.body[0].x === this.food.x && this.snake.body[0].y === this.food.y) {
      this.food = new Food();
      this.snake.body.unshift({
        x: this.snake.body[0].x,
        y: this.snake.body[0].y,
      });
    }

    // 检查是否撞到墙壁或自身
    if (this.snake.body[0].x < 0 || this.snake.body[0].x > 49 ||
      this.snake.body[0].y < 0 || this.snake.body[0].y > 49 ||
      this.snake.body.some((part, index) => index > 0 && part.x === this.snake.body[0].x && part.y === this.snake.body[0].y)) {
      clearInterval(this.interval);
      alert('游戏结束！');
    }
  }

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

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

    this.snake.draw();
    this.food.draw();
  }
}

6. 赋予控制权：添加键盘事件监听器

为了让玩家操控贪吃蛇，添加以下键盘事件监听器：

document.addEventListener('keydown', (e) => {
  switch (e.keyCode) {
    case 37: // 左箭头
      game.snake.direction = 'left';
      break;
    case 38: // 上箭头
      game.snake.direction = 'up';
      break;
    case 39: // 右箭头
      game.snake.direction = 'right';
      break;
    case 40: // 下箭头
      game.snake.direction = 'down';
      break;
  }
});