JavaScript面向对象实现贪吃蛇游戏

JavaScript面向对象实现贪吃蛇游戏的步骤如下：

1. 定义Snake类

Snake类表示贪吃蛇，包含以下属性：

• body：表示蛇身，由一个包含多个坐标的数组组成
• direction：表示蛇的方向，可以取值为"up"、"down"、"left"、"right"之一

Snake类包含以下方法：

• move()：根据方向移动蛇的位置，并更新蛇的身体
• changeDirection(newDirection)：改变蛇的方向
• grow()：在蛇的身体末尾增加一个新的坐标

示例代码如下：

class Snake {
  constructor() {
    this.body = [
      {x: 0, y: 0},
      {x: 1, y: 0},
      {x: 2, y: 0},
    ];
    this.direction = "right";
  }

  move() {
    const head = this.getBodyHead();
    const newHead = this.getNextHead();
    this.body.unshift(newHead);
    this.body.pop();
  }

  changeDirection(newDirection) {
    this.direction = newDirection;
  }

  grow() {
    const tail = this.getBodyTail();
    const newTail = this.getNewTail();
    this.body.push(newTail);
  }

  getBodyHead() {
    return this.body[0];
  }

  getBodyTail() {
    return this.body[this.body.length - 1];
  }

  getNextHead() {
    const currHead = this.getBodyHead();
    switch (this.direction) {
      case "up":
        return {x: currHead.x, y: currHead.y - 1};
      case "down":
        return {x: currHead.x, y: currHead.y + 1};
      case "left":
        return {x: currHead.x - 1, y: currHead.y};
      case "right":
        return {x: currHead.x + 1, y: currHead.y};
    }
  }

  getNewTail() {
    const currTail = this.getBodyTail();
    const prevTail = this.body[this.body.length - 2];
    const xDiff = currTail.x - prevTail.x;
    const yDiff = currTail.y - prevTail.y;
    return {x: currTail.x + xDiff, y: currTail.y + yDiff};
  }
}

1. 定义Game类

Game类表示贪吃蛇游戏本身，包含以下属性：

• snake：表示游戏中的贪吃蛇
• food：表示游戏中的食物，由一个坐标对象组成
• score：表示游戏得分

Game类包含以下方法：

• init()：初始化游戏，设置贪吃蛇、食物和得分
• start()：开始游戏，循环执行蛇的移动和更新，以及检查游戏是否结束
• updateScore()：更新得分
• checkGameOver()：检查游戏是否结束，如果结束，弹出得分窗口并结束游戏

示例代码如下：

class Game {
  constructor() {
    this.snake = new Snake();
    this.food = {x: 3, y: 3};
    this.score = 0;
  }

  init() {
    this.drawSnake();
    this.drawFood();
    this.updateScore();
  }

  start() {
    setInterval(() => {
      this.snake.move();
      this.drawSnake();
      if (this.checkEatFood()) {
        this.snake.grow();
        this.drawFood();
        this.updateScore();
      }
      if (this.checkGameOver()) {
        alert("Game Over! Your score is " + this.score);
        location.reload();
      }
    }, 200);
  }

  drawSnake() {
    const snakeBody = this.snake.body;
    for (let i = 0; i < snakeBody.length; i++) {
      const snakePart = snakeBody[i];
      this.drawCell(snakePart.x, snakePart.y, "black");
    }
  }

  drawFood() {
    const food = this.food;
    this.drawCell(food.x, food.y, "red");
  }

  drawCell(x, y, color) {
    const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");
    ctx.fillStyle = color;
    ctx.fillRect(x * 10, y * 10, 10, 10);
  }

  updateScore() {
    this.score += 10;
    const scoreElem = document.getElementById("score");
    scoreElem.innerText = "Score: " + this.score;
  }

  checkEatFood() {
    const snakeHead = this.snake.getBodyHead();
    const food = this.food;
    return snakeHead.x === food.x && snakeHead.y === food.y;
  }

  checkGameOver() {
    const snakeBody = this.snake.body;
    const snakeHead = this.snake.getBodyHead();
    // Check if snake hits the border
    if (snakeHead.x < 0 || snakeHead.y < 0 || 
        snakeHead.x >= 40 || snakeHead.y >= 40) {
      return true;
    }
    // Check if snake hits itself
    for (let i = 1; i < snakeBody.length; i++) {
      const snakePart = snakeBody[i];
      if (snakeHead.x === snakePart.x && snakeHead.y === snakePart.y) {
        return true;
      }
    }
    return false;
  }
}

示例1：控制贪吃蛇移动方向

在HTML中添加以下代码：

<button onclick="changeDirection('up')">Up</button>
<button onclick="changeDirection('down')">Down</button>
<button onclick="changeDirection('left')">Left</button>
<button onclick="changeDirection('right')">Right</button>

在JavaScript中添加以下代码：

function changeDirection(direction) {
  game.snake.changeDirection(direction);
}

这里我们给页面添加了四个按钮，用于控制蛇的移动方向。当用户点击一个按钮时，调用changeDirection函数改变贪吃蛇的方向。示例代码中调用了 game.snake.changeDirection 方法。

示例2：动态生成游戏区域

在HTML中添加以下代码：

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

在JavaScript中添加以下代码：

function createCanvas() {
  const canvas = document.getElementById("canvas");
  const ctx = canvas.getContext("2d");
  for (let i = 0; i < 40; i++) {
    for (let j = 0; j < 40; j++) {
      if ((i + j) % 2 === 0) {
        ctx.fillStyle = "#f0f0f0";
      } else {
        ctx.fillStyle = "#d0d0d0";
      }
      ctx.fillRect(i * 10, j * 10, 10, 10);
    }
  }
}

这里我们使用 JavaScript 动态生成了画布并对游戏区域进行了着色。创建之后我们可以在画布上绘制贪吃蛇和食物，从而实现一个完整的贪吃蛇游戏。