300 行代码重现经典贪吃蛇游戏

2023-12-06 06:36:12

探索贪吃蛇：一款经典游戏的 JavaScript 实现

简介

贪吃蛇，一款风靡全球的经典单人游戏，因其简单易上手的玩法和令人着迷的挑战性而备受喜爱。游戏中，玩家控制一条贪婪的蛇，不断前进并吞食食物来延长自己的身体。但要小心，蛇不能撞到墙壁或自己的身体，否则游戏就会宣告结束。

用 JavaScript 编写贪吃蛇

1. 游戏环境

首先，我们需要创建一个游戏环境。使用 HTML Canvas 可以轻松绘制游戏画面：

<canvas id="canvas" width="640" height="400"></canvas>

接着，用 JavaScript 操作 Canvas：

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

2. 贪吃蛇对象

接下来，创建一个贪吃蛇对象，包含身体、方向等属性：

class Snake {
  constructor() { ... }
  move() { ... }
  checkCollision() { ... }
  draw() { ... }
}

3. 食物对象

同样，创建一个食物对象，随机生成位置：

class Food {
  constructor() { ... }
  draw() { ... }
}

4. 游戏主循环

主循环不断更新游戏状态：

function gameLoop() { ... }

5. 键盘事件监听

添加键盘事件监听器，控制贪吃蛇移动：

document.addEventListener("keydown", (event) => { ... });

运行游戏

实例化贪吃蛇和食物对象，并启动主循环：

const snake = new Snake();
const food = new Food();

gameLoop();

深入浅出，玩转贪吃蛇

代码示例

// 贪吃蛇对象
class Snake {
  constructor() {
    this.body = [
      { x: 320, y: 200 },
      { x: 310, y: 200 },
      { x: 300, y: 200 },
      { x: 290, y: 200 },
      { x: 280, y: 200 },
    ];
    this.direction = "right";
  }

  move() { ... }
  checkCollision() { ... }
  draw() { ... }
}

// 食物对象
class Food {
  constructor() { ... }
  draw() { ... }
}

// 游戏主循环
function gameLoop() { ... }

// 键盘事件监听
document.addEventListener("keydown", (event) => { ... });