2小時完成HTML5拼圖小遊戲

Yorhom發表於2016-08-22
HTML遊戲

初學lufylegend.js之日，我用lufylegend.js開發了第一個HTML5小遊戲——拼圖遊戲，還寫了篇博文來炫耀一下：HTML5小遊戲《智力大拼圖》釋出，挑戰你的思維風暴。不過當時初學遊戲開發，經驗淺薄，所以沒有好好專研遊戲裡的演算法和程式碼的缺陷，導致遊戲出現了很多bug，甚至拼圖打亂後很可能無法復原。最近經常有朋友問起這個遊戲，希望我能把程式碼裡的bug改一下方便初學者學習，順便我也打算測試一下自己寫這種小遊戲的速度，所以就抽出了一些時間將這個遊戲從頭到尾重新寫了一遍，計算了一下用時，從準備、修改素材到最後完成遊戲，一共用了大約2h的時間。

以下是遊戲地址：

http://yuehaowang.github.io/games/puzzle/

這是我的遊戲記錄，歡迎各位挑戰：

我的紀錄

接下來就來講講如何開發完成這款遊戲的。（按“編年體”）

準備階段

準備lufylegend遊戲引擎，大家可以去官方網站下載：

lufylegend.com/lufylegend

引擎文件地址：

lufylegend.com/lufylegend/api

可以說，如果沒有強大的lufylegend引擎，這種html5小遊戲用原生canvas製作，少說要一天呢。

0～30min

準備素材（10min） + 修改素材（20min）。由於在下實在手殘，不善於P圖，修改圖片用了大約20min，囧……

30～50min

開發開始介面。遊戲不能沒有開始介面所以我們首先實現這部分程式碼。在此之前是index.html裡的程式碼，程式碼如下：

<!DOCTYPE html>
<html>
<head>
    <title>Puzzle</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <script type="text/javascript" src="./lib/lufylegend-1.10.1.simple.min.js"></script>
    <script type="text/javascript" src="./js/Main.js"></script>
</head>
<body style="margin: 0px; font-size: 0px; background: #F2F2F2;">
    <div id="mygame"></div>
</body>
</html>

主要是引入一些js檔案，不多說。然後準備一個Main.js檔案，在這個檔案裡新增初始化介面和載入資源的程式碼：

/** 初始化遊戲 */
LInit(60, "mygame", 390, 580, main);

var imgBmpd;
/** 遊戲層 */
var stageLayer, gameLayer, overLayer;
/** 拼圖塊列表 */
var blockList;
/** 是否遊戲結束 */
var isGameOver;
/** 用時 */
var startTime, time, timeTxt;
/** 步數 */
var steps, stepsTxt;

function main () {
    /** 全屏設定 */
    if (LGlobal.mobile) {
        LGlobal.stageScale = LStageScaleMode.SHOW_ALL;
    }
    LGlobal.screen(LGlobal.FULL_SCREEN);

    /** 新增載入提示 */
    var loadingHint = new LTextField();
    loadingHint.text = "資源載入中……";
    loadingHint.size = 20;
    loadingHint.x = (LGlobal.width - loadingHint.getWidth()) / 2;
    loadingHint.y = (LGlobal.height - loadingHint.getHeight()) / 2;
    addChild(loadingHint);

    /** 載入圖片 */
    LLoadManage.load(
        [
            {path : "./js/Block.js"},
            {name : "img", path : "./images/img.jpg"}
        ],
        null,
        function (result) {
            /** 移除載入提示 */
            loadingHint.remove();

            /** 儲存點陣圖資料，方便後續使用 */
            imgBmpd = new LBitmapData(result["img"]);

            gameInit();
        }
    );
}

function gameInit (e) {
    /** 初始化舞臺層 */
    stageLayer = new LSprite();
    stageLayer.graphics.drawRect(0, "", [0, 0, LGlobal.width, LGlobal.height], true, "#EFEFEF");
    addChild(stageLayer);

    /** 初始化遊戲層 */
    gameLayer = new LSprite();
    stageLayer.addChild(gameLayer);

    /** 初始化最上層 */
    overLayer = new LSprite();
    stageLayer.addChild(overLayer);

    /** 新增開始介面 */
    addBeginningUI();
}

