Fork me on GitHub

JS小游戏-蓝色拼图

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

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

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

 

 

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

Oh!蓝色拼图

当前级别：


 

 

 

 

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.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;
 }
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var gameBox;
$(function() {
    gameBox = $("#gameBox");
    loadLevel(1);
 
    $(window).resize(function() {
        setBoxPosition();
    });
});
 
var gameOptions = {
    level: 1,
    border: 15,
    array: []
};
 
function showHowToPlay() {
    bootbox.dialog({
        title: "玩法说明",
        message: "

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

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
",
            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 = "
 
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
";
                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);
        }
    }

 

 

 

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

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

实在不行看源码，哈哈

 

 

 

 

 

 

 

 

.

posted on   上位者的怜悯  阅读(2617)  评论(14)  编辑  收藏  举报

编辑推荐：
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

统计

点击右上角即可分享
微信分享提示
AI IDE Trae
一起组团烧烤秋刀鱼
menu