Pixi.js 打造简单小游戏：趣味十足的捉迷藏

前端

2023-12-20 16:43:16

在数字时代，游戏已成为人们休闲娱乐的重要方式。而 Pixi.js 是一个出色的 JavaScript 游戏框架，以其轻量级、快速和可扩展性著称，深受游戏开发者的喜爱。

今天，我们将使用 Pixi.js 打造一款简单的小游戏——捉迷藏。在这款游戏中，玩家将控制手电筒在屏幕内移动，以找到名为 Captain 的 Npc。准备好了吗？让我们开始吧！

游戏背景：

故事发生在一个神秘的森林里。玩家将扮演一名手持手电筒的探索者，开始寻找隐藏在森林深处的 Captain。玩家需要利用手电筒的光亮，在黑暗中搜寻线索，一步步揭开 Captain 的秘密。

游戏规则：

控制手电筒在屏幕内移动，照亮黑暗区域，寻找隐藏的 Captain。
找到 Captain 后，点击它即可完成游戏。
注意，森林中还存在其他障碍物，需要小心躲避。
游戏时间有限，玩家需要在规定时间内找到 Captain。

实现细节：

创建 Pixi.js 应用：

const app = new PIXI.Application({ width: 800, height: 600, backgroundColor: 0x1099bb });
document.body.appendChild(app.view);

加载游戏资源：

PIXI.loader.add('hand', './assets/hand.png');
PIXI.loader.add('captain', './assets/captain.png');
PIXI.loader.add('background', './assets/background.png');
PIXI.loader.load((loader, resources) => {
  // 加载成功后的回调函数
});

创建游戏场景：

const background = new PIXI.Sprite(resources['background'].texture);
app.stage.addChild(background);

// 创建手电筒
const hand = new PIXI.Sprite(resources['hand'].texture);
hand.position.set(100, 100);
hand.anchor.set(0.5);
app.stage.addChild(hand);

// 创建 Captain
const captain = new PIXI.Sprite(resources['captain'].texture);
captain.position.set(400, 300);
captain.visible = false;
app.stage.addChild(captain);

添加用户交互：

app.stage.interactive = true;
app.stage.on('mousemove', (e) => {
  // 手电筒跟随鼠标移动
  hand.position.set(e.data.global.x, e.data.global.y);
});

// 当鼠标点击时，判断是否找到 Captain
app.stage.on('click', (e) => {
  if (captain.visible && captain.getBounds().contains(e.data.global.x, e.data.global.y)) {
    alert('找到 Captain 了！');
  }
});