同色消除小游戏界面逻辑

第一步：

// 初始化游戏逻辑
initGame();

第二步：

function initGame() {
    // 添加点击事件监听
    menuContainer.addEventListener('click', startGame);// 在开始菜单界面点击时，开始游戏
    overContainer.addEventListener('click', startGame);// 在游戏结束界面点击时，开始游戏
    gameContainer.addEventListener('click', onGameClick);// 在游戏界面点击时，检测是否点击了小球

    console.log('初始化游戏逻辑完成，请点击开始按钮');
}

第三步：

/**
 * 开始游戏
 * 逻辑说明：显示游戏界面和信息显示栏，隐藏其他界面，清除游戏界面上可能存在的小球，并创建关卡1
 */
function startGame() {
    console.log('开始游戏');

    setVisible(overContainer, false);
    setVisible(menuContainer, false);
    setVisible(gameContainer, true);
    setVisible(infoContainer, true);
    createLevel(1);
}

第四步：

/**
 * 创建关卡
 * @param lev 关卡
 */
function createLevel(lev) {
    console.log('创建游戏关卡：', lev);
}

第五步：

/**
 * 点击游戏界面时调用的方法
 * @param event
 */
function onGameClick(event) {
    gameOver();
}

第六步：

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