JS小游戏-蓝色拼图

浏览数：28 / 时间：2015年06月09日

请看这里 http://www.webhek.com/misc/inverter.

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

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

我不知道怎么回事，，，大家将就看吧，不知道为什么代码被分成几节了...

实在不行看源码，哈哈

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

JS小游戏-蓝色拼图