从零开始的 Phaser 打砖块小记（Vite + Tailwind CSS + React + Phaser3）

2024-02-13 06:29:34

导言

作为一名对游戏开发略知一二的前端小白，一直想尝试着用自己熟悉的前端技术栈来实现一款游戏。恰逢 Phaser3 的热度，便决定以其为基础，用 React、Vite 和 Tailwind CSS 来开发一款经典的打砖块游戏。本文将详细记录我的开发历程，从环境搭建到游戏实现，分享我在这个过程中遇到的挑战和收获。

技术选型

Phaser3

Phaser3 是一个开源的 HTML5 游戏框架，支持跨平台开发。它的轻量级和强大的功能使其成为开发 2D 游戏的理想选择。

React

React 是一个流行的 JavaScript 库，用于构建用户界面。它以其组件化和单向数据流的特性而著称，这使得它非常适合开发交互式游戏界面。

Vite

Vite 是一个现代的前端构建工具，以其极快的开发服务器和开箱即用的 TypeScript 支持而闻名。

Tailwind CSS

Tailwind CSS 是一个实用的 CSS 框架，提供了一组预定义的实用程序类，使开发人员能够快速轻松地创建样式化的界面。

环境搭建

首先，我使用 Vite 初始化了一个新的 React 项目。然后，我安装了 Phaser3、Tailwind CSS 和一些必需的依赖项。以下是 package.json 文件中相关依赖项的配置：

{
  "dependencies": {
    "phaser": "^3.55.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "tailwindcss": "^3.0.24",
    "vite": "^2.9.17"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.7",
    "postcss": "^8.4.14",
    "tailwindcss/nesting": "^0.4.0"
  }
}

为了支持 Tailwind CSS，我还创建了 tailwind.config.js 文件并进行了必要的配置。

游戏开发

游戏初始化

我在 src/App.js 中初始化 Phaser 游戏：

import Phaser from "phaser";

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

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

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

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

  update(time, delta) {
    // 游戏主循环
  }
}

export const game = new Phaser.Game(config);

游戏对象

我创建了砖块、球和球拍等游戏对象。以下是创建砖块的代码示例：

const brick = this.physics.add.sprite(x, y, 'brick');
brick.setImmovable(true);
brick.setCollideWorldBounds(true);

物理引擎

我使用 Phaser 内置的 Arcade 物理引擎来处理游戏对象的物理行为。以下是设置物理引擎的代码示例：

this.physics.world.setBoundsCollision();
this.physics.add.collider(ball, bricks, hitBrick, null, this);

游戏循环

update 方法是游戏的主循环，它不断更新游戏状态和渲染游戏画面。以下是 update 方法中的代码示例：

ball.setVelocityX(ballSpeed);
ball.setVelocityY(ballSpeed);

用户界面

我使用 React 和 Tailwind CSS 构建了用户界面，包括游戏得分、生命数和控制按钮。以下是使用 Tailwind CSS 样式化的 React 组件示例：

import { useState } from "react";
import { classNames } from "tailwindcss/tailwindcss";

export const Score = () => {
  const [score, setScore] = useState(0);

  return (
    <div className={classNames("text-lg font-bold", {
      "text-red-600": score < 0,
      "text-green-600": score > 0
    })}>
      Score: {score}
    </div>
  );
};