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

Whoisbug

已于 2025-01-24 08:17:55 修改

阅读量657

点赞数 15

分类专栏：趣味编程合集文章标签： linux typescript canvas html react 游戏

于 2025-01-24 08:12:29 首次发布

本文链接：https://blog.youkuaiyun.com/Whoisbug/article/details/145333257

版权

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

背景介绍

技术要点

1. TypeScript 语言特点及优势

2. HTML5 Canvas 2D 绘图 API

背景介绍

吃豆人（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: initializeObstacl

最低0.47元/天解锁文章