Javascript 特訓-3

這一期梳理一下程序的入口，一個好的入門相當于一個清晰的寫作文檔，定義了你需要實現哪些具體函數。

// 傳入全局變量 this->global
var Engine = (function (global, width, height) {
    // 定義繪制動畫需要的參數
    var doc = global.document,
        win = global.window,
        canvas = doc.createElement('canvas'),
        ctx = canvas.getContext('2d'),
        lastTime;
        // 定義畫布為全局變量，便于其他 JS 文件調用
        global.ctx = ctx;

    // 定義畫布大小
    canvas.width = width;
    canvas.height = height;
    doc.body.appendChild(canvas);

    // 初始化函數
    function init() {
        // 還原
        reset();
        // 時間戳，記錄的是千分之一秒值
        lastTime = Date.now();
        // 主函數
        main();
    }


    // 主函數，畫布不斷刷新，同時更新畫布內容
    function main() {
        var now = Date.now();
        dt = (now - lastTime) / 1000
        // 畫面內容更新，顯示器未更新
        update(dt);
        // 畫面內容渲染，顯示器未更新
        render();
        // 時間戳
        lastTime = now;
        // Javascript 每 1/60 FPS 刷新一次，類似 setTimeout(main, 1000/60)
        win.requestAnimationFrame(main);
    }

    // 還原函數
    function reset() {
        // 游戲重新執行
        // restart();
    }

    // 更新函數
    function update(dt) {
        updateUntities(dt);
        // 檢驗是否發生碰撞
        // checkCollisions();
    }

    // 更新細節
    function updateUntities(dt) {
        // 玩家更新，一個玩家
        player.update();
        // 敵人更新，多個敵人
        allEnemies.forEach(function (enemy) {
            enemy.update(dt);
        });
    }

    // 渲染函數
    function render() {
        var rowImages = [
                'images/water-block.png',   // 第一行圖片
                'images/stone-block.png',   // 第二行圖片
                'images/stone-block.png',   // 第三行圖片
                'images/stone-block.png',   // 第四行圖片
                'images/grass-block.png',   // 第五行圖片
                'images/grass-block.png'    // 第六行圖片
            ],
            rows = 6,
            cols = 5,
            row,
            col;

        // 定位背景圖片位置，圖片大小 101 * 83
        for (row = 0; row < rows; row++) {
            for (col = 0; col < cols; col++) {
                ctx.drawImage(Resources.get(rowImages[row]), col * 101, row * 82);
            }
        }

        // 渲染操作元素
        renderUntities();
    }

    // 渲染操作元素函數
    function renderUntities() {
        // 玩家渲染
        player.render();
        // 敵人渲染
        allEnemies.forEach(function (enemy) {
            enemy.render();
        });
    }

    // 素材加載，用到了上期的 Resources 對象
    Resources.load([
        'images/stone-block.png',
        'images/water-block.png',
        'images/grass-block.png',
        'images/enemy-bug.png',
        'images/char-boy.png'
    ]);

    // 加載完觸發回調函數
    Resources.onReady(init);

})(this, 505, 606);

Canvas 的機制還要多看網站學習下，感覺渲染的特別流暢，功能好強大。下一期開始動畫對象的梳理，可以找畫畫好的人畫幾個有意思的圖片。