以上程式碼有詳細註釋，大家可以對照引擎文件和註釋進行閱讀。有些全域性變數會在以後的程式碼中使用，大家可以先忽略。接下來是addBeginningUI函式裡的程式碼，用於實現開始介面：

function addBeginningUI () {
    var beginningLayer = new LSprite();
    beginningLayer.graphics.drawRect(0, "", [0, 0, LGlobal.width, LGlobal.height], true, "#EDEDED");
    stageLayer.addChild(beginningLayer);

    /** 遊戲標題 */
    var title = new LTextField();
    title.text = "拼圖遊戲";
    title.size = 50;
    title.weight = "bold";
    title.x = (LGlobal.width - title.getWidth()) / 2;
    title.y = 160;
    title.color = "#FFFFFF";
    title.lineWidth = 5;
    title.lineColor = "#000000";
    title.stroke = true;
    beginningLayer.addChild(title);

    /** 開始遊戲提示 */
    var hint = new LTextField();
    hint.text = "- 點選螢幕開始遊戲 -";
    hint.size = 25;
    hint.x = (LGlobal.width - hint.getWidth()) / 2;
    hint.y = 370;
    beginningLayer.addChild(hint);

    /** 開始遊戲 */
    beginningLayer.addEventListener(LMouseEvent.MOUSE_UP, function () {
        beginningLayer.remove();

        startGame();
    });
}

到此，執行程式碼，得到我們的開始介面：

開始介面

看到這個畫面，其實我自己都想吐槽一下實在是太“樸素”了，囧……

不過我這次圖個製作速度，所以還望各位看官海量。

50～90min

這40分鐘的時間，是最關鍵時期，期間我們要完成整個遊戲的主體部分。首先，我們需要用程式碼來實現以下過程：

初始化遊戲介面資料（如遊戲時間、所用步數）和顯示一些UI部件（如圖樣）
|
-> 獲取隨機的拼圖塊位置
|
-> 顯示打亂後的拼圖塊

我們將這些步驟做成一個個的函式方便我們統一呼叫：

function startGame () {
    isGameOver = false;

    /** 初始化時間和步數 */
    startTime = (new Date()).getTime();
    time = 0;
    steps = 0;
    /** 初始化拼圖塊列表 */
    initBlockList();
    /** 打亂拼圖 */
    getRandomBlockList();
    /** 顯示拼圖 */
    showBlock();
    /** 顯示縮圖 */
    showThumbnail();
    /** 顯示時間 */
    addTimeTxt();
    /** 顯示步數 */
    addStepsTxt();

    stageLayer.addEventListener(LEvent.ENTER_FRAME, onFrame);
}

函式一開始，我們把isGameOver變數設定為false代表遊戲未結束，在後期的程式碼裡，我們會看到這個變數的作用。接著我們初始化了用於表示時間和步數的time和steps這兩個全域性變數，另外初始化變數startTime的值用於後面計算遊戲時間。
接下來，我們就要開始初始化拼圖塊了。見initBlockList裡的程式碼：

function initBlockList () {
    blockList = new Array();

    for (var i = 0; i < 9; i++) {
        /** 根據序號計算拼圖塊圖片顯示位置 */
        var y = (i / 3) >>> 0, x = i % 3;

        blockList.push(new Block(i, x, y));
    }
}

這裡我們使用了一個Block類，這個類用於顯示拼圖塊和儲存拼圖塊的資料，並提供了一些方法來操控拼圖塊，下面是其構造器的程式碼：

function Block (index, x, y) {
    LExtends(this, LSprite, []);

    var bmpd = imgBmpd.clone();
    bmpd.setProperties(x * 130, y * 130, 130, 130);
    this.bmp = new LBitmap(bmpd);
    this.addChild(this.bmp);

    var border = new LShape();
    border.graphics.drawRect(3, "#CCCCCC", [0, 0, 130, 130]);
    this.addChild(border);

    this.index = index;

    this.addEventListener(LMouseEvent.MOUSE_UP, this.onClick);
}

