首页 > 代码库 > js+Jquery 制作推箱子小游戏

js+Jquery 制作推箱子小游戏

<!DOCTYPE html><html><head>    <title>Sokaban</title>    <meta charset="utf-8">    <style type="text/css">    .roads {        width: 50px;        height: 50px;        background: url(img/roods.png);        background-size: 100% 100%;    }        .people {        width: 50px;        height: 50px;        background-size: 100% 100%;    }        .box {        background: url(img/box.png) !important;        background-size: 100% 100%;    }        .finish {        background: url(img/finish.png);        background-size: 100% 100%;    }        .walls {        background: url(img/walls.png);        background-size: 100% 100%;    }    </style></head><body></body></html><script type="text/javascript" src=‘js/jquery-3.1.0.js‘></script><script type="text/javascript">sokaban({    "num": 20,    people: people, //人物样式    box: box, //盒子样式    walls: walls, //墙壁样式    finish: finish, //结束样式    roads: roads //路的样式})function sokaban(obj) {    var num = obj.num + 2, //地图大小        people = obj.people, //人物样式        box = obj.box, //盒子样式        walls = obj.walls, //墙壁样式        finish = obj.finish, //结束样式        roads = obj.roads,        $arry = [],        $walls = []; //路的样式    //创建地图    $(body).append(<div id=\"box\"></div>);    $(#box).css({        position: absolute,        top: 50px,        left: 50px,        width: (50 * num) + px,        height: (50 * num) + px    });    //循环出路    for (var m = 0; m < num; m++) {        var top_now = m * 50;        for (n = 0; n < num; n++) {            var left_now = n * 50;            $(#box).append(<div class=\‘ + roads +  check\‘></div>);            $(. + roads).last().css({                position: absolute,                top: (top_now) + px,                left: (left_now) + px            });        }    }    //循环出外墙    for (var k = 1; k <= num * num; k++) {        if (k <= num - 1 || k > num * (num - 1)) {            $(.check).eq(k - 1).addClass(walls);            $walls.push(k - 1);        } else if (k % num == 0 || k % num == 1) {            $(.check).eq(k - 1).addClass(walls);            $walls.push(k - 1);        }    }    //添加按钮    $(<button id=\‘addwalls\‘>添加墙</button>).appendTo(document.body);    $(<button id=\‘remove\‘>删除</button>).appendTo(document.body);    $(<button id=\‘addpeople\‘>添加人</button>).appendTo(document.body);    $(<button id=\‘addend\‘>添加结束</button>).appendTo(document.body);    $(<button id=\‘addbox\‘>添加箱子</button>).appendTo(document.body);    $(<button id=\‘gogo\‘>GO!</button>).appendTo(document.body);    //为按钮绑定事件    $(#remove).click(function() {        $(.check).unbind(click);        $(.check).bind(click, function() {            var flag = 1;            for (var i = 0; i < $walls.length; i++) {                if ($(this).index() == $walls[i]) {                    flag = 0;                }            }            if (flag) {                $(this).attr(class, ‘‘);                $(this).addClass(roads);                $(this).addClass(check);            }        })    });    //添加开始    $(#gogo).click(function() {        gogogo();    });    //添加墙    $(#addwalls).click(function() {        $(.check).unbind(click);        $(.check).bind(click, function() {            if ($(this).hasClass(box) || $(this).hasClass(finish) || $(this).hasClass(people)) {                return;            }            $(this).addClass(walls);        });    });    //添加人    $(#addpeople).click(function() {        $(.check).unbind(click);        $(.check).bind(click, function() {            if ($(. + people).length > 0) {                return;            }            if ($(this).hasClass(box) || $(this).hasClass(finish) || $(this).hasClass(walls)) {                return;            }            $(this).addClass(people);            $(<img src=http://www.mamicode.com/‘img/pig.png/‘>).appendTo($(this));        });    });    //添加终点    $(#addend).click(function() {        $(.check).unbind(click);        $(.check).bind(click, function() {            if ($(. + finish).length > 5) {                alert(不可以大于6!);                return;            }            if ($(this).hasClass(box) || $(this).hasClass(people) || $(this).hasClass(walls)) {                return;            }            $(this).addClass(finish);        });    });    //添加    $(#addbox).click(function() {        $(.check).unbind(click);        $(.check).bind(click, function() {            if ($(. + box).length > 5) {                alert(不可以大于6!);                return;            }            if ($(this).hasClass(finish) || $(this).hasClass(people) || $(this).hasClass(walls)) {                return;            }            $(this).addClass(box);        });    });    function gogogo() {        if ($(. + people).length == 0) {            alert(必须有人!);            return;        }        if ($(. + box).length < 1) {            alert(必须有箱子!);            return;        }        if ($(. + box).length != $(. + finish).length) {            alert(箱子和终点个数必须统一);            return;        }        $(.check).unbind(click);        $(#remove).unbind(click);        $(#addwalls).unbind(click);        $(#addend).unbind(click);        $(#addbox).unbind(click);        $(#gogo).unbind(click);        $(window).keydown(function(event) { //当鼠标按下时,传入事件对象~            switch (event.keyCode) { //获取键值码                case 37: //如果键值码为37,代表着我的键盘上的左键                    move(-1, 90)                    break; //跳出swich                case 38:                    move(-num, 180)                    break; //跳出swich                case 39:                    move(1, -90)                    break; //跳出swich                case 40:                    move(num, 0)                    break; //跳出swich            }        })    }    function move(target, deg) {        var $index = $(. + people).index();        $(.check).eq($index).find(img).css(transform, rotate( + deg + deg));        if ($(.check).eq($index + target).hasClass(walls)) {            return;        } else if ($(.check).eq($index + target).hasClass(box)) {            if ($(.check).eq($index + (target * 2)).hasClass(walls)) {                return;            } else if ($(.check).eq($index + (target * 2)).hasClass(box)) {                return;            }        }        $(.check).eq($index).removeClass(people).find(img).remove();        var $pic = $(<img src=http://www.mamicode.com/‘img/pig.png/‘>);        $pic.css(transform, rotate( + deg + deg));        $(.check).eq($index + target).addClass(people).append($pic);        if ($(.check).eq($index + target).hasClass(box)) {            $(.check).eq($index + target).removeClass(box);            $(.check).eq($index + (target * 2)).addClass(box);            var $trueNum = 0;            for (var z = 0; z < $(.check).length; z++) {                if ($(.check).eq(z).hasClass(finish +   + box)) {                    $trueNum++;                }            }            if ($trueNum == $(. + box).length) {                //在这里,我使用了一个setTimeout是因为,在进行测试的时候,发现在chrome中alert会在我移动完之前就会弹出,导致了先出现了弹框,再执行了移动。firefox中的测试是移动箱子和弹框两者同时进行,为了避免在chrome中出现先弹出对话框再执行代码的问题,我使用了延迟100毫秒的方法。                setTimeout(function() {                    alert(you win);                }, 100);            }        }    }}</script>

 

下面是用到的素材图片:

技术分享技术分享技术分享技术分享技术分享

 

js+Jquery 制作推箱子小游戏