Phaser 入門

  1. 建立一個資料夾
  2. 在新目錄中建立 index.html 。在 Bracket 編輯器中開啟它
  3. github 下載 Phaser 儲存庫,然後從 build 資料夾中獲取 phaser.js 檔案。將檔案放在專案目錄中。
  4. 開啟 index.html 並連結 header 標籤內的 phaser.js
<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" />
    <title>My Gamer</title>    
    
     <script type="text/javascript" src="lib/phaser.js"></script>

    <style type="text/css">
        body {
            margin: 0;
        }
    </style>
    
</head>
<body>    
        <div id="gameContainer"></div>
</body>
</html>
  1. 在名為 game.js 的目錄中建立另一個 js 檔案 **
  2. 在編輯器中開啟 game.js 檔案並編寫以下程式碼:
// Phaser instance, width 800px, height 600px render as CANVAS. 
// Method signature - preload, create and update

var game = new Phaser.Game(800, 600, Phaser.CANVAS,'gameContainer', { preload: preload, create: create, update: update });

function preload() {
// this method used to load your game assets
}

function create() {
// this method run only once used to create to game world
}

function update() {
// this method loop 60 times in a seconds, used to handle gameplay.
}
  1. 儲存所有檔案並使用 Bracket liveserver 開啟 index.html (右上角的圖示)。
  2. 現在已建立 Phaser 開發環境。控制檯螢幕應出現在瀏覽器中以進行錯誤驗證。