Phaser是一个HTML5游戏框架。它使用了许多HTML5 API，例如Canvas，WebGL，Audio，Gamepad等，并添加了一些有用的逻辑，例如管理游戏循环并为我们提供了物理引擎。
使用Phaser，我们可以只用HTML，CSS和JavaScript来构建2D游戏。
项目需求
在使用Phaser构建Breakout克隆之前，让我们首先定义游戏的范围：
这款单人游戏具有30个积木，一个球拍和一个球的一个关卡
目标是让球摧毁所有积木，同时确保其不离开游戏画面的底部。
玩家将控制一个可左右移动的桨
该游戏是为桌面版网络用户打造的，因此将使用键盘进行输入
设置Phaser
Phaser是一个JavaScript库，要开发和玩我们的游戏，我们需要一些基本的HTML来加载JS。在一个工作区中创建一个名为breakout的目录。
在目录中创建以下文件和文件夹：
一个index.html文件
一个breakout.js文件
名为的文件夹 assets
在您的assets文件夹中，创建一个images文件夹
游戏资产是游戏使用的艺术品，声音，视频和其他数据。对于这个简单的Breakout克隆，没有多少资产需要使用文件夹进行组织。但是，优良作法是将资产与代码分开，并按类型将资产分开。
将以下代码添加到您的index.html文件中：
<!doctype html>
删除HTML和body标签中的浏览器边距和填充
添加一个gamediv元素，其中将包含我们的Breakout克隆
通过其CDN加载Phaser v3.17
加载breakout.js当前不执行任何操作但包含游戏逻辑的文件
为了使用Phaser有效开发游戏，我们需要将这些文件放到web服务器中运行。如果web服务器，出于安全原因，我们的浏览器将不允许我们的游戏脚本加载资产。
幸运的是，无需设置Apache或Nginx即可获得运行中的Web服务器。如果使用VisualStudio Code，则可以安装Live Server扩展。大多数IDE和文本编辑器都具有功能类似的插件。
如果您安装了Python版本3，则可以通过终端进入工作区并输入python3 -m http.server。还有其他CLI工具可提供简单的Web服务器，请选择一种可以为您提供最快时间开发游戏的工具。
最后，下载我们为此游戏创建的图像资产。将PNG文件复制并粘贴到images文件夹中。
创造我们的游戏世界
通过设置HTML和CSS，让我们编辑breakout.js文件以设置游戏世界。
开始Phaser
首先，我们需要配置Phaser并创建我们的Game实例。该游戏的实例是Phaser游戏的*控制器，它进行所有的设置和开始游戏循环。
让我们配置和创建Game实例：
// This object contains all the Phaser configurations to load our game
const config = {
type: Phaser.AUTO,
parent: ‘game’,
width: 800,
heigth: 640,
scale: {
mode: Phaser.Scale.RESIZE,
autoCenter: Phaser.Scale.CENTER_BOTH
},
scene: {
preload,
create,
update,
},
physics: {
default: ‘arcade’,
arcade: {
gravity: false
},
}
};
// Create the game instance
const game = new Phaser.Game(config);
该type属性告诉Phaser使用什么渲染器。Phaser可以使用HTML5的WebGL或Canvas元素来渲染我们的游戏。通过将类型设置为Phaser.AUTO，我们告诉Phaser首先尝试使用WebGL进行渲染，如果失败，则使用Canvas进行渲染。
该parent属性表示将要玩我们的游戏的HTML元素的ID。我们使用width和定义游戏尺寸（以像素为单位）height。该scale对象为我们做两件事：
mode 告诉Phaser如何使用父元素的空间，在这种情况下，我们确保游戏适合父元素的大小 div
autoCenter告诉Phaserdiv如果需要的话，如何在我们的父级中居中游戏。在这种情况下，我们将游戏在父div内垂直和水平居中。当游戏不占据父对象的整个空间时，此属性会更有用。
在Phaser中，我们的游戏逻辑在中定义Scenes。将场景视为游戏中的各种状态：标题屏幕是一个场景，游戏的每个级别将是它们自己的场景，剪切场景将是它自己的场景，等等。Phaser提供了Scene对象，但它也可以与含有常规的JavaScript对象preload()，create()和update()定义的函数。
最后一个配置告诉Phaser要使用哪个物理引擎。Phaser可以使用3种不同的物理引擎：Arcade，Impact和Matter。Arcade是最简单的入门游戏，足以满足我们的游戏需求。
Breakout 不需要重力即可工作，因此我们在物理引擎中禁用了该属性。如果我们要构建Platform游戏，则可能会启用重力，这样当我们的玩家跳跃时，他们会自然地掉回地面。
为了确保我们的游戏设置工作，我们需要添加preload()，create()和update()功能。创建游戏实例后，向其中添加以下空白函数：
function preload() { }
function create() { }
function update() { }
在Web服务器运行的情况下，导航到运行游戏的页面。您应该看到一个空白屏幕，如下所示：
游戏设定
加载资产
该游戏中的资产包括5张图片。在您可能创建的其他游戏中，您的资产可能非常庞大。高清晰图像，音频和视频文件可能会占用兆字节的空间。资产越大，负担越长。因此，Phaser具有一项preload()功能，我们可以在开始运行游戏之前加载所有资产。
将preload()函数更改为以下内容，以便我们可以在游戏循环开始之前加载图像：
function preload() {
this.load.image(‘ball’, ‘assets/images/ball_32_32.png’);
this.load.image(‘paddle’, ‘assets/images/paddle_128_32.png’);
this.load.image(‘brick1’, ‘assets/images/brick1_64_32.png’);
this.load.image(‘brick2’, ‘assets/images/brick2_64_32.png’);
this.load.image(‘brick3’, ‘assets/images/brick3_64_32.png’);
}
第一个参数是稍后将用来引用图像的键，第二个参数是图像的位置。
注： -当我们用this我们的preload()，create()和update()功能，我们指的是由之前创建的游戏实例game。
加载图像后，我们想在屏幕上放置精灵。在的顶部breakout.js，添加以下将包含我们的精灵数据的变量：
let player, ball, violetBricks, yellowBricks, redBricks, cursors;
一旦全局定义它们，我们所有的函数都可以使用它们。
添加精灵
sprite 是游戏场景中任何2D图像。在Phaser中，sprite 会封装图像以及其位置，速度，物理属性和其他属性。首先，通过create()函数创建player精灵：
player = this.physics.add.sprite(
400, // x position
600, // y position
‘paddle’, // key of image for the sprite
);
您现在应该可以在屏幕上看到一个桨：
屏幕播放器
该sprite()方法的第一个参数是X放置精灵的坐标。第二个参数是Y坐标，最后一个参数是preload()函数中添加的图像资产的键。
了解phaser和大多数2D游戏框架如何使用坐标很重要。我们在学校学到的图形通常将原点即点（0，0）置于中心。在Phaser中，原点位于屏幕的左上方。随着x增长，我们实际上正在向右移动。随着y增加，我们正在向下移动。
我们的游戏的宽度为800像素，高度为640像素，因此我们的游戏坐标如下所示：
游戏坐标
让我们将球添加到Player上方。将以下代码添加到该create()函数：
ball = this.physics.add.sprite(
400, // x position
565, // y position
‘ball’ // key of image for the sprite
);
由于球上面我们的Player，在坐标y的值是低比玩家的Y坐标。
添加精灵组
虽然Phaser可以轻松添加sprite，但如果必须分别定义每个sprite，将很快变得乏味。Breakout中的砖块几乎相同。位置不同，但是它们的属性（例如颜色以及它们与球的交互方式）是相同的。我们可以创建精灵组来更好地管理它们，而不是创建30个砖精灵对象。
让我们通过create()函数添加第一排紫色砖：
// Add violet bricks
violetBricks = this.physics.add.group({
key: ‘brick1’,
repeat: 9,
setXY: {
x: 80,
y: 140,
stepX: 70
}
});
代替this.physics.add.sprite()我们使用this.physics.add.group()并传递一个JavaScript对象。key属性引用sprite组中所有sprite将使用的图像键。该repeat属性告诉Phaser再创建多少个精灵。每个精灵组都创建一个精灵。随着repeat设置为9，Phaser将创建一个精灵组10个精灵。该setXY对象具有三个有趣的属性：
x 是第一个精灵的X坐标
y 是第二个精灵的Y坐标
stepX 是x轴上重复的精灵之间的像素长度。
也有一个stepY属性，但是我们不需要在游戏中使用它。让我们为砖添加另外两个剩余的精灵组：