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

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

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

实在不行看源码,哈哈

.

时间: 2024-10-13 12:35:09

JS小游戏-蓝色拼图的相关文章

js小游戏——看你能坚持多久

点击另存用到的图片. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" > <head

一个js小游戏----总结

花了大概一天左右的功夫实现了一个js小游戏的基本功能,类似于“雷电”那样的小游戏,实现了随即怪物发生器,碰撞检测,运动等等都实现了,下一个功能是子弹轨迹,还有其他一些扩展功能,没有用库,也没有用webGl之类的,单纯的逻辑+对DOM的操作,算是一次试手吧,之所以没有继续去完善,是因为想要整合一下,各个模块要更清晰,大体的设计是按MVC来的,但是对控制器那一块还不满意,设计过程中比较得意的是碰撞检测吧,因为我用了一个数组来维护怪物的生灭,怪物产生则数组push,怪物消失则用splice来从数组中删

js小游戏:五子棋

使用纯js的小游戏,五子棋 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>五子棋</title> 6 <style type="text/css"> 7 *{ 8 padding:0; 9 margin:0; 10 } 11 canvas{ 12 margin:10px; 13 border

JS小游戏----猜拳小游戏

这周学习了JS 的基础数据 函数 和 对象 每一个都是很多的属性和方法 下面是对象做的Xmind 有很多方法 创建对象的方法 遍历对象 添加删除对象中的属性 访问对象的方法 点 中括号 访问法 猜拳游戏 实际原理其实很简单  规则大家全世界都通用 所以 这个游戏 短短几行 switch就可以 把简易的原理实现出来 但是要做的 像一个小游戏一样 能应对各种情况 和 前进 和 后退的操作 加了一些switch 语句 让分支语句更多  是考虑到的情况更加全面  然后用 函数包装 功能模块 列如 判断模

js小游戏

var maps = [[0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0

原生js打飞机小游戏

最近为了巩固一下原生的知识,然后拿了一个js小游戏来入手.主要也是为了学习和练手. js代码如下: 1 window.onload = function(){ 2 var oBtn = document.getElementById('gameBtn'); 3 oBtn.onclick = function(){ 4 this.style.display = 'none'; 5 Game.init('div1');//把父级传进去 6 }; 7 }; 8 //创建Game单体 9 10 var

js消除小游戏(极简版)`

js小游戏极简版 (1) 基础布局 <div class = "box"> <p></p> <div class="div"></div> </div>     (2)简单的基础样式 * { margin: 0; padding: 0; } div.box { width: 1000px; height: 700px; border: 1px solid #008B8B; box-sizing:

仿苹果电脑任务栏菜单&amp;&amp;拼图小游戏&amp;&amp;模拟表单控件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

拼图小游戏之计算后样式与CSS动画的冲突

先说结论: 前几天写了几个非常简单的移动端小游戏,其中一个拼图游戏让我郁闷了一段时间.因为要获取每张图片的位置,用`<style>`标签写的样式,直接获取计算后样式再用来交换位置,结果就悲剧了,出现了一些不理解的情况.这个错误比较低级,不过还是被我遇到了,就拿来记录一下. 注意: 在交换每张图片位置的时候,我对它们设置了CSS中transition属性,有了缓冲动画效果,这样一来,每次打乱图片的时候,用getComputedStyle获取计算后样式,但是,动画有时长,而获取样式在触发时就完成了