<!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=\'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=\'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>

 

下面是用到的素材图片：