Block類繼承自LSprite，屬於一個顯示物件，所以我們在這個類中新增了一個點陣圖物件用於顯示拼圖塊對應的圖片。除此之外，我們還為拼圖塊新增了一個邊框，在顯示時用於隔開周圍的拼圖塊。Block類有一個index屬性，代表拼圖塊在拼圖塊列表blockList中的正確位置。最後，我們為此類新增了一個滑鼠按下事件，用於處理滑鼠按下後移動圖塊操作。

接下來我們還要介紹這個類的一個方法setLocation：

Block.prototype.setLocation = function (x, y) {
    this.locationX = x;
    this.locationY = y;

    this.x = x * 130;
    this.y = y * 130;
};

這個方法用於設定拼圖塊物件的顯示位置以及儲存拼圖塊的“陣列位置”。什麼是“陣列位置”呢？各位看官可以通過下面的圖片加以瞭解：

圖解“陣列位置”

可以看到，“陣列位置”就類似於二維陣列中的元素下標。儲存這個位置的作用在於可以很方便地從blockList中獲取到附近的其他拼圖塊。這個方法在我們顯示拼圖時有呼叫到，在顯示拼圖之前，我們得先打亂拼圖，見如下程式碼：

function getRandomBlockList () {
    /** 隨機打亂拼圖 */
    blockList.sort(function () {
        return 0.5 - Math.random();
    });

    /** 計算逆序和 */
    var reverseAmount = 0;

    for (var i = 0, l = blockList.length, preBlock = null; i < l; i++) {
        if (!preBlock) {
            preBlock = blockList[0];

            continue;
        }

        var currentBlock = blockList[i];

        if (currentBlock.index < preBlock.index) {
            reverseAmount++;
        }

        preBlock = currentBlock;
    }

    /** 檢測打亂後是否可還原 */
    if (reverseAmount % 2 != 0) {
        /** 不合格，重新打亂 */
        getRandomBlockList();
    }
}

打亂拼圖部分直接用陣列的sort方法進行隨機打亂：

blockList.sort(function () {
    return 0.5 - Math.random();
});

其實打亂演算法有很多種，我這裡採用最粗暴的方法，也就是隨機打亂。這種演算法簡單是簡單，壞在可能出現無法復原的現象。針對這個問題，就有配套的檢測打亂後是否可還原的演算法，具體的演算法理論我摘用lufy大神的評論：

此類遊戲能否還原關鍵是看它打亂後的逆序次數之和是否為偶數
假設你打亂後的陣列中的每一個小圖塊為obj0，obj1，obj2，…它們打亂之前的序號分別為obj0.num，obj1.num…
接下來迴圈陣列，如果前者的序號比後者大，如obj0.num > obj1.num，這表示一個逆序
當全部的逆序之和為奇數時表示不可還原，重新打亂即可，打亂後重新檢測，直到逆序之和為偶數為止

上面我給出的getRandomBlockList裡的程式碼就是在實現打亂演算法和檢測是否可還原演算法。

還有一種打亂方式，大家可以嘗試嘗試：和復原拼圖一樣，將空白塊一步一步地與周圍的拼圖隨機交換順序。這個打亂演算法較上一種而言，不會出現無法復原的現象，而且可以根據打亂的步數設定遊戲難度。

在完成打亂拼圖塊後，如期而至的是顯示拼圖塊：

function showBlock() {
    for (var i = 0, l = blockList.length; i < l; i++) {
        var b = blockList[i];

        /** 根據序號計算拼圖塊位置 */
        var y = (i / 3) >>> 0, x = i % 3;

        b.setLocation(x, y);

        gameLayer.addChild(b);
    }
}

顯示了拼圖塊後，我們要做的就是新增操作拼圖塊的功能。於是需要擴充Block類，為其新增事件監聽器onClick方法：

