同色消除小游戏关卡和切换小球类型逻辑

第一步：

// 游戏相关变量
var validBallCount;// 可用小球数量，随着关卡上升而增加，有最大限制
var clearTimeoutId;// 定时器标记
var levelBallsArr;// 用于存放关卡小球的数组
var score;// 当前游戏得分
var level;// 当前游戏关卡
var levelTime;// 关卡游戏可用时间，随着关卡上升而减少，有最小限制
var gamePlaying;// 游戏状态，标记游戏是否正在进行

第二步：

/**
 * 创建关卡
 * 逻辑说明：根据指定的关卡创建关卡内容
 * 遗留问题：创建一个关卡的时候，有一定的机率出现在创建的时候所有小球的颜色就已经是完全一致了，怎样解决？
 * @param lev 关卡
 */
function createLevel(lev) {
    level = lev;

    // 如果创建的是第一关，说明是从头开始游戏，需要将游戏得分设置为0
    if (level === 1) {
        score = 0;
    }

    // 关卡游戏可用时间, 每上升一级，减少1000毫秒，也就是1秒，最大30秒，最小值5秒
    levelTime = Math.max(5000, 30000 - (level - 1) * 1000);

    // 用于存放关卡小球的数组，每次创建关卡时都要重建，并把创建的小球存放到数组中以供后面游戏逻辑调用
    levelBallsArr = [];

    // 可用小球数量，每上升3关增加一个，最小值为2个，最大值为6个。具体就是，1-3关2个，4-6关3个……。2个时，在实际操作中，就是点击一个小球2次，可回到原来的颜色，3个就是点击3次回到原来的颜色。
    validBallCount = Math.min(6, parseInt(level / 3) + 2);

    // 小球行数，随着关卡上升而增加，最小值为2，最大值为7
    var row = Math.min(7, 2 + parseInt(level / 2));

    // 小球列数，随着关卡上升而增加，最小值为2，最大值为4
    var col = Math.min(4, 2 + parseInt(level / 2));

    // 根据行列数和小球尺寸来设置游戏容器的大小
    gameContainer.style.width = 73 * col + 'px';
    gameContainer.style.height = 73 * row + 'px';

    //使用一个嵌套循环来创建小球
    for (var i = 0; i < row; i++) {
        for (var k = 0; k < col; k++) {
            var img = new Image();// 创建小球图片Dom元素
            img.style.verticalAlign = 'bottom';// 设置小球垂直对齐方式，这是为了解决小球下边距的问题
            var ballType = parseInt(Math.random() * validBallCount + 1);// 计算小球随机类型
            img.ballType = ballType;// 记录小球类型
            img.src = 'images/' + ballType + '.png';// 加载小球类型对应的小球图片
            gameContainer.appendChild(img);// 把小球添加到显示列表
            levelBallsArr.push(img);// 把小球存放到关卡小球数组中
        }
    }

    gamePlaying = true;// 设置游戏状态为true

    var logsArr = [
        '创建关卡:' + level,
        '行数:' + row,
        '列数:' + col,
        '可用小球数:' + validBallCount,
        '限时:' + levelTime / 1000 + '秒'
    ];
    console.log(logsArr.join(' '));
}

第三步：

/**
 * 点击游戏界面时调用的方法
 * @param event
 */
function onGameClick(event) {
    // 获取被点击的Dom元素
    var clickDom = event.target;
    // 如果被点击的Dom元素是有ballType属性，说明点击的是一个小球，进入切换小球颜色逻辑
    if (clickDom.ballType) {
        toNextBallType(clickDom);
    }
}

第四步：

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

同色消除小游戏关卡和切换小球类型逻辑

推荐阅读更多精彩内容