從零開始開發一款H5小遊戲(五) 必要的包裝，遊戲規則和場景設計

本系列文章對應遊戲代碼已開源 Sinuous game

到這裏咱們已經講了遊戲的總體設計和實現。一個遊戲要完整，還須要給它制定一個評分機制，它是整個遊戲的關鍵所在。就比如一部電影，特效再好看，若是劇情狗血，那也是一部爛片。

相信你們都玩過一些簡單但很吸引人的小遊戲。好比好久之前微信上的打飛機，圍住神經貓，還有前段時間大火的slither.io。他們都簡單易玩，但卻能讓人腎上腺素飆升，百玩不膩。

因此一款好玩的小遊戲必須具有了這樣的特色，簡單易玩，卻能給人制造緊張感，有時還能利用一些攀比心理。本遊戲也基本具有了這樣的特色。

計分實現

遊戲以秒數做爲計分，隨着時間的增長，Enemy粒子的運動速度會愈來愈快，躲避難度也就愈來愈大。遊戲中的計秒實現比較簡單，就是用setTimeout來實現，這裏不使用setInterval，緣由在第一章已經大體講過了，就是考慮到準確性的問題。

//index.js
function initTimer() {
    holdingTime = 0;
    holdingLevel = 0;
    clearTimeout(timer);
    let time = function() {
        timer = setTimeout(function() {
            holdingTime = +timeEle.innerText + 1;
            timeEle.innerText = holdingTime;
            //每隔10秒加速一次
            if (holdingTime % 10 === 0) {
                holdingLevel++;
                levelEle.innerText = holdingLevel;
                for (let i = 0; i < enemys.length; i++) {
                    //Enemy粒子速度增長
                    enemys[i].speedUp();
                }
            }
            clearTimeout(timer);
            time();
        }, 1000)
    };
    time();
}

每隔10s, Enemy粒子的速度增長一次，Enemy中封裝了speedUp方法。

//Enemy.js
speedUp(speed) {
   this.speed += speed || 0.2;
}

在技能粒子中，有一個護盾粒子。吃了護盾後，撞擊Enemy粒子能增長分數。實現起來也很簡單，直接修改計分板上的分數就好了。

//Player.js
let score = document.getElementById('time').innerText;
document.getElementById('time').innerText = (+score + REDSCORE);

粒子的初始生命值有三條，每次撞擊到Enemy粒子都會減小一條，而若是撞擊到視界的邊界則會直接狗帶。這裏咱們須要增長一個遊戲結束的畫面。給出最後的分數。

開始和結束畫面都是經過DOM實現的，這部分比較簡單，就不作具體介紹了。

其實在遊戲的評分機制上還能夠作不少改進，好比增長排行榜，或記錄本身的最優成績，並可分享到朋友圈等。這部分能夠極大增長遊戲的熱度。 讀者能夠本身展開想象，對玩法進行擴展。

預加載

當我在微信打開遊戲的時候，發現開始畫面和結束畫面的圖片加載很慢。致使DOM結構出來了，圖片卻遲遲沒看到，無法給玩家準確的提示。因此須要增長一個圖片預加載的功能。固然這也是每個網頁遊戲框架必備的功能。

這部分功能直接參考了阿里的一個遊戲框架Hilo，並把它抽象到loader.js。讀者可自行查閱實現細節。

抽象後在入口處預加載所需的圖片：

//index.js
let loader = new Loader();
let source = [
    {src: 'assets/images/number.png'},
    {src: 'assets/images/over.png'},
    {src: 'assets/images/sprites.png'}
];
loader.load(source, function() {
    start(); //開始遊戲
});

預加載的時候還須要有個提示畫面來告知加載進度。

進度條的實現也獨立成一個文件loading.js，並暴露一個外部API給遊戲使用。

咱們還須要將預加載插件和進度條結合起來，每一個圖片加載完成後，loader會觸發一次load事件，用一個計數器統計加載的圖片數，除以總數獲得一個進度比例。而後將這個比例barRatio傳給進度條。讓其渲染出相應的進度。

//根據加載進度渲染進度條
let loaded = 0;
loader.on('load', e => {
    ++loaded;
    barRatio = loaded / source.length;
});

//進度條渲染
(function loading() {
    drawLoading(barRatio);
    if (!loadingFinish) {
        raf(loading);    
    }
})();

須要注意的一點是，進度條是經過canvas畫布實現的。因此進度canvas的draw方法是在不停運行的。若是每張圖片加載完的時候才改變進度條的位置，就會形成進度跳躍式地前進，沒法連續順滑加載的效果。
這個邏輯在loading中經過一個判斷來解決。

//loading.js
let currentBarWidth = bar.total * ratio;
if (bar.width < currentBarWidth) {
    bar.width += 2;
}

保證進度條每次增長只能是2。而不是直接讓bar.width = currentBarWidth;

結語

至此整個遊戲的開發就介紹到這了，主要仍是講遊戲的實現思路。 遊戲中仍是有挺多細節處理的，這些真的要親自動手寫一下才能瞭解。

本教程的初衷就是想讓讀者能對H5遊戲開發有個宏觀的瞭解，知道怎麼入手。想起幾周前本身要寫這個遊戲的時候還無從下手，現在也完成開發並寫了幾篇總結，算是有所沉澱。

其實H5遊戲開發遠比這個複雜，本遊戲只是基於畫筆實現，尚未涉及到圖片的繪製，座標軸轉換等等。還有不少了要學習的東西啊。固然這只是本身一時的興趣嘗試，等何時心血來潮了，說不定再寫一個系列呢。