Block.prototype.onClick = function (e) {
    var self = e.currentTarget;

    if (isGameOver) {
        return;
    }

    var checkList = new Array();

    /** 判斷右側是否有方塊 */
    if (self.locationX > 0) {
        checkList.push(Block.getBlock(self.locationX - 1, self.locationY));
    }

    /** 判斷左側是否有方塊 */
    if (self.locationX < 2) {
        checkList.push(Block.getBlock(self.locationX + 1, self.locationY));
    }

    /** 判斷上方是否有方塊 */
    if (self.locationY > 0) {
        checkList.push(Block.getBlock(self.locationX, self.locationY - 1));
    }

    /** 判斷下方是否有方塊 */
    if (self.locationY < 2) {
        checkList.push(Block.getBlock(self.locationX, self.locationY + 1));
    }

    for (var i = 0, l = checkList.length; i < l; i++) {
        var checkO = checkList[i];

        /** 判斷是否是空白拼圖塊 */
        if (checkO.index == 8) {
            steps++;
            updateStepsTxt();

            Block.exchangePosition(self, checkO);

            break;
        }
    }
};

首先，我們在這裡看到了isGameOver全域性變數的作用，即在遊戲結束後，阻斷點選拼圖塊後的操作。

在點選了拼圖塊後，我們先獲取該拼圖塊周圍的拼圖塊，並將它們裝入checkList，再遍歷checkList，當判斷到周圍有空白拼圖塊後，即周圍有index屬性等於8的拼圖塊後，先更新操作步數，然後將這兩個拼圖塊交換位置。具體交換拼圖塊位置的方法詳見如下程式碼：

Block.exchangePosition = function (b1, b2) {
    var b1x = b1.locationX, b1y = b1.locationY,
        b2x = b2.locationX, b2y = b2.locationY,
        b1Index = b1y * 3 + b1x,
        b2Index = b2y * 3 + b2x;

    /** 在地圖塊陣列中交換兩者位置 */
    blockList.splice(b1Index, 1, b2);
    blockList.splice(b2Index, 1, b1);

    /** 交換兩者顯示位置 */
    b1.setLocation(b2x, b2y);
    b2.setLocation(b1x, b1y);

    /** 判斷遊戲是否結束 */
    Block.isGameOver();
};

還有就是Block.getBlock靜態方法，用於獲取給定的“陣列位置”下的拼圖塊：

Block.getBlock = function (x, y) {
    return blockList[y * 3 + x];
};

在Block.exchangePosition中，我們通過Block.isGameOver判斷玩家是否已將拼圖復原：

Block.isGameOver = function () {
    var reductionAmount = 0, l = blockList.length;

    /** 計算還原度 */
    for (var i = 0; i < l; i++) {
        var b = blockList[i];

        if (b.index == i) {
            reductionAmount++;
        }
    }

    /** 計算是否完全還原 */
    if (reductionAmount == l) {
        /** 遊戲結束 */
        gameOver();
    }   
};

到這裡，我們就實現了打亂和操作拼圖塊部分。

90～120min

最後30min用於細枝末節上的處理，如顯示拼圖縮圖、顯示&更新時間和步數，以及新增遊戲結束畫面，這些就交給如下冗長而簡單的程式碼來完成吧：

function showThumbnail() {
    var thumbnail = new LBitmap(imgBmpd);
    thumbnail.scaleX = 130 / imgBmpd.width;
    thumbnail.scaleY = 130 / imgBmpd.height;
    thumbnail.x = (LGlobal.width - 100) /2;
    thumbnail.y = 410;
    overLayer.addChild(thumbnail);
}

function addTimeTxt () {
    timeTxt = new LTextField();
    timeTxt.stroke = true;
    timeTxt.lineWidth = 3;
    timeTxt.lineColor = "#54D9EF";
    timeTxt.color = "#FFFFFF";
    timeTxt.size = 18;
    timeTxt.x = 20;
    timeTxt.y = 450;
    overLayer.addChild(timeTxt);

    updateTimeTxt();
}

function updateTimeTxt () {
    timeTxt.text = "時間：" + getTimeTxt(time);
}

