[JavaScript游戏开发] 跟随人物二维动态地图绘制、自动寻径、小地图显示(人物红点显示)

// 引入相关模块
import PIXI from 'pixi.js';
import p2 from 'p2';
import { Tilemap, TileSprite } from '../tilemap';
import { Pathfinder } from '../pathfinder';
 
// 初始化Pixi应用
const app = new PIXI.Application({ width: 800, height: 600 });
document.body.appendChild(app.view);
 
// 创建人物图片
const spriteTexture = PIXI.Texture.from('assets/player.png');
const playerSprite = new PIXI.Sprite(spriteTexture);
playerSprite.anchor.set(0.5); // 设置锚点为中心
playerSprite.x = 100; // 初始位置
playerSprite.y = 100;
app.stage.addChild(playerSprite); // 将人物添加到场景
 
// 创建地图
const tilemap = new Tilemap(app, 'assets/map.json');
tilemap.x = -400; // 地图的x坐标，使地图的左上角与屏幕中心对齐
tilemap.y = -300;
app.stage.addChild(tilemap);
 
// 创建小地图
const miniMap = new PIXI.Container();
miniMap.position.set(700, 50); // 小地图位置
miniMap.scale.set(0.5); // 小地图缩放
app.stage.addChild(miniMap);
 
// 创建小地图背景
const miniMapBackground = TileSprite.fromFrame('background');
miniMapBackground.tileScale = new PIXI.Point(0.5, 0.5);
miniMapBackground.anchor.set(0.5);
miniMapBackground.x = miniMapBackground.width / 2;
miniMapBackground.y = miniMapBackground.height / 2;
miniMap.addChild(miniMapBackground);
 
// 创建小人物图标
const miniPlayer = new PIXI.Sprite(spriteTexture);
miniPlayer.anchor.set(0.5);
miniPlayer.x = playerSprite.x / 100; // 假设小地图是100倍小，则x,y坐标也需要缩小
miniPlayer.y = playerSprite.y / 100;
miniMap.addChild(miniPlayer);
 
// 创建物理世界
const world = new p2.World({
  gravity: [0, 0], // 无重力
});
 
// 创建Pathfinder
const pathfinder = new Pathfinder(world, tilemap);
 
// 更新函数
function update() {
  // 物理世界步进
  world.step(1 / 60);
 
  // 获取人物当前的格子坐标
  const playerTile = tilemap.getTileIndexFromWorldXY(playerSprite.x, playerSprite.y);
 
  // 寻找路径
  const destinationTile = tilemap.getTileIndexFromWorldXY(1000, 1000); // 假设的目标坐标
  const path = pathfinder.findPath(playerTile, destinationTile);
 
  // 根据路径移动人物
  if (path && path.length > 1) {
    const nextTile = path[1];
    playerSprite.x = tilemap.getXFromTileIndex(nextTile[0]);
    playerSprite.y = tilemap.getYFromTileIndex(nextTile[1]);
  }
 
  // 更新小地图中的人物位置
  miniPlayer.x = playerSprite.x / 100;
  miniPlayer.y = playerSprite.y / 100;
}
 
// 调用更新函数
app.ticker.add(update);

这段代码