Phaser 3 入门：打造你的抗疫小游戏

2023-09-18 03:04:01

引言

在抗击疫情的特殊时期，游戏作为一种娱乐和教育方式，可以发挥积极的作用。本文将带你使用 Phaser 3，一个流行的开源 JavaScript 游戏框架，从零开始制作一款 H5 抗疫小游戏。通过这个项目，你不仅可以学习 Phaser 3 的基础知识，还能为抗疫出一份力。

前期准备

在开始之前，你需要确保已经安装了以下软件：

Node.js 和 npm
Phaser 3
一个代码编辑器（如 Visual Studio Code）

创建项目

首先，创建一个新的 Node.js 项目：

mkdir phaser-game
cd phaser-game
npm init -y

然后安装 Phaser 3：

npm install phaser

初始化游戏

在 src 文件夹中创建一个名为 game.js 的文件，并输入以下代码：

import Phaser from 'phaser';

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  physics: {
    default: 'arcade',
    arcade: {
      gravity: { y: 300 }
    }
  },
  scene: {
    preload: preload,
    create: create,
    update: update
  }
};

const game = new Phaser.Game(config);

function preload() {
  // 预加载游戏资源
}

function create() {
  // 创建游戏对象
}

function update() {
  // 更新游戏状态
}

添加角色和障碍物

我们先添加一个玩家角色和一些障碍物。在 preload 函数中添加以下代码：

this.load.spritesheet('player', 'assets/player.png', { frameWidth: 32, frameHeight: 48 });
this.load.image('obstacle', 'assets/obstacle.png');

然后在 create 函数中添加以下代码：

// 创建玩家角色
this.player = this.physics.add.sprite(100, 100, 'player');
this.player.setCollideWorldBounds(true);

// 创建障碍物组
this.obstacles = this.physics.add.group({
  key: 'obstacle',
  repeat: 10,
  setXY: { x: 120, y: 10, stepX: 100 }
});
this.obstacles.children.iterate(function(obstacle) {
  obstacle.setImmovable(true);
});

添加玩家控制

为了控制玩家角色，我们在 update 函数中添加以下代码：

// 控制玩家移动
const cursors = this.input.keyboard.createCursorKeys();

if (cursors.left.isDown) {
  this.player.setVelocityX(-160);
} else if (cursors.right.isDown) {
  this.player.setVelocityX(160);
} else {
  this.player.setVelocityX(0);
}

if (cursors.up.isDown && this.player.body.touching.down) {
  this.player.setVelocityY(-330);
}

添加碰撞检测

我们需要让玩家角色与障碍物发生碰撞时游戏结束。在 update 函数中添加以下代码：

// 检测碰撞
this.physics.collide(this.player, this.obstacles, function() {
  this.scene.start('game-over');
});

添加游戏结束场景

当玩家角色与障碍物发生碰撞时，我们跳转到游戏结束场景。在 src 文件夹中创建一个名为 game-over.js 的文件，并输入以下代码：

import Phaser from 'phaser';

export default class GameOver extends Phaser.Scene {
  constructor() {
    super('game-over');
  }

  preload() {
    // 预加载游戏资源
  }

  create() {
    // 创建游戏对象
    this.add.text(this.scale.width / 2, this.scale.height / 2, 'Game Over', { fontSize: '32px', fill: '#ffffff' });
  }
}

然后在 game.js 中修改 update 函数：

// 检测碰撞
this.physics.collide(this.player, this.obstacles, function() {
  this.scene.start('game-over');
});

添加主题元素

为了融入抗疫主题，我们在 preload 函数中添加以下代码：

this.load.image('mask', 'assets/mask.png');

然后在 create 函数中添加以下代码：

// 添加口罩
this.mask = this.add.image(this.player.x, this.player.y, 'mask');
this.mask.setScale(0.5);

添加 UI 元素

我们添加一个文本显示玩家收集的口罩数量。在 preload 函数中添加以下代码：

this.load.bitmapFont('font', 'assets/font.png', 'assets/font.xml');

然后在 create 函数中添加以下代码：

// 添加文本显示收集的口罩数量
this.scoreText = this.add.bitmapText(10, 10, 'font', 'Masks: 0', 16);

收集口罩

当玩家角色与口罩发生碰撞时，我们增加口罩数量并更新文本显示。在 update 函数中添加以下代码：

// 检测口罩碰撞
this.physics.collide(this.player, this.mask, function() {
  this.score++;
  this.scoreText.setText('Masks: ' + this.score);
  this.mask.setPosition( Phaser.Math.RND.between(0, 800), Phaser.Math.RND.between(0, 600) );
});