使用Html5+C#+微信開發移動端遊戲詳細教程 :（三）使用html5引擎搭建遊戲框架

時間 2019-11-11

標籤使用 html5+c html 微信開發移動遊戲詳細教程 html5 引擎搭建框架欄目 HTML 简体版

原文原文鏈接

教程裏的案例咱們是經過H5遊戲引擎開發，目前H5的遊戲引擎比較好用的是白鷺，不過對於新手來講白鷺的開發環境和工具使用過於複雜，這裏推薦一個國內大神編寫的遊戲引擎：lufylegend。直接在頁面引入Js文件，就能夠開發了，運行效率很是高效，語法是仿AS3語法，懂C#的人上手會很快。html

Lufylegend引擎具體的API和使用方法能夠參考官網和論壇：api

http://www.lufylegend.com/api/zh_CN/out/classes/FPS.html瀏覽器

以前微信上有一款「怪獸必須死」的遊戲很火，下面先放幾張我仿這個遊戲作的demo的成品運行效果圖：微信

在接下來的全部系列教程中，我將提供全部遊戲圖片素材和源代碼，你們沒必要擔憂沒有素材，不過若是要開發本身的遊戲就要本身準備素材了，必定要找個牛X的美工，否則像我這樣就杯具了，一個項目一半時間在本身PS圖片……函數

好了，廢話很少說，下面正式開始教程：工具

打開WebStorm，第一次進入時建立新的工程：spa

左側選擇一個空項目，設置好路徑，點擊建立。debug

New一個html頁面，並建立文件夾用於存放素材和js文件。設計

最後結構如圖所示，在對應的文件夾中放入文件（每篇教程結尾處我會上傳相關素材和源碼），咱們在圖片中放入一個背景圖片，在js中放入引擎js文件。code

在頁面中引入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>