带你玩转javascript贪吃蛇：从入门到精通

前端

2023-11-12 12:22:08

打造自己的贪吃蛇游戏：一步一步的 JavaScript 开发指南

前言

在电子游戏的历史中，贪吃蛇无疑是一款永恒的经典。它以其简单的规则和令人上瘾的玩法风靡全球，成为无数玩家的童年回忆。如果您对编程充满热情，那么本教程将引导您踏上用 JavaScript 创造自己贪吃蛇游戏的激动人心的旅程。

规则简介

贪吃蛇是一款单人游戏，玩家控制一条饥饿的蛇在网格状游戏区域内移动，吞噬食物块以增加长度。然而，蛇身不能自相交错，也不能触碰网格的边界。一旦发生这种情况，游戏便宣告结束。

开发环境

在开始之前，您需要准备一些必要的工具：

代码编辑器（如 Visual Studio Code 或 Sublime Text）
网络浏览器（如 Chrome 或 Firefox）
JavaScript 库（如 jQuery 或 Three.js）

游戏画布

贪吃蛇游戏的主体是游戏画布，它是一个 HTML 元素，用于显示游戏内容。使用 HTML 的<canvas>元素来创建它：

<canvas id="gameCanvas" width="400" height="300"></canvas>

创造你的贪吃蛇

蛇由一个头部和一个身体组成，我们可以用 JavaScript 的class来实现：

class Snake {
  constructor() {
    // 初始化蛇头位置
    this.head = {
      x: 100,
      y: 100
    };

    // 初始化蛇身（最初为空）
    this.body = [];
  }

  // 移动蛇
  move() {
    // 更新蛇头位置
    switch (this.direction) {
      case 'up':
        this.head.y -= 10;
        break;
      case 'down':
        this.head.y += 10;
        break;
      case 'left':
        this.head.x -= 10;
        break;
      case 'right':
        this.head.x += 10;
        break;
    }

    // 更新蛇身位置
    this.body.unshift(this.head);
    this.body.pop();
  }

  // 绘制蛇
  draw() {
    // 绘制蛇头
    context.fillStyle = 'green';
    context.fillRect(this.head.x, this.head.y, 10, 10);

    // 绘制蛇身
    context.fillStyle = 'black';
    for (let i = 0; i < this.body.length; i++) {
      context.fillRect(this.body[i].x, this.body[i].y, 10, 10);
    }
  }
}

生成食物块

食物块是蛇赖以生存的能量来源，我们可以使用 JavaScript 的class来创建：

class Food {
  constructor() {
    // 随机生成食物块坐标
    this.x = Math.floor(Math.random() * 40) * 10;
    this.y = Math.floor(Math.random() * 30) * 10;
  }

  // 绘制食物块
  draw() {
    context.fillStyle = 'red';
    context.fillRect(this.x, this.y, 10, 10);
  }
}

游戏循环

游戏循环是贪吃蛇游戏的核心，它不断更新游戏状态并重新绘制游戏画面。使用 JavaScript 的setInterval()函数创建它：

setInterval(function() {
  // 清除画布
  context.clearRect(0, 0, 400, 300);

  // 移动蛇
  snake.move();

  // 绘制蛇
  snake.draw();

  // 创建食物块
  food.draw();

  // 检测蛇是否吃到食物块
  if (snake.head.x === food.x && snake.head.y === food.y) {
    // 蛇吃到食物块，增加蛇身长度
    snake.body.unshift({
      x: food.x,
      y: food.y
    });

    // 创建新的食物块
    food = new Food();
  }

  // 检测蛇是否触碰自己或边界
  if (snake.head.x < 0 || snake.head.x > 390 || snake.head.y < 0 || snake.head.y > 290 || snake.body.some((segment) => {
    return segment.x === snake.head.x && segment.y === snake.head.y;
  })) {
    // 蛇触碰自己或边界，游戏结束
    alert('游戏结束！');
    clearInterval(gameLoop);
  }
}, 100);

启动游戏

现在，是时候让您的贪吃蛇游戏动起来了！将以下代码保存为 HTML 文件并用浏览器打开它：

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

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