JS小游戏-蓝色拼图

初见 我是在这里看到这个游戏的

看到这个小游戏就觉得挺有意思的，于是想要去自己实现它。

开始 下面的是这个小游戏，大家玩玩看

Oh!蓝色拼图

当前级别：

重置本局 重置级别 玩法说明

以下是代码 写完后自己看着都觉得恶心...很想把它放到一个对象里面，但是太懒了，能用就行(つд⊂)

   .gamebox {        background-color: #4D4D4D;        border-radius: 4px;        height: 200px;        margin: 0 auto;        margin-bottom: 50px;        position: relative;        width: 60%;        max-width:500px;    }    .gamecard {        background-color: rgb(230, 171, 94);        border-radius: 4px;        position: absolute;    }

    var gameBox;    $(function() {        gameBox = $("#gameBox");        loadLevel(1);        $(window).resize(function() {            setBoxPosition();        });    });    var gameOptions = {        level: 1,        border: 15,        array: []    };    function showHowToPlay() {        bootbox.dialog({            title: "玩法说明",            message: "

如何才算赢：使拼板全部变成蓝色。

玩法：每个方块一面橙色，一面蓝色。点击一个方块，这个方块的颜色会翻转，并且，与它邻接的方块的颜色也会翻转。

",            buttons: {                btn: {                    label: "了解",                    className: "btn btn-success"                }            }        });    }    function reloadLevel() {        bootbox.dialog({            title: "确定要这么做么？",            message: "你将要从Lv1重新开始游戏",            buttons: {                cancel: {                    label: "算了",                    className: "btn btn-success"                },                btn: {                    label: "我确定",                    className: "btn btn-danger",                    callback: function() {                        loadLevel(1);                    }                }            }        });    }    function reloadGame() {        bootbox.dialog({            title: "确定要这么做么？",            message: "你将重新开始该等级的游戏",            buttons: {                cancel: {                    label: "算了",                    className: "btn btn-success"                },                btn: {                    label: "我确定",                    className: "btn btn-danger",                    callback: function() {                        loadLevel(gameOptions.level);                    }                }            }        });    }    function fillCard() {        gameBox.empty();        gameOptions.array = [];        for (var x = 0; x < gameOptions.level; x++) {            var row = new Array();            for (var y = 0; y < gameOptions.level; y++) {                var card = "

";                gameBox.append(card); //添加元素                row.push(0);            }            gameOptions.array.push(row); //添加二维数组，定义元素状态，默认全为0        }    }    function setBoxPosition() {        var boxwidth = gameBox.width();        gameBox.height(boxwidth); //宽高相等        var border = gameOptions.border; //间隔宽度        var len = (boxwidth - (gameOptions.level + 1) * border) / gameOptions.level;        for (var x = 0; x < gameOptions.level; x++) {            for (var y = 0; y < gameOptions.level; y++) {                var ele = gameBox.children("div[data-x=" + x + "][data-y=" + y + "]");                var eleX = x * len + (x + 1) * border;                var eleY = y * len + (y + 1) * border;                ele.CSS({ "left": eleX + "px", "top": eleY + "px" });                ele.width(len).height(len);            }        }    }    function loadLevel(level) {        gameOptions.level = level;        fillCard();        setBoxPosition();        $("#tip-level").html(level);    }    function clickCard(x, y) {        changeState(x, y);        changeState(x - 1, y);        changeState(x + 1, y);        changeState(x, y + 1);        changeState(x, y - 1);        checkWin();    }    function changeState(x, y) {        var lel = gameOptions.level;        if (x < 0 || x >= lel || y < 0 || y > lel) {            return;        }        var num = getNum(x, y);        num = num == 1 ? 0 : 1;        setNum(x, y, num); //当前块状态改变        var ele = gameBox.children("div[data-x=" + x + "][data-y=" + y + "]");        ele.css("background-color", num == 1 ? "rgb(92, 144, 255)" : "rgb(230, 171, 94)"); //改变颜色    }    function setNum(x, y, num) {        gameOptions.array[x][y] = num;    }    function getNum(x, y) {        return gameOptions.array[x][y];    }    function checkWin() {        var win = true;        for (var x = 0; x < gameOptions.level; x++) {            for (var y = 0; y < gameOptions.level; y++) {                var num = getNum(x, y);                if (num != 1) {                    win = false;                    break;                }            }            if (!win) break;        }        if (win) {            var lev = gameOptions.level + 1;            makeDialog("完成拼图！", "进入下一关，Lv" + lev, function() {                loadLevel(lev);            }, 10);        }    }

Σ( ?д?) 上面的代码一直调不好

实在不行看源码，哈哈

.