初始化框架
這是學習如何使用 Gamedev Phaser 的 16 個教程中的第一個。在開始編寫遊戲功能之前，我們需要建立一個基本的結構來渲染遊戲。這可以透過 HTML 來完成——Phaser 框架將生成所需的 <canvas> 元素。
遊戲的 HTML
HTML 文件結構非常簡單，因為遊戲將完全渲染在框架生成的 <canvas> 元素上。使用您喜歡的文字編輯器，建立一個新的 HTML 文件，將其儲存為 index.html，放在一個合理的位置，並新增以下程式碼：
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>Gamedev Phaser Workshop - lesson 01: Initialize the framework</title>
<style>
* {
padding: 0;
margin: 0;
}
</style>
<script src="js/phaser.min.js"></script>
<script src="js/script.js" defer></script>
</head>
<body></body>
</html>
並在與 index.html 檔案相同的位置建立一個新的 js 目錄，並在其中建立一個名為 script.js 的新檔案。我們將在其中編寫控制遊戲的 JavaScript 程式碼。最初它應該包含以下內容：
class ExampleScene extends Phaser.Scene {
preload() {}
create() {}
update() {}
}
const config = {
type: Phaser.CANVAS,
width: 480,
height: 320,
scene: ExampleScene,
};
const game = new Phaser.Game(config);
下載 Phaser 程式碼
接下來，我們需要下載 Phaser 原始碼並將其應用到我們的 HTML 文件中。本教程使用 Phaser v3（撰寫本文時為 v3.90.0，但較新的次要版本應該工作方式相同）。
- 轉到 Phaser 下載頁面。
- 選擇最適合您的選項——我們推薦 phaser.min.js 選項，因為它使原始碼更小，而且您不太可能檢視原始碼。
- 將 Phaser 程式碼儲存在
js目錄中。如果您使用其他檔名，請確保相應地更新 HTML 中第一個<script>元素的src值。
回顧到目前為止的進展
此時，我們已經定義了 charset、<title>，並在 header 中添加了一些基本的 CSS 來重置預設的 margin 和 padding。我們還有一個 <script> 元素用於將 Phaser 原始碼應用到頁面。body 包含第二個 <script> 元素，我們將在其中編寫用於渲染和控制遊戲的 JavaScript 程式碼。
<canvas> 元素由框架自動生成。我們透過建立一個新的 Phaser.Game 物件並將其分配給 game 變數來初始化它。引數是：
- 渲染方法。可用選項是
AUTO、CANVAS、WEBGL、HEADLESS。我們可以顯式設定CANVAS或WEBGL，或者使用AUTO讓 Phaser 決定使用哪一個。它通常會使用瀏覽器中可用的 WebGL，如果不可用則回退到 Canvas 2D。最後一個選項HEADLESS用於伺服器端渲染或測試，這與本教程無關。 - 設定
<canvas>的寬度和高度。 - 要新增到遊戲中的場景。在這種情況下，我們正在建立一個名為
ExampleScene的新類，該類繼承自Phaser.Scene。這個類實現了 Phaser 在遊戲生命週期的不同階段呼叫的方法。我們將在其中填充這些方法。preload負責預載入資源create在所有內容載入並準備就緒後執行一次update在每一幀執行。
執行應用程式
要執行應用程式，您不能直接開啟 index.html 檔案，因為稍後我們將載入外部資源，這些資源將被瀏覽器的 同源策略 阻止。
為了解決這個問題，您需要執行一個本地 Web 伺服器來提供 HTML 檔案和影像檔案。 正如 Phaser 的官方文件所建議的，我們有很多選項可以執行本地 Web 伺服器。我們也有自己的 關於設定本地伺服器的教程——請隨意選擇您喜歡的任何選項。例如，如果您選擇使用 Python HTTP 伺服器，則開啟終端，導航到 index.html 檔案所在的目錄，然後執行以下命令：
python3 -m http.server
這將啟動一個在埠 8000 上的簡單 HTTP 伺服器。然後，開啟您的 Web 瀏覽器並導航到 https://:8000/index.html。
Compare your code
這是您到目前為止應該看到的效果，即時執行。要檢視其原始碼，請單擊“播放”按鈕。
後續步驟
現在我們已經設定了基本的 HTML 並對 Phaser 初始化有了一點了解，讓我們繼續第二個課程，學習 縮放。