同色消除小游戏完整项目

第一步：

/**
 * 切换到下一个小球类型
 * @param ballImg 要切换类型的小球Dom元素
 */
function toNextBallType(ballImg) {
    // 先改变ballType属性：当前ballType小于小于可用数时，加1，否则直接指定为1
    if (ballImg.ballType < validBallCount) {
        ballImg.ballType = ballImg.ballType + 1;
    } else {
        ballImg.ballType = 1;
    }

    // 根据ballType，加载对应的小球图片
    ballImg.src = 'images/' + ballImg.ballType + '.png';

    // 清除上一次定时器
    clearTimeout(clearTimeoutId);

    // 设定一个定时器，300毫秒后执行关卡完成逻辑检测。为什么要300毫秒后检测？因为如果切换后马上检测并清理，计算机将会非常快执行，玩家还没有来得及看清小球变化就已经被清理掉了，体验不好。
    clearTimeoutId = setTimeout(checkIfLevelUp, 300);

    console.log('已切换到下一个小球类型：' + ballImg.ballType);
}

第二步：

/**
 * 检查是否已完成关卡
 */
function checkIfLevelUp() {
    if (!gamePlaying) {
        return;
    }

    console.log('检查是否已完成关卡');

    // 获取本关第一个小球，并判断所有小球的ballType是否与第一个小球相等，如果全相等，说明关卡完成
    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('所有小球颜色不完全一致，关卡未完成，请继续。');
        return;
    }

    // 如果关卡完成，计算本关得分，清除所有小球，并进入下一关。
    console.log('关卡' + level + '已完成，将结算本关，并进入下一关');
    score += Math.max(1, parseInt(levelTime / 1000));
    clearBalls(levelBallsArr);
    createLevel(level + 1);
}

第三步：

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

第四步：

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

第五步：

/**
 * 循环执行的定时器，40的意思是40毫秒执行一次，相当于每秒执行25次。主要是为了循环检测倒计时是否结束，及刷新信息栏的显示。
 */
setInterval(onInterval, 40);

function onInterval() {
    // 如果是非游戏状态，是不需要执行此方法的
    if (gamePlaying) {
        levelTime -= 25;
        if (levelTime <= 0) {
            console.log('时间到，游戏结束！');
            gameOver();
        }
        updateInfoView();// 刷新信息栏的显示
    }
}

第六步：

/**
 * 游戏结束，设置游戏状态为false，弹出游戏结束界面，隐藏其它界面，并显示最终得分
 */
function gameOver() {
    console.log('显示游戏结束界面！');
    gamePlaying = false;
    overContainer.innerText = '游戏结束\n\n得分：' + score + '\n\n\n重新开始';
    setVisible(overContainer, true);
    setVisible(gameContainer, false);
    setVisible(infoContainer, false);
}