使用PhaserJS制作吃豆人：如何设置不可进入区域的边界？

以下是几种实用的实现方式，适配不同场景需求：

1. 基于Arcade Physics的静态碰撞组 #

这是最常用的方案，适合独立的墙体、障碍物：

• 创建静态物理组，将所有不可进入的边界元素（比如墙体精灵、矩形碰撞块）加入其中：

  // 初始化静态碰撞组
  const walls = this.physics.add.staticGroup();
  // 添加墙体精灵（示例：从图集加载或创建几何形状）
  walls.create(100, 100, 'wall-sprite').setScale(2).refreshBody();
  // 或者创建矩形碰撞块（无需视觉 sprite）
  walls.createRectangle(300, 200, 50, 400).setOrigin(0.5, 0.5);
  

• 给吃豆人角色开启物理属性，并绑定碰撞检测：

  const pacman = this.physics.add.sprite(400, 300, 'pacman');
  // 绑定角色与边界组的碰撞
  this.physics.add.collider(pacman, walls);
  

• 若需自定义碰撞形状，可通过setSize()、setOffset()调整碰撞盒，或用多边形碰撞体：

  // 给静态元素设置多边形碰撞形状
  const wall = walls.create(200, 200, 'custom-wall');
  wall.setPolygon([0,0, 100,0, 100,50, 50,100, 0,50]);
  

2. 基于Tilemap的瓦片碰撞 #

吃豆人这类网格地图游戏，瓦片地图是最优选择：

• 加载瓦片地图资源（假设用Tiled编辑器制作）：

  this.load.tilemapTiledJSON('pacman-map', 'assets/pacman-map.json');
  this.load.spritesheet('tiles', 'assets/tiles.png', { frameWidth: 16, frameHeight: 16 });
  

• 创建地图实例并开启碰撞层：

  const map = this.make.tilemap({ key: 'pacman-map' });
  const tileset = map.addTilesetImage('game-tiles', 'tiles');
  // 创建墙体层（对应Tiled里的图层名称）
  const wallsLayer = map.createLayer('Walls', tileset, 0, 0);
  // 开启碰撞：可通过瓦片属性或ID范围设置
  wallsLayer.setCollisionByProperty({ collides: true }); 
  // 或者指定瓦片ID范围：wallsLayer.setCollisionBetween(1, 15);
  

• 绑定角色与瓦片层的碰撞：

  this.physics.add.collider(pacman, wallsLayer);
  

3. 自定义位置检测（适合特殊不规则区域） #

如果需要完全自定义的边界逻辑，可在帧更新中手动检测：

• 定义允许进入的区域（示例为矩形，也可使用多边形、圆形等）：

  // 允许区域：x=50, y=50, 宽=700, 高=500
  const allowedArea = new Phaser.Geom.Rectangle(50, 50, 700, 500);
  

• 在update函数中检测并修正角色位置：

  function update() {
    // 检查角色是否超出允许区域
    if (!Phaser.Geom.Rectangle.Contains(allowedArea, pacman.x, pacman.y)) {
      // 将角色位置限制在允许区域内
      Phaser.Geom.Rectangle.ClampPoint(pacman, allowedArea);
    }
  }
  

• 更精准的方式是预判移动：在角色移动前，计算目标位置是否在允许区域内，再决定是否执行移动。

内容的提问来源于stack exchange，提问作者Brennan Lee