标签：
<!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>
下面是用到的素材图片：
标签：
原文地址：http://www.cnblogs.com/superZz/p/5875945.html
