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=\\'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>
下面是用到的素材图片：