function getTimeTxt () {
    var d = new Date(time);

    return d.getMinutes() + " : " + d.getSeconds();
};

function addStepsTxt () {
    stepsTxt = new LTextField();
    stepsTxt.stroke = true;
    stepsTxt.lineWidth = 3;
    stepsTxt.lineColor = "#54D9EF";
    stepsTxt.color = "#FFFFFF";
    stepsTxt.size = 18;
    stepsTxt.y = 450;
    overLayer.addChild(stepsTxt);

    updateStepsTxt();
}

function updateStepsTxt () {
    stepsTxt.text = "步數：" + steps;

    stepsTxt.x = LGlobal.width - stepsTxt.getWidth() - 20;
}

function onFrame () {
    if (isGameOver) {
        return;
    }

    /** 獲取當前時間 */
    var currentTime = (new Date()).getTime();

    /** 計算使用的時間並更新時間顯示 */
    time = currentTime - startTime;
    updateTimeTxt();
}

function gameOver () {
    isGameOver = true;

    var resultLayer = new LSprite();
    resultLayer.filters = [new LDropShadowFilter()];
    resultLayer.graphics.drawRoundRect(3, "#BBBBBB", [0, 0, 350, 350, 5], true,"#DDDDDD");
    resultLayer.x = (LGlobal.width - resultLayer.getWidth()) / 2;
    resultLayer.y = LGlobal.height / 2;
    resultLayer.alpha = 0;
    overLayer.addChild(resultLayer);

    var title = new LTextField();
    title.text = "遊戲通關"
    title.weight = "bold";
    title.stroke = true;
    title.lineWidth = 3;
    title.lineColor = "#555555";
    title.size = 30;
    title.color = "#FFFFFF";
    title.x = (resultLayer.getWidth() - title.getWidth()) / 2;
    title.y = 30;
    resultLayer.addChild(title);

    var usedTimeTxt = new LTextField();
    usedTimeTxt.text = "遊戲用時：" + getTimeTxt(time);
    usedTimeTxt.size = 20;
    usedTimeTxt.stroke = true;
    usedTimeTxt.lineWidth = 2;
    usedTimeTxt.lineColor = "#555555";
    usedTimeTxt.color = "#FFFFFF";
    usedTimeTxt.x = (resultLayer.getWidth() - usedTimeTxt.getWidth()) / 2;
    usedTimeTxt.y = 130;
    resultLayer.addChild(usedTimeTxt);

    var usedStepsTxt = new LTextField();
    usedStepsTxt.text = "所用步數：" + steps;
    usedStepsTxt.size = 20;
    usedStepsTxt.stroke = true;
    usedStepsTxt.lineWidth = 2;
    usedStepsTxt.lineColor = "#555555";
    usedStepsTxt.color = "#FFFFFF";
    usedStepsTxt.x = usedTimeTxt.x;
    usedStepsTxt.y = 180;
    resultLayer.addChild(usedStepsTxt);

    var hintTxt = new LTextField();
    hintTxt.text = "- 點選螢幕重新開始 -";
    hintTxt.size = 23;
    hintTxt.stroke = true;
    hintTxt.lineWidth = 2;
    hintTxt.lineColor = "#888888";
    hintTxt.color = "#FFFFFF";
    hintTxt.x = (resultLayer.getWidth() - hintTxt.getWidth()) / 2;
    hintTxt.y = 260;
    resultLayer.addChild(hintTxt);

    LTweenLite.to(resultLayer, 0.5, {
        alpha : 0.7,
        y : (LGlobal.height - resultLayer.getHeight()) / 2,
        onComplete : function () {
            /** 點選介面重新開始遊戲 */
            stageLayer.addEventListener(LMouseEvent.MOUSE_UP, function () {
                gameLayer.removeAllChild();
                overLayer.removeAllChild();

                stageLayer.removeAllEventListener();

                startGame();
            });
        }
    });
}

Ok，2h下來，整個遊戲就搞定咯～不得不表揚一下lufylegend這個遊戲引擎，實在是可以大幅提升開發效率。

原始碼下載

最後奉上原始碼：點選下載

相關文章