JS小游戲-藍色拼圖

初見 我是在這里看到這個游戲的

× 請看這里 http://www.webhek.com/misc/inverter.

看到這個小游戲就覺得挺有意思的，於是想要去自己實現它。

 

 

開始 下面的是這個小游戲，大家玩玩看

×Close

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);
        }
    }

 

 

 

Σ( ﾟдﾟ) 上面的代碼一直調不好

我不知道怎么回事，，，大家將就看吧，不知道為什么代碼被分成幾節了...

實在不行看源碼，哈哈

 

 

 

 

 

 

 

 

.