/

設置項目以使用Phaser構建JavaScript遊戲

設置項目以使用Phaser構建JavaScript遊戲

建立一個現代化的項目，並開始使用Phaser 3構建JavaScript HTML5遊戲

Phaser是一個了不起的平台，它使創建遊戲變得非常簡單，還支持物理引擎。它足夠受歡迎，你可以找到插件和工具來更好地構建遊戲並更快地構建遊戲。

它基於HTML5技術，這意味著您可以通過Web進行遊戲分發，並且如果需要，也可以將其打包為桌面或移動應用程序。

遊戲編程是一個大的主題，在這個介紹中，我想談談基本知識，這些基本知識足以創建簡單的遊戲。

在這個教程中，我想詳細介紹一個最佳設置，以使用Phaser 3構建遊戲。

讓我們在文件夾中使用npm安裝phaser：

1
2
npm init -y
npm install phaser

現在讓我們設置 Parcel 來打包我們的遊戲：

1
npm install -g parcel-bundler

現在創建一個 game.js 文件，內容如下：

1
2
3
import Phaser from 'phaser'

new Phaser.Game()

現在運行

1
parcel watch game.js

Parcel將在 dist/game.js 文件中生成我們的JavaScript代碼。

現在創建一個 index.html 文件，內容如下：

1
2
3
4
5
6
<!DOCTYPE html>
<html>
 <head>
   <script src="./dist/game.js"></script>
 </head>
</html>

安裝 browser-sync 以運行一個包含這個文件夾內容的HTTP服務器：

1
npm install -g browser-sync

然後運行

1
browser-sync start --server --files "."

上述命令將監視當前文件夾（和所有子文件夾）中的所有文件的變化，并在端口3000上啟動一個Web服務器，自動打開一個瀏覽器窗口連接到服務器。

每次您更改文件時，瀏覽器將自動刷新。

在我們原型開發遊戲時，這將非常有用。

您現在應該在瀏覽器中看到一個空白屏幕，因為我們初始化了Phaser：

1
2
3
import Phaser from 'phaser'

new Phaser.Game()

但是什麼都沒有發生。

未顯示的畫面

將以下代碼複製到 game.js 中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
import Phaser from 'phaser'

function preload() {
 this.load.setBaseURL('http://labs.phaser.io')
 this.load.image('sky', 'assets/skies/space3.png')
 this.load.image('logo', 'assets/sprites/phaser3-logo.png')
 this.load.image('red', 'assets/particles/red.png')
}

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

 const particles = this.add.particles('red')

 const emitter = particles.createEmitter({
 speed: 100,
 scale: { start: 1, end: 0 },
 blendMode: 'ADD'
 })

 const logo = this.physics.add.image(400, 100, 'logo')

 logo.setVelocity(100, 200)
 logo.setBounce(1, 1)
 logo.setCollideWorldBounds(true)

 emitter.startFollow(logo)
}

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

const game = new Phaser.Game(config)

注意：您可以從https://github.com/photonstorm/phaser3-examples/tree/master/public/assets下載這些資源。

然後您應該很快就會在瀏覽器中看到Phaser示例應用程序運行：

示例應用程序運行

這是Phaser系列的介紹帖子。查看其他帖子。
tags: [“game development”, “JavaScript”, “Phaser”, “HTML5”]