在 Phaser 3 和 TypeScript 的加持下，轻松创建浏览器游戏

2023-09-24 02:19:10

在浏览器中创建游戏既有趣又具有挑战性。如果您是一位后端开发人员，并且对前端开发知之甚少，那么这个过程可能会更加困难。不过，借助 Phaser 3 和 TypeScript，您就可以轻松创建出令人惊叹的游戏。

本教程将引导您完成在浏览器中创建简单游戏的整个过程，从设置项目到编写代码和部署游戏。无论您是游戏开发新手还是经验丰富的开发者，本教程都能帮助您快速入门。

入门

1. 设置项目

首先，您需要创建一个新的 Phaser 3 项目。您可以使用以下命令在命令提示符中执行此操作：

npm install -g phaser

接下来，创建一个新的项目目录，并导航到该目录。然后，运行以下命令创建项目：

phaser init my-game

2. 安装 TypeScript

接下来，您需要安装 TypeScript。您可以使用以下命令在命令提示符中执行此操作：

npm install typescript

3. 创建 TypeScript 配置文件

接下来，您需要创建一个 TypeScript 配置文件。您可以通过创建一个名为 tsconfig.json 的文件并添加以下内容来执行此操作：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "dist"
  }
}

4. 编写代码

现在，您可以开始编写代码了。在 src 目录中创建一个名为 main.ts 的文件，并添加以下内容：

import Phaser from 'phaser';

class Game extends Phaser.Scene {
  constructor() {
    super({ key: 'Game' });
  }

  preload() {
    this.load.image('sky', 'assets/sky.png');
    this.load.image('ground', 'assets/platform.png');
    this.load.image('star', 'assets/star.png');
    this.load.image('bomb', 'assets/bomb.png');
  }

  create() {
    this.add.image(400, 300, 'sky');

    const platforms = this.physics.add.staticGroup();

    platforms.create(400, 568, 'ground').setScale(2).refreshBody();

    const stars = this.physics.add.group({
      key: 'star',
      repeat: 11,
      setXY: { x: 12, y: 0, stepX: 70 }
    });

    stars.children.iterate((child) => {
      const star = child;

      star.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));
    });

    const bombs = this.physics.add.group();

    this.time.addEvent({
      delay: 1000,
      callback: () => {
        const bomb = bombs.create(Phaser.Math.Between(20, 780), 0, 'bomb');

        bomb.setBounce(1);
        bomb.setCollideWorldBounds(true);
        bomb.setVelocity(Phaser.Math.Between(-200, 200), 20);
      },
      loop: true
    });

    const player = this.physics.add.sprite(100, 450, 'dude');

    player.setBounce(0.2);
    player.setCollideWorldBounds(true);

    this.physics.add.collider(player, platforms);
    this.physics.add.collider(stars, platforms);
    this.physics.add.collider(bombs, platforms);

    this.physics.add.overlap(player, stars, (player, star) => {
      star.disableBody(true, true);
    });

    this.physics.add.collider(player, bombs, (player, bomb) => {
      this.scene.restart();
    });

    const cursors = this.input.keyboard.createCursorKeys();

    this.input.keyboard.on('keydown-SPACE', () => {
      if (player.body.touching.down) {
        player.setVelocityY(-350);
      }
    });

    this.add.text(20, 20, 'Score: 0', { fontSize: '32px', fill: '#000' });
  }

  update() {
    const cursors = this.input.keyboard.createCursorKeys();

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

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

const game = new Phaser.Game(config);