第一步：

/**
 * 切換到下一個(gè)小球類型
 * @param ballImg 要切換類型的小球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';

    // 清除上一次定時(shí)器
    clearTimeout(clearTimeoutId);

    // 設(shè)定一個(gè)定時(shí)器，300毫秒后執(zhí)行關(guān)卡完成邏輯檢測(cè)。為什么要300毫秒后檢測(cè)？因?yàn)槿绻袚Q后馬上檢測(cè)并清理，計(jì)算機(jī)將會(huì)非常快執(zhí)行，玩家還沒有來(lái)得及看清小球變化就已經(jīng)被清理掉了，體驗(yàn)不好。
    clearTimeoutId = setTimeout(checkIfLevelUp, 300);

    console.log('已切換到下一個(gè)小球類型：' + ballImg.ballType);
}

第二步：

/**
 * 檢查是否已完成關(guān)卡
 */
function checkIfLevelUp() {
    if (!gamePlaying) {
        return;
    }

    console.log('檢查是否已完成關(guān)卡');

    // 獲取本關(guān)第一個(gè)小球，并判斷所有小球的ballType是否與第一個(gè)小球相等，如果全相等，說(shuō)明關(guān)卡完成
    var firstBall = levelBallsArr[0];
    var ballsCount = levelBallsArr.length;
    var levelComplete = true;
    for (var i = 0; i < ballsCount; i++) {
        if (levelBallsArr[i].ballType !== firstBall.ballType) {
            levelComplete = false;
            break
        }
    }

    if (!levelComplete) {
        console.log('所有小球顏色不完全一致，關(guān)卡未完成，請(qǐng)繼續(xù)。');
        return;
    }

    // 如果關(guān)卡完成，計(jì)算本關(guān)得分，清除所有小球，并進(jìn)入下一關(guān)。
    console.log('關(guān)卡' + level + '已完成，將結(jié)算本關(guān)，并進(jìn)入下一關(guān)');
    score += Math.max(1, parseInt(levelTime / 1000));
    clearBalls(levelBallsArr);
    createLevel(level + 1);
}

第三步：

/**
 * 根據(jù)指定數(shù)據(jù)，清除所有小球
 * @param ballsArr 需要清除的小球數(shù)組
 */
function clearBalls(ballsArr) {
    if (ballsArr) {
        console.log('清除所有小球');
        var length = ballsArr.length;
        for (var i = 0; i < length; i++) {
            ballsArr[i] && ballsArr[i].remove();
        }
    }
}

第四步：

/**
 * 根據(jù)指定數(shù)據(jù)，清除所有小球
 * @param ballsArr 需要清除的小球數(shù)組
 */
function clearBalls(ballsArr) {
    if (ballsArr) {
        console.log('清除所有小球');
        var length = ballsArr.length;
        for (var i = 0; i < length; i++) {
            ballsArr[i] && ballsArr[i].remove();
        }
    }
}

第五步：

/**
 * 循環(huán)執(zhí)行的定時(shí)器，40的意思是40毫秒執(zhí)行一次，相當(dāng)于每秒執(zhí)行25次。主要是為了循環(huán)檢測(cè)倒計(jì)時(shí)是否結(jié)束，及刷新信息欄的顯示。
 */
setInterval(onInterval, 40);

function onInterval() {
    // 如果是非游戲狀態(tài)，是不需要執(zhí)行此方法的
    if (gamePlaying) {
        levelTime -= 25;
        if (levelTime <= 0) {
            console.log('時(shí)間到，游戲結(jié)束！');
            gameOver();
        }
        updateInfoView();// 刷新信息欄的顯示
    }
}

第六步：

/**
 * 游戲結(jié)束，設(shè)置游戲狀態(tài)為false，彈出游戲結(jié)束界面，隱藏其它界面，并顯示最終得分
 */
function gameOver() {
    console.log('顯示游戲結(jié)束界面！');
    gamePlaying = false;
    overContainer.innerText = '游戲結(jié)束\n\n得分：' + score + '\n\n\n重新開始';
    setVisible(overContainer, true);
    setVisible(gameContainer, false);
    setVisible(infoContainer, false);
}