第一步：
/**
* 切换到下一个小球类型
* @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);
}
