phaser3从零开始开发一个打砖块游戏分享
导读： 项目代码 空格开始，左右箭头控制移动 体验一下 Phaser是一个HTML5游戏框架。它使用了许多HTML5 API，例如Canvas，WebGL，Audio，Gamepad等，并添加了一些有用的逻辑，例如管理游戏循环...
项目代码
空格开始，左右箭头控制移动
体验一下
Phaser是一个HTML5游戏框架。它使用了许多HTML5 API，例如Canvas，WebGL，Audio，Gamepad等，并添加了一些有用的逻辑，例如管理游戏循环并为我们提供了物理引擎。
使用Phaser，我们可以只用HTML，CSS和JavaScript来构建2D游戏。
在使用Phaser构建Breakout克隆之前，让我们首先定义游戏的范围：
这款单人游戏具有30个积木，一个球拍和一个球的一个关卡
目标是让球摧毁所有积木，同时确保其不离开游戏画面的底部。
玩家将控制一个可左右移动的桨
该游戏是为桌面版网络用户打造的，因此将使用键盘进行输入
Phaser是一个JavaScript库，要开发和玩我们的游戏，我们需要一些基本的HTML来加载JS。在一个工作区中创建一个名为breakout的目录。
在目录中创建以下文件和文件夹：
一个index.html文件
一个breakout.js文件
名为的文件夹 assets
在您的assets文件夹中，创建一个images文件夹
游戏资产是游戏使用的艺术品，声音，视频和其他数据。对于这个简单的Breakout克隆，没有多少资产需要使用文件夹进行组织。但是，优良作法是将资产与代码分开，并按类型将资产分开。
将以下代码添加到您的index.html文件中：
此基本HTML代码执行以下操作：
删除HTML和body标签中的浏览器边距和填充
添加一个div元素，其中将包含我们的Breakout克隆
通过其CDN加载Phaser v3.17
加载当前不执行任何操作但包含游戏逻辑的文件
为了使用Phaser有效开发游戏，我们需要将这些文件放到web服务器中运行。如果web服务器，出于安全原因，我们的浏览器将不允许我们的游戏脚本加载资产。
幸运的是，无需设置Apache或Nginx即可获得运行中的Web服务器。如果使用VisualStudio Code，则可以安装Live Server扩展。大多数IDE和文本编辑器都具有功能类似的插件。
如果您安装了Python版本3，则可以通过终端进入工作区并输入。还有其他CLI工具可提供简单的Web服务器，请选择一种可以为您提供最快时间开发游戏的工具。
最后，下载我们为此游戏创建的图像资产。将PNG文件复制并粘贴到images文件夹中。
通过设置HTML和CSS，让我们编辑文件以设置游戏世界。
开始Phaser
首先，我们需要配置Phaser并创建我们的实例。该游戏的实例是Phaser游戏的中央控制器，它进行所有的设置和开始游戏循环。
让我们配置和创建实例：
该属性告诉Phaser使用什么渲染器。Phaser可以使用HTML5的WebGL或Canvas元素来渲染我们的游戏。通过将类型设置为，我们告诉Phaser首先尝试使用WebGL进行渲染，如果失败，则使用Canvas进行渲染。
该属性表示将要玩我们的游戏的HTML元素的ID。我们使用和定义游戏尺寸（以像素为单位）。该对象为我们做两件事：
告诉Phaser如何使用父元素的空间，在这种情况下，我们确保游戏适合父元素的大小
告诉Phaser如果需要的话，如何在我们的父级中居中游戏。在这种情况下，我们将游戏在父div内垂直和水平居中。当游戏不占据父对象的整个空间时，此属性会更有用。
在Phaser中，我们的游戏逻辑在中定义。将场景视为游戏中的各种状态：标题屏幕是一个场景，游戏的每个级别将是它们自己的场景，剪切场景将是它自己的场景，等等。Phaser提供了Scene对象，但它也可以与含有常规的JavaScript对象，和定义的函数。
最后一个配置告诉Phaser要使用哪个物理引擎。Phaser可以使用3种不同的物理引擎：Arcade，Impact和Matter。Arcade是最简单的入门游戏，足以满足我们的游戏需求。
Breakout 不需要重力即可工作，因此我们在物理引擎中禁用了该属性。如果我们要构建Platform游戏，则可能会启用重力，这样当我们的玩家跳跃时，他们会自然地掉回地面。
为了确保我们的游戏设置工作，我们需要添加，和功能。创建游戏实例后，向其中添加以下空白函数：
在Web服务器运行的情况下，导航到运行游戏的页面。您应该看到一个空白屏幕，如下所示：
加载资产
该游戏中的资产包括5张图片。在您可能创建的其他游戏中，您的资产可能非常庞大。高清晰图像，音频和视频文件可能会占用兆字节的空间。资产越大，负担越长。因此，Phaser具有一项功能，我们可以在开始运行游戏之前加载所有资产。
将函数更改为以下内容，以便我们可以在游戏循环开始之前加载图像：
第一个参数是稍后将用来引用图像的键，第二个参数是图像的位置。
注： -当我们用我们的，和功能，我们指的是由之前创建的游戏实例game。
加载图像后，我们想在屏幕上放置精灵。在的顶部，添加以下将包含我们的精灵数据的变量：
一旦全局定义它们，我们所有的函数都可以使用它们。
添加精灵
sprite 是游戏场景中任何2D图像。在Phaser中，sprite 会封装图像以及其位置，速度，物理属性和其他属性。首先，通过函数创建player精灵：
您现在应该可以在屏幕上看到一个桨：
该方法的第一个参数是放置精灵的坐标。第二个参数是坐标，最后一个参数是函数中添加的图像资产的键。
了解phaser和大多数2D游戏框架如何使用坐标很重要。我们在学校学到的图形通常将原点即点（0，0）置于中心。在Phaser中，原点位于屏幕的左上方。随着增长，我们实际上正在向右移动。随着增加，我们正在向下移动。
我们的游戏的宽度为800像素，高度为640像素，因此我们的游戏坐标如下所示：
让我们将球添加到Player上方。将以下代码添加到该函数：
由于球上面我们的Player，在坐标y的值是低比玩家的Y坐标。
添加精灵组
虽然Phaser可以轻松添加sprite，但如果必须分别定义每个sprite，将很快变得乏味。Breakout中的砖块几乎相同。位置不同，但是它们的属性（例如颜色以及它们与球的交互方式）是相同的。我们可以创建精灵组来更好地管理它们，而不是创建30个砖精灵对象。
让我们通过函数添加第一排紫色砖：
代替我们使用并传递一个JavaScript对象。key属性引用sprite组中所有sprite将使用的图像键。该属性告诉Phaser再创建多少个精灵。每个精灵组都创建一个精灵。随着设置为9，Phaser将创建一个精灵组10个精灵。该对象具有三个有趣的属性：
是第一个精灵的X坐标
是第二个精灵的Y坐标
是x轴上重复的精灵之间的像素长度。
也有一个属性，但是我们不需要在游戏中使用它。让我们为砖添加另外两个剩余的精灵组：
我们的游戏已经整合在一起，您的屏幕应如下所示：
如果我们的球落到屏幕底部，我们可能会输掉一场比赛。在"phaser"中，要使球位于屏幕下方，则球的Y坐标大于游戏世界的高度。让我们创建一个检查此功能的函数，在底部添加以下内容：
我们的功能从场景的物理属性中获取世界对象，该对象将在功能中可用。它检查球精灵的Y坐标是否大于游戏世界边界的高度。
为了赢得比赛，我们需要打掉所有砖块。Phaser中的精灵都具有活动属性。我们可以使用该属性来确定我们是否获胜。精灵组可以计算其中包含的活动精灵的数量。如果每个积木精灵组中都没有活动的积木，即活动积木有0个，则玩家赢得了游戏。
让我们通过在底部添加一个检查来更新文件：
我们接受每个精灵组作为参数，在其中添加活动精灵的数量，并检查其是否等于0。
既然我们已经定义了输赢条件，我们希望Phaser在游戏循环开始时检查它们。一旦玩家获胜或失败，游戏便应停止。
让我们更新函数：
演奏者的动作取决于键盘输入。为了能够跟踪键盘输入。现在该使用cursors变量了。
并且在我们create()功能的底部：
cursors=this.input.keyboard.createCursorKeys();
Phaser中的光标键可跟踪6个键盘键的用法：上，右，下，左，Shift和空格键。
现在我们需要对cursors对象的状态做出反应以更新播放器的位置。在函数的else子句中update()添加以下内容：
现在我们可以将播放器从左向右移动！
您会注意到，玩家精灵可以离开游戏屏幕，理想情况下，它不能离开游戏屏幕。我们稍后将在处理冲突时解决该问题。
在我们添加逻辑来移动球之前，如果游戏在移动之前等待用户输入，这将有所帮助。加载游戏并立即被强制启动并不是一种好的体验。玩家没有时间做出反应！
玩家按下空格键后，让我们向上移动球。如果用户向左或向右移动球拍，则球也将被移动，因此它始终位于球拍的中心。
首先，我们需要自己的变量来跟踪游戏是否启动。在breakout.js声明游戏变量之后，在的顶部，添加：
现在，在else我们的更新函数的子句中：
如果游戏尚未开始，请将我们球的X坐标设置为玩家的中心。游戏对象的坐标基于其中心，因此sprite的x和y属性将点指向我们sprite的中心。
请注意，虽然可以x通过在设置属性时直接引用属性值来获取属性值，但我们总是尝试使用适当的setter函数。设置器功能可以包括验证我们的输入，更新另一个属性或触发事件的逻辑。它使我们的代码更具可预测性。
就像之前移动player一样，我们检查是否按下了空格键。如果按下该按钮，我们会将gameStarted标志切换到，true以便球不再跟随玩家的水平位置，并将球的Y速度设置为-200。负y速度将物体向上发送。对于正速度，较大的值可以更快地向下移动对象。对于负速度，较小的值可以更快地向上移动对象。
现在，当我们移动玩家时，球跟随着，如果我们按下空格键，球就会向上射击：
到目前为止，您将观察到我们游戏的一些行为：
球在砖块后面渲染
玩家可以离开屏幕的边界
球可以离开屏幕的边界
球是在积木后面渲染的，因为它是在积木精灵组之前的创建函数中添加到游戏中的。在Phaser中，通常使用HTML5 canvas元素，最近添加的图像绘制在先前图像的顶部。
通过添加一些世界碰撞可以解决最后两个问题。
世界碰撞
我们所有的精灵互动都在create函数中定义。使用Phaser轻松与世界场景碰撞，在create函数末尾添加以下内容：
它应该给我们这样的输出：
当球员运动正常时，球似乎卡在顶部。为了解决这个问题，我们需要设置bounce球形精灵的属性。该bounce属性将告诉Phaser与对象碰撞后要维持多少速度。
将此添加到create()函数的末尾：
这告诉Phaser，球应保持其所有X和Y速度。如果我们用空格键释放球，则球应该在游戏世界中上下弹跳。我们需要从游戏世界的底部禁用碰撞检测。
如果我们不这样做，我们将永远不知道比赛何时结束。通过在create函数末尾添加以下行来禁用与游戏世界底部的碰撞：
我们现在应该有一个像这样的游戏：
现在我们的运动精灵已正确地与我们的游戏世界碰撞，让我们开始研究球与砖块之间以及球与球员之间的碰撞。
在我们的create()函数中，将以下代码行添加到末尾：
hitBrick()当ball与各种砖精灵组发生碰撞时，碰撞器方法会告诉Phaser的物理系统执行该功能。
每次按下空格键，球就会向上射击。没有X速度，所以球会直接回到桨上。那将是一个无聊的游戏。因此，当我们第一次碰到一块砖时，我们将设置一个随机的X速度。
在以下breakout.js定义的底部hitBrick：
该hitBrick()函数接受collider()方法中使用的前两个参数，例如ball和violetBricks。该disableBody(true, true)砖上调用告诉Phaser，以使之失去活性，并从屏幕隐藏它。如果球的X速度为0，则根据随机数的值为球赋予速度。
如果一个小球以缓慢的速度向您的脚滚动，则在碰撞时它将停止。默认情况下，Arcade Physics引擎会模拟碰撞对速度的影响。对于我们的游戏，我们不希望球撞到砖头时失去速度。我们需要将immovable属性设置为sprite组true。
更新的定义violetBricks，yellowBricks并redBricks于以下内容：
我们的砖块碰撞现在已经完成，我们的游戏应该像这样工作：
开发技巧-开发游戏的物理原理时，您可能需要启用调试模式，以查看精灵的边界框以及它们如何相互碰撞。在您的游戏config对象中，在arcade我们定义的属性中gravity，您可以通过将其添加到对象中来启用调试功能：
处理球与player之间的碰撞是类似的。首先，确保播放器为immovable。在create()函数的末尾添加以下内容：
然后我们在球和player之间添加一个对撞机：
当球击中球员时，我们希望发生两件事：
球应该移动得更快一些，以逐渐增加比赛难度
球的水平方向取决于击中球员的哪一侧-如果球击中球员的左侧，那么它应该向左走，如果球击中球员的右侧，那么它应该向右走。
为了适应这些情况，让我们更新breakout.js以下hitPlayer()功能：
注意：一个精灵可以与另一个精灵碰撞，一个精灵可以与精灵组碰撞，并且精灵组可以相互碰撞。phaser足够聪明，可以使用我们在上下文中定义的碰撞函数。
现在我们的游戏既有玩家冲突又有砖块冲突：
尽管我们的游戏可以完全正常运行，但是玩此游戏的人却不知道如何开始或不知道游戏何时结束。
让我们在gameStarted声明的顶部添加三个新的全局变量，这些变量将存储我们的文本数据breakout.js：
让我们在加载游戏时添加一些文本，告诉玩家按下空格。在create()函数中添加以下代码：
该text方法的前两个参数是文本框的X和Y坐标。我们使用游戏场景的宽度和高度来确定其放置位置-居中。第三个参数是要显示的文本。第四个参数是包含字体相关数据的JS对象。
与精灵不同，文本对象的X和Y坐标是指对象最左上角的点，而不是其中心。这就是为什么我们使用该setOrigin()方法使坐标系像sprites一样工作，在这种情况下，它使定位在中心更加容易。
在玩游戏时，我们不再希望看到开头文字。在update()函数中，将if检查是否按下空格键的语句更改为以下内容：
文本对象不是精灵，我们不能禁用它们的主体。当我们不需要看到它们时，可以使它们不可见。我们的游戏现在开始如下：
游戏结束和赢得比赛
像之前一样，我们需要在函数中添加文本对象，并使它们不可见，以便在游戏开始时不会看到它们：
现在已定义它们，我们必须在函数中更改其可见性：
我们禁用了球体，因此不再需要更新并显示该球。
如果我们输了比赛，我们将看到：
如果我们赢了比赛，我们将看到以下内容：
我们的打砖块游戏已完成！
Phaser是一个HTML5游戏开发框架，可让我们在网络上快速构建视频游戏。除了通过HTML5 API进行抽象之外，它还为我们提供了有用的实用程序，例如物理引擎，并管理了游戏循环-所有游戏的执行生命周期。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： phaser3从零开始开发一个打砖块游戏分享
本文地址： https://pptw.com/jishu/661562.html