還記得貪吃蛇這個經典游戲嗎？在諾基亞時代，在黑白像素點游戲機時代，就是這樣一個簡單的游戲也能讓我們玩上幾個小時。
還有現在最熱門的h5棋牌平台開發制作Q-2189563389,也都是利用H5開發的
在這篇文章，我們將使用HTML5來重現這個游戲，基於著名的開源HTML5游戲框架——Phaser。你將了解到游戲精靈、游戲狀態，以及如何使用預加載（preload）、創建（create）與刷新（update）方法。最終效果呈現如下：
一、開發准備
首先訪問Phaser官網，下載JavaScript版本的 ，選擇用於生產環境的壓縮版phaser.min.js。
項目文件結構如下：
打開index.html，鏈接五個js文件，並添加頁面標題，啟動游戲時打開此文件即可：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>貪吃蛇</title> <script src="assets/js/phaser.min.js"></script> <script src="assets/js/menu.js"></script> <script src="assets/js/game.js"></script> <script src="assets/js/gameover.js"></script> <script src="assets/js/main.js"></script> <style> body{ padding: 0; margin: 0; } canvas{ margin: 0 auto; } </style> </head> <body> </body> </html>
二、游戲是如何組織的
基於Phaser的游戲是圍繞“狀態（state）”進行組織的，此處的“狀態”可以看作是游戲的不同階段，貪吃蛇游戲的狀態較少，可簡易的分為三個狀態：
菜單狀態，由menu.js處理，僅用於顯示開始界面，點擊轉換到游戲狀態。
游戲狀態，由game.js處理，用於顯示游戲界面、控制貪吃蛇運動，死亡后進入游戲結束狀態。
游戲結束狀態，由gameover.js處理，用於顯示結束界面、最終得分，點擊再次回到游戲狀態。
main.js為主JavaScript文件，在其中創建游戲實例，注冊各個游戲狀態。
1、加載圖像
到現在為止，我們僅僅預構了游戲框架，接下來我們來創建菜單狀態，讓它來顯示游戲開始界面。
在HTML文件中我們已經引入了Phaser庫，這使我們擁有了一個名為Phaser的全局對象，通過這個對象，我們可以訪問Phaser庫中哪些用於構建游戲的方法和函數。
現在我們使用Phaser對象來創建一個游戲實例，這個對象用來代表整個游戲，我們會為他添加不同的狀態。
main.js
// JavaScript Document
var game;
//新建一600px寬、450px高的游戲實例
//Game對象用於管理啟動、創建子系統、運行邏輯、渲染
//第三個參數表示要使用的渲染器
//第四個參數表示父級DOM元素
game = new Phaser.Game(600, 450, Phaser.AUTO, '');
//添加菜單狀態
//第一個參數表示如何調用狀態
//第二個參數是一個包含狀態功能所需方法的對象
game.state.add('Menu', Menu);
game.state.start('Menu');
接下來初始化菜單狀態對象（Menu），在menu.js中定義一個新對象Menu並為它添加函數。狀態啟動時，首先會調用preload函數，加載游戲所需資源；加載完成后，調用create函數，初始化游戲區域以及其他需要初始化的內容。
menu.js
// JavaScript Document
var Menu = {
preload: function () {
//加載圖像以便於在其上添加游戲精靈
//第一個參數表示圖像名稱
//第二個參數表示文件路徑
game.load.image('menu', './assets/images/menu.png');
},
create: function () {
//添加一個游戲精靈，此處添加的精靈為游戲logo
//參數以此為：X,Y,圖像名稱（見上）
this.add.sprite(0,0,'menu');
}
};
到此，在瀏覽器中打開index.html，即可看到游戲開始界面，但還無法點擊。（由於瀏覽器的安全限制，可能無法啟動游戲，那么則需要一個本地web服務器