TypeScript贪吃蛇项目完满收官：带你一步步解锁贪吃蛇的秘密

2024-02-01 01:30:13

前言

在上一篇文章中，我们已经完成了TypeScript贪吃蛇项目的初始化工作，包括创建游戏画布、绘制蛇头和食物、以及控制蛇头的移动。在本文中，我们将继续完善这个项目，添加更多有趣的功能，并最终提供完整的源码下载。

蛇的移动

首先，我们需要让蛇能够移动起来。为此，我们需要使用键盘事件监听器来检测玩家的输入。当玩家按下方向键时，我们需要更新蛇头的方向。

document.addEventListener("keydown", (event) => {
  switch (event.key) {
    case "ArrowUp":
      snake.direction = Direction.Up;
      break;
    case "ArrowDown":
      snake.direction = Direction.Down;
      break;
    case "ArrowLeft":
      snake.direction = Direction.Left;
      break;
    case "ArrowRight":
      snake.direction = Direction.Right;
      break;
  }
});

蛇撞墙检测

接下来，我们需要检测蛇是否撞到了墙上。如果蛇撞到了墙上，我们就需要结束游戏。

function checkSnakeCollisionWithWall() {
  const head = snake.body[0];
  if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height) {
    gameOver = true;
  }
}

蛇吃食物检测

当蛇吃到食物时，我们需要增加蛇的身体长度，并重新生成一个食物。

function checkSnakeCollisionWithFood() {
  const head = snake.body[0];
  if (head.x === food.x && head.y === food.y) {
    snake.body.push({ x: food.x, y: food.y });
    generateFood();
  }
}

蛇的身体移动

每当蛇移动时，我们需要更新蛇身体的位置。我们需要从蛇尾开始，将每个身体部分的位置更新为前一个身体部分的位置。

function moveSnake() {
  for (let i = snake.body.length - 1; i > 0; i--) {
    snake.body[i].x = snake.body[i - 1].x;
    snake.body[i].y = snake.body[i - 1].y;
  }

  const head = snake.body[0];
  switch (snake.direction) {
    case Direction.Up:
      head.y -= snake.speed;
      break;
    case Direction.Down:
      head.y += snake.speed;
      break;
    case Direction.Left:
      head.x -= snake.speed;
      break;
    case Direction.Right:
      head.x += snake.speed;
      break;
  }
}

禁止蛇调头

为了增加游戏的难度，我们需要禁止蛇调头。这意味着蛇不能向与当前方向相反的方向移动。

function checkSnakeCollisionWithItself() {
  const head = snake.body[0];
  for (let i = 1; i < snake.body.length; i++) {
    if (head.x === snake.body[i].x && head.y === snake.body[i].y) {
      gameOver = true;
    }
  }
}

禁止蛇穿过自己身体

最后，我们需要禁止蛇穿过自己身体。这意味着蛇的身体不能与自己其他身体部分重叠。

function checkSnakeCollisionWithItself() {
  const head = snake.body[0];
  for (let i = 1; i < snake.body.length; i++) {
    if (head.x === snake.body[i].x && head.y === snake.body[i].y) {
      gameOver = true;
    }
  }

  for (let i = 1; i < snake.body.length - 1; i++) {
    for (let j = i + 1; j < snake.body.length; j++) {
      if (snake.body[i].x === snake.body[j].x && snake.body[i].y === snake.body[j].y) {
        gameOver = true;
      }
    }
  }
}