JavaScript TypeScript实现贪吃蛇游戏完整详细流程

2023年5月27日上午3:26 • JavaScript

JavaScript TypeScript实现贪吃蛇游戏完整详细流程

1. 前置技能

开发这个项目需要对以下技术点有所了解：

HTML 和 CSS 基础知识
JavaScript 的语法和基本的编程能力
TypeScript 的基本语法和类型声明
Canvas 知识

2. 项目总体思路

本项目的核心代码部分是实现贪吃蛇在 Canvas 画布上的移动和碰撞检测（吃到食物）。基本思路如下：

初始化游戏参数，包括贪吃蛇的初始位置、食物的随机位置、蛇的初始速度等，同时初始化游戏画布（Canvas）。
监听用户按键方向，控制贪吃蛇的移动方向和速度。
实现蛇和食物的碰撞检测，当蛇头和食物碰撞时，分数加一，重新生成食物，并在蛇尾增加一个新的元素。
实现蛇头和边界的碰撞检测，当蛇头碰到边界时，游戏结束。
循环刷新游戏画面，并不断更新蛇的位置和状态。

3. 实现步骤

第一步：HTML 结构和样式

在 HTML 中插入一个 Canvas 元素，并设置画布的宽度和高度，然后利用 CSS 消除画布默认的内外边距和边框，使其填充整个容器。

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

<style>
  canvas {
    display: block;
    margin: 0 auto;
    padding: 0;
    border: none;
    background-color: #ccc;
  }
</style>

第二步：初始化游戏

在 TypeScript 中定义游戏的参数和状态：

interface Position {
  x: number;
  y: number;
}

interface Food {
  position: Position;
}

interface Snake {
  position: Position[];
  direction: string;
}

interface Game {
  score: number;
  snake: Snake;
  food: Food;
  canvas: HTMLCanvasElement;
  ctx: CanvasRenderingContext2D;
  speed: number;
}

初始化地图，食物，蛇等：

function initGame(canvas: HTMLCanvasElement): Game {
  const ctx = canvas.getContext("2d");

  const food: Food = {
    position: {
      x: Math.floor(Math.random() * (canvas.width / 10)) * 10,
      y: Math.floor(Math.random() * (canvas.height / 10)) * 10,
    },
  };

  const snake: Snake = {
    position: [
      { x: 30, y: 20 },
      { x: 20, y: 20 },
      { x: 10, y: 20 },
    ],
    direction: "right",
  };

  const game: Game = {
    score: 0,
    snake,
    food,
    canvas,
    ctx,
    speed: 100,
  };

  return game;
}

第三步：贪吃蛇的移动

贪吃蛇的移动和方向控制是游戏最核心的功能。在 TypeScript 中绑定按键方向控制事件：

function bindKeyDownEvent(game: Game) {
  document.addEventListener("keydown", (event) => {
    const { snake } = game;

    if (event.keyCode === 37) {
      snake.direction = "left";
    } else if (event.keyCode === 38) {
      snake.direction = "up";
    } else if (event.keyCode === 39) {
      snake.direction = "right";
    } else if (event.keyCode === 40) {
      snake.direction = "down";
    }
  });
}

在 TypeScript 中实现蛇的移动：

function moveSnake(game: Game) {
  const { snake, food } = game;

  const newHead = {
    x: snake.position[0].x + (snake.direction === "left" ? -10 : 0) + (snake.direction === "right" ? 10 : 0),
    y: snake.position[0].y + (snake.direction === "up" ? -10 : 0) + (snake.direction === "down" ? 10 : 0),
  };

  snake.position.unshift(newHead);

  if (newHead.x === food.position.x && newHead.y === food.position.y) {
    game.score++;
    createNewFood(game);
  } else {
    snake.position.pop();
  }

  if (isGameOver(snake, game.canvas)) {
    alert(`Game Over! Your Score: ${game.score}`);
    window.location.reload();
  }
}

第四步：蛇与墙的碰撞检测

在 TypeScript 中实现碰撞检测：

function isGameOver(snake: Snake, canvas: HTMLCanvasElement): boolean {
  const head = snake.position[0];

  return (
    head.x < 0 ||
    head.y < 0 ||
    head.x >= canvas.width ||
    head.y >= canvas.height ||
    snake.position.slice(1).some((position) => position.x === head.x && position.y === head.y)
  );
}

第五步：绘制游戏画面

在 TypeScript 中实现游戏画面的绘制：

function render(game: Game) {
  clearCanvas(game.ctx, game.canvas);

  drawSnake(game.ctx, game.snake);
  drawFood(game.ctx, game.food);
  drawScore(game.ctx, game.score);
}

其中，drawSnake()、drawFood() 和 drawScore() 都是绘制相应元素的函数，这里不再展开讲解。

其他：

其他涉及到游戏画面清除以及重新生成食物等细节处理都可以参考完整项目源代码。

4. 示例说明

示例一

具体的实现可以参考这里。

git clone https://github.com/zhaoolee/LearnTypescript.git
cd LearnTypescript/docs/project/Game-example/TerminalDocs/tkanban/small\ game/
yarn install
yarn start