基于Canvas的吃豆人小游戏（附完整源码，TypeScript）

 

🎉 经典游戏的魅力，永不褪色！最终游戏效果图如上，希望你能通过这篇文章，重新体验到吃豆人的乐趣！

目录

背景介绍

技术要点

1. TypeScript 语言特点及优势

2. HTML5 Canvas 2D 绘图 API

3. React 状态管理与组件化

4. 游戏逻辑与碰撞检测

5. 动画与帧循环

完整代码

源码下载

代码分析

1. 程序初始化与显示设置

2. 游戏画布的绘制

3. 吃豆人和幽灵的移动逻辑

4. 碰撞检测与游戏结束条件

5. 爆炸效果的实现

6. 总结

注意事项

写在后面

版权声明

参考资料

---

背景介绍

吃豆人（Pac-Man）是一款经典的街机游戏，自1980年推出以来，一直是游戏界的标志性作品。玩家控制一个黄色的小圆点，在迷宫中移动，吃掉所有的豆子，同时躲避追逐的幽灵。当玩家触碰到幽灵时，游戏结束。这款游戏不仅考验玩家的反应能力，还考验策略和规划能力。

在本项目中，我们将使用 TypeScript、React 和 HTML5 Canvas 来实现一个简化版的吃豆人游戏。通过这个项目，你将了解到如何结合现代前端技术来实现经典游戏的复刻，并掌握游戏开发中的一些核心技术。

---

技术要点

实现吃豆人游戏需要掌握以下关键技术，它们共同构成了实现这一经典游戏的基础。

1. TypeScript 语言特点及优势

TypeScript 是 JavaScript 的超集，提供了类型系统和面向对象编程的支持。它在实现吃豆人游戏中的主要优势包括：

• 类型安全：通过类型注解减少运行时错误，提升代码的可维护性。

• 面向对象编程：支持类和接口，便于将游戏对象（如吃豆人、幽灵、豆子等）封装为独立的模块。

• 工具友好：与现代开发工具（如 VS Code）集成良好，提供智能提示和代码检查功能。

2. HTML5 Canvas 2D 绘图 API

HTML5 Canvas 提供了强大的 2D 绘图能力，是实现游戏画面的核心工具。关键特性包括：

• 绘图上下文：通过 getContext('2d') 获取绘图上下文，支持绘制图形、文本和图像。

• 图形绘制：使用 arc、fillRect 等方法绘制圆形豆子、矩形障碍物和吃豆人。

• 透明度和渐变：通过 fillStyle 和 globalAlpha 控制颜色透明度，实现爆炸效果的渐变。

3. React 状态管理与组件化

虽然游戏的核心逻辑主要依赖 Canvas 和 TypeScript，但 React 提供了组件化开发的优势：

• 状态管理：通过 useState 和 useEffect 管理游戏状态，避免不必要的重新渲染。

• 事件处理：通过 React 的事件系统（如键盘事件）增强交互性，允许玩家通过键盘控制吃豆人移动。

• 组件化：将游戏的不同部分（如游戏画布、爆炸效果等）拆分为独立的组件，提升代码的可读性和可维护性。

4. 游戏逻辑与碰撞检测

游戏的核心逻辑包括：

• 移动逻辑：控制吃豆人和幽灵的移动。

• 碰撞检测：检测吃豆人是否吃到豆子，以及是否与幽灵碰撞。

• 游戏结束条件：当吃豆人与幽灵碰撞时，游戏结束。

5. 动画与帧循环

动画效果的实现依赖于高效的帧循环，核心技术包括：

• requestAnimationFrame：浏览器提供的 API，用于实现平滑的动画效果。它会自动根据屏幕刷新率调整帧率，确保动画的流畅性。

• 帧循环逻辑：在每一帧中更新游戏状态、清除画布并重新绘制，实现动态效果。

---

完整代码

以下是实现吃豆人游戏的完整代码：

index.tsx（游戏主逻辑，核心）

import React, { useState, useEffect, useCallback } from 'react';
import { GameCanvas } from './components/GameCanvas';
import { ExplosionEffect } from './components/ExplosionEffect';
import { GameState, Position, Ghost, Dot, Obstacle } from './types';

const CELL_SIZE = 40;
const GAME_SPEED = 150;
const GHOST_COLORS = ['#FFB6C1', '#87CEEB', '#98FB98', '#DDA0DD'];
const GRID_COLS = 10;
const GRID_ROWS = 10;

// 初始化豆子
const initializeDots = (): Dot[] => {
  const dots: Dot[] = [];
  for (let x = 0; x < GRID_COLS; x++) {
    for (let y = 0; y < GRID_ROWS; y++) {
      dots.push({
        position: { x: x * CELL_SIZE, y: y * CELL_SIZE },
        eaten: false
      });
    }
  }
  return dots;
};

// 初始化障碍物
const initializeObstacles = (): Obstacle[] => {
  const obstacles: Obstacle[] = [];
  const numObstacles = 8; // 障碍物数量
  
  for (let i = 0; i < numObstacles; i++) {
    let position;
    do {
      position = {
        x: Math.floor(Math.random() * GRID_COLS) * CELL_SIZE,
        y: Math.floor(Math.random() * GRID_ROWS) * CELL_SIZE
      };
    } while (
      // 确保障碍物不会出现在起始位置和其他障碍物位置
      (position.x === 0 && position.y === 0) ||
      obstacles.some(obs => 
        obs.position.x === position.x && 
        obs.position.y === position.y
      )
    );
    
    obstacles.push({ position });
  }
  return obstacles;
};

// 检查是否与障碍物碰撞
const checkObstacleCollision = (position: Position, obstacles: Obstacle[]): boolean => {
  return obstacles.some(obstacle => 
    obstacle.position.x === position.x && 
    obstacle.position.y === position.y
  );
};

export const PacmanGame: React.FC = () => {
  const [gameState, setGameState] = useState<GameState>({
    pacman: {
      position: { x: 0, y: 0 },
      direction: 'right',
      mouthOpen: true
    },
    ghosts: GHOST_COLORS.map((color, index) => {
      // 将怪物放在地图右下角区域
      const row = Math.floor(GRID_ROWS * 0.7) + index % 2; // 从70%的位置开始
      const col = Math.floor(GRID_COLS * 0.7) + Math.floor(index / 2); // 从70%的位置开始
      return {
        position: { 
          x: Math.min(col, GRID_COLS - 1) * CELL_SIZE,
          y: Math.min(row, GRID_ROWS - 1) * CELL_SIZE
        },
        color,
        direction: 'right'
      };
    }),
    dots: initializeDots(),
    obstacles: initializeObstacles(),
    gameOver: false,
    score: 0
  });

  const [showExplosion, setShowExplosion] = useState(false);
  const [explosionPosition, setExplosionPosition] = useState<Position>({ x: 0, y: 0 });

  const moveGhosts = useCallback(() => {
    setGameState(prev => ({
      ...prev,
      ghosts: prev.ghosts.map(ghost => {
        const newPosition = { ...ghost.position };
        const step = CELL_SIZE;

        let attempts = 0;
        let validMove = false;