第一步：

// 游戲相關(guān)變量
var validBallCount;// 可用小球數(shù)量晤揣，隨著關(guān)卡上升而增加，有最大限制
var clearTimeoutId;// 定時(shí)器標(biāo)記
var levelBallsArr;// 用于存放關(guān)卡小球的數(shù)組
var score;// 當(dāng)前游戲得分
var level;// 當(dāng)前游戲關(guān)卡
var levelTime;// 關(guān)卡游戲可用時(shí)間默勾，隨著關(guān)卡上升而減少碉渡，有最小限制
var gamePlaying;// 游戲狀態(tài)，標(biāo)記游戲是否正在進(jìn)行

第二步：

/**
 * 創(chuàng)建關(guān)卡
 * 邏輯說(shuō)明：根據(jù)指定的關(guān)卡創(chuàng)建關(guān)卡內(nèi)容
 * 遺留問(wèn)題：創(chuàng)建一個(gè)關(guān)卡的時(shí)候，有一定的機(jī)率出現(xiàn)在創(chuàng)建的時(shí)候所有小球的顏色就已經(jīng)是完全一致了晌坤，怎樣解決盐碱？
 * @param lev 關(guān)卡
 */
function createLevel(lev) {
    level = lev;

    // 如果創(chuàng)建的是第一關(guān)，說(shuō)明是從頭開(kāi)始游戲蹋嵌，需要將游戲得分設(shè)置為0
    if (level === 1) {
        score = 0;
    }

    // 關(guān)卡游戲可用時(shí)間, 每上升一級(jí)，減少1000毫秒，也就是1秒炫隶，最大30秒，最小值5秒
    levelTime = Math.max(5000, 30000 - (level - 1) * 1000);

    // 用于存放關(guān)卡小球的數(shù)組阎曹，每次創(chuàng)建關(guān)卡時(shí)都要重建伪阶，并把創(chuàng)建的小球存放到數(shù)組中以供后面游戲邏輯調(diào)用
    levelBallsArr = [];

    // 可用小球數(shù)量，每上升3關(guān)增加一個(gè)处嫌，最小值為2個(gè)栅贴，最大值為6個(gè)。具體就是熏迹，1-3關(guān)2個(gè)檐薯，4-6關(guān)3個(gè)……。2個(gè)時(shí)注暗，在實(shí)際操作中坛缕，就是點(diǎn)擊一個(gè)小球2次，可回到原來(lái)的顏色捆昏，3個(gè)就是點(diǎn)擊3次回到原來(lái)的顏色赚楚。
    validBallCount = Math.min(6, parseInt(level / 3) + 2);

    // 小球行數(shù)，隨著關(guān)卡上升而增加骗卜，最小值為2直晨，最大值為7
    var row = Math.min(7, 2 + parseInt(level / 2));

    // 小球列數(shù)搀军，隨著關(guān)卡上升而增加，最小值為2勇皇，最大值為4
    var col = Math.min(4, 2 + parseInt(level / 2));

    // 根據(jù)行列數(shù)和小球尺寸來(lái)設(shè)置游戲容器的大小
    gameContainer.style.width = 73 * col + 'px';
    gameContainer.style.height = 73 * row + 'px';

    //使用一個(gè)嵌套循環(huán)來(lái)創(chuàng)建小球
    for (var i = 0; i < row; i++) {
        for (var k = 0; k < col; k++) {
            var img = new Image();// 創(chuàng)建小球圖片Dom元素
            img.style.verticalAlign = 'bottom';// 設(shè)置小球垂直對(duì)齊方式罩句，這是為了解決小球下邊距的問(wèn)題
            var ballType = parseInt(Math.random() * validBallCount + 1);// 計(jì)算小球隨機(jī)類(lèi)型
            img.ballType = ballType;// 記錄小球類(lèi)型
            img.src = 'images/' + ballType + '.png';// 加載小球類(lèi)型對(duì)應(yīng)的小球圖片
            gameContainer.appendChild(img);// 把小球添加到顯示列表
            levelBallsArr.push(img);// 把小球存放到關(guān)卡小球數(shù)組中
        }
    }

    gamePlaying = true;// 設(shè)置游戲狀態(tài)為true

    var logsArr = [
        '創(chuàng)建關(guān)卡:' + level,
        '行數(shù):' + row,
        '列數(shù):' + col,
        '可用小球數(shù):' + validBallCount,
        '限時(shí):' + levelTime / 1000 + '秒'
    ];
    console.log(logsArr.join(' '));
}

第三步：

/**
 * 點(diǎn)擊游戲界面時(shí)調(diào)用的方法
 * @param event
 */
function onGameClick(event) {
    // 獲取被點(diǎn)擊的Dom元素
    var clickDom = event.target;
    // 如果被點(diǎn)擊的Dom元素是有ballType屬性，說(shuō)明點(diǎn)擊的是一個(gè)小球敛摘，進(jìn)入切換小球顏色邏輯
    if (clickDom.ballType) {
        toNextBallType(clickDom);
    }
}

第四步：

/**
 * 切換到下一個(gè)小球類(lèi)型
 * @param ballImg 要切換類(lèi)型的小球Dom元素
 */
function toNextBallType(ballImg) {
    // 先改變ballType屬性：當(dāng)前ballType小于小于可用數(shù)時(shí)门烂，加1，否則直接指定為1
    if (ballImg.ballType < validBallCount) {
        ballImg.ballType = ballImg.ballType + 1;
    } else {
        ballImg.ballType = 1;
    }

    // 根據(jù)ballType兄淫，加載對(duì)應(yīng)的小球圖片
    ballImg.src = 'images/' + ballImg.ballType + '.png';
}