教程里的案例我們是通過H5游戲引擎開發，目前H5的游戲引擎比較好用的是白鷺，不過對於新手來說白鷺的開發環境和工具使用過於復雜，這里推薦一個國內大神編寫的游戲引擎：lufylegend。 直接在頁面引入Js文件，就可以開發了，運行效率非常高效，語法是仿AS3語法，懂C#的人上手會很快。
Lufylegend引擎具體的API和使用方法可以參考官網和論壇：
http://www.lufylegend.com/api/zh_CN/out/classes/FPS.html
之前微信上有一款“怪獸必須死”的游戲很火，下面先放幾張我仿這個游戲做的demo的成品運行效果圖：
在接下來的所有系列教程中，我將提供所有游戲圖片素材和源代碼，大家不必擔心沒有素材，不過如果要開發自己的游戲就要自己准備素材了，一定要找個牛X的美工，不然像我這樣就杯具了，一個項目一半時間在自己PS圖片……
好了，廢話不多說，下面正式開始教程：
打開WebStorm，第一次進入時創建新的工程：
左側選擇一個空項目，設置好路徑，點擊創建。
New一個html頁面，並創建文件夾用於存放素材和js文件。
最后結構如圖所示，在對應的文件夾中放入文件（每篇教程結尾處我會上傳相關素材和源碼），我們在圖片中放入一個背景圖片，在js中放入引擎js文件。
在頁面中引入js <script src="js/lufylegend-1.10.1.min.js"></script>
在body標簽中創建一個div，用來顯示游戲。
使用引擎初始化游戲。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/lufylegend-1.10.1.min.js"></script>
<title>Title</title>
</head>
<body style="background-color: black;margin: 0 auto">
<div id="H5_Demo">loading……</div>
</body>
</html>
<script>
//初始化游戲 （游戲幀速度，初始化的div名字，長，寬，初始化調用函數）
init(1000 / 30, "H5_Demo", 480, 800, main);
function main() {
//游戲全屏顯示
LGlobal.stageScale = LStageScaleMode.SHOW_ALL;
LSystem.screen(LStage.FULL_SCREEN);
}
</script>
把鼠標移動到右上角，選擇用谷歌打開。
屏幕一片漆黑，按F12進行debug，發現並沒有報錯，說明初始化成功了，接下來我們添加游戲背景圖片，讓他看起來更醒目：
在main方法中添加如下代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/lufylegend-1.10.1.min.js"></script>
<title>Title</title>
</head>
<body style="background-color:#000;margin: 0 auto">
<div id="H5_Demo">loading……</div>
</body>
</html>
<script>
//初始化游戲 （游戲幀速度，初始化的div名字，長，寬，初始化調用函數）
init(1000 / 30, "H5_Demo", 480, 800, main);
function main() {
//游戲全屏顯示，自適應屏幕
LGlobal.stageScale = LStageScaleMode.SHOW_ALL;
LSystem.screen(LStage.FULL_SCREEN);
//居中
LGlobal.align = LStageAlign.TOP_MIDDLE;
//創建加載類
var loader = new LLoader();
loader.load("images/bg.jpg", "bitmapData");
//添加加載監聽事件，讀取到圖片后創建圖片對象
loader.addEventListener(LEvent.COMPLETE, function (event) {
var bgImgData = new LBitmapData(event.target);
var bgImg = new LBitmap(bgImgData);
//添加圖片到父容器中，這里的父容器沒有特別定義，所以直接成為游戲背景
addChild(bgImg);
});
}
</script>
運行游戲，已經看到了游戲背景，這里圖片加載方式是游戲過程中讀取圖片，比如玩家頭像之類的，並不適用於游戲開始時加載，后面我們將用其他方法一次性加載所有圖片，更便於管理和開發。
當我們放大縮小瀏覽器時發現游戲窗口並沒有隨之變化，用戶的手機不同會致游戲畫面錯亂，所以我們要監聽窗口大小變化並實時控制游戲窗口，在初始化方法外添加如下代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/lufylegend-1.10.1.min.js"></script>
<title>Title</title>
</head>
<body style="background-color:#000;margin: 0 auto">
<div id="H5_Demo">loading……</div>
</body>
</html>
<script>
//初始化游戲 （游戲幀速度，初始化的div名字，長，寬，初始化調用函數）
init(1000 / 30, "H5_Demo", 480, 800, main);
function main() {
//游戲全屏顯示，自適應屏幕
LGlobal.stageScale = LStageScaleMode.SHOW_ALL;
LSystem.screen(LStage.FULL_SCREEN);
//居中
LGlobal.align = LStageAlign.TOP_MIDDLE;
//創建加載類
var loader = new LLoader();
loader.load("images/bg.jpg", "bitmapData");
//添加加載監聽事件，讀取到圖片后創建圖片對象
loader.addEventListener(LEvent.COMPLETE, function (event) {
var bgImgData = new LBitmapData(event.target);
var bgImg = new LBitmap(bgImgData);
//添加圖片到父容器中，這里的父容器沒有特別定義，所以直接成為游戲背景
addChild(bgImg);
});
}
addListeners();
function addListeners() {
window.addEventListener('resize', resize);
}
function resize() {
LGlobal.align = LStageAlign.TOP_MIDDLE;
LGlobal.stageScale = LStageScaleMode.SHOW_ALL;
LSystem.screen(LStage.FULL_SCREEN);
}
</script>
在resize函數中把游戲初始化時對窗口的控制代碼復制過來，一旦瀏覽器大小發生變化，不論是手機端還是pc端，始終能保持游戲窗口大小按比例呈現。
本篇教程到此結束，下一篇教程將講解 游戲中層的概念與設計，敬請期待。
本篇源代碼+素材 下載地址：https://pan.baidu.com/s/1bpL0E4Z