還記得貪吃蛇這個經典遊戲嗎？在諾基亞時代，在黑白像素點遊戲機時代，就是這樣一個簡單的遊戲也能讓我們玩上幾個小時。
還有現在最熱門的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伺服器