简易推箱子游戏
百里修真
* 大概思路（上下左右的代码是差不多的）
· 设置四个变量
· 墙
· 箱子
· 目的地（箱子与目的地个数相同）
· 人
· 判断
· 若人的前面是箱子，箱子前面没有障碍物，则人与箱子一起移动
· 若人的前面是箱子，箱子的前面还是箱子或者是墙，则不动。
· 若人的前面是墙，则不动。
· 人推动箱子，若把全部数量的箱子移动到相同数量目的地则为胜利。
html与css部分
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*小方块50×50，横排11个，竖排11个*/
#div_id{
margin: 0 auto;/*页面居中*/
width: 592px;
height: 592px;
background-color: #8C96A2;
border:1px solid gray;
}
#map_id{
width: 572px;
height: 572px;
background-color: #00FF33;
float: left;
margin: 10px;
}
</style>
</head>
<body>
<div id="div_id">
<div id="map_id">
<div id="box1">
<div id="box1_1"></div>
<div id="box1_2"></div>
<div id="box1_3"></div>
<div id="box1_4"></div>
<div id="box1_5"></div>
<div id="box1_6"></div>
<div id="box1_7"></div>
<div id="box1_8"></div>
<div id="box1_9"></div>
<div id="box1_10"></div>
<div id="box1_11"></div>
</div>
<div id="box2">
<div id="box2_1"></div>
<div id="box2_2"></div>
<div id="box2_3"></div>
<div id="box2_4"></div>
<div id="box2_5"></div>
<div id="box2_6"></div>
<div id="box2_7"></div>
<div id="box2_8"></div>
<div id="box2_9"></div>
<div id="box2_10"></div>
<div id="box2_11"></div>
</div>
<div id="box3">
<div id="box3_1"></div>
<div id="box3_2"></div>
<div id="box3_3"></div>
<div id="box3_4"></div>
<div id="box3_5"></div>
<div id="box3_6"></div>
<div id="box3_7"></div>
<div id="box3_8"></div>
<div id="box3_9"></div>
<div id="box3_10"></div>
<div id="box3_11"></div>
</div>
<div id="box4">
<div id="box4_1"></div>
<div id="box4_2"></div>
<div id="box4_3"></div>
<div id="box4_4"></div>
<div id="box4_5"></div>
<div id="box4_6"></div>
<div id="box4_7"></div>
<div id="box4_8"></div>
<div id="box4_9"></div>
<div id="box4_10"></div>
<div id="box4_11"></div>
</div>
<div id="box5">
<div id="box5_1"></div>
<div id="box5_2"></div>
<div id="box5_3"></div>
<div id="box5_4"></div>
<div id="box5_5"></div>
<div id="box5_6"></div>
<div id="box5_7"></div>
<div id="box5_8"></div>
<div id="box5_9"></div>
<div id="box5_10"></div>
<div id="box5_11"></div>
</div>
<div id="box6">
<div id="box6_1"></div>
<div id="box6_2"></div>
<div id="box6_3"></div>
<div id="box6_4"></div>
<div id="box6_5"></div>
<div id="box6_6"></div>
<div id="box6_7"></div>
<div id="box6_8"></div>
<div id="box6_9"></div>
<div id="box6_10"></div>
<div id="box6_11"></div>
</div>
<div id="box7">
<div id="box7_1"></div>
<div id="box7_2"></div>
<div id="box7_3"></div>
<div id="box7_4"></div>
<div id="box7_5"></div>
<div id="box7_6"></div>
<div id="box7_7"></div>
<div id="box7_8"></div>
<div id="box7_9"></div>
<div id="box7_10"></div>
<div id="box7_11"></div>
</div>
<div id="box8">
<div id="box8_1"></div>
<div id="box8_2"></div>
<div id="box8_3"></div>
<div id="box8_4"></div>
<div id="box8_5"></div>
<div id="box8_6"></div>
<div id="box8_7"></div>
<div id="box8_8"></div>
<div id="box8_9"></div>
<div id="box8_10"></div>
<div id="box8_11"></div>
</div>
<div id="box9">
<div id="box9_1"></div>
<div id="box9_2"></div>
<div id="box9_3"></div>
<div id="box9_4"></div>
<div id="box9_5"></div>
<div id="box9_6"></div>
<div id="box9_7"></div>
<div id="box9_8"></div>
<div id="box9_9"></div>
<div id="box9_10"></div>
<div id="box9_11"></div>
</div>
<div id="box10">
<div id="box10_1"></div>
<div id="box10_2"></div>
<div id="box10_3"></div>
<div id="box10_4"></div>
<div id="box10_5"></div>
<div id="box10_6"></div>
<div id="box10_7"></div>
<div id="box10_8"></div>
<div id="box10_9"></div>
<div id="box10_10"></div>
<div id="box10_11"></div>
</div>
<div id="box11">
<div id="box11_1"></div>
<div id="box11_2"></div>
<div id="box11_3"></div>
<div id="box11_4"></div>
<div id="box11_5"></div>
<div id="box11_6"></div>
<div id="box11_7"></div>
<div id="box11_8"></div>
<div id="box11_9"></div>
<div id="box11_10"></div>
<div id="box11_11"></div>
</div>
</div>
</div>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><!-- 引入jquery包 -->
<script type="text/javascript" src="box.js"></script>
</body>
</html>
js部分
var wall = ['box2_4','box2_5','box2_6','box3_4','box3_6','box4_4','box4_6','box4_7','box4_8',
'box4_9','box5_2','box5_3','box5_4','box5_9','box6_2','box6_7','box6_8','box6_9',
'box7_2','box7_3','box7_4','box7_5','box7_7','box8_5','box8_7','box9_5','box9_6',
'box9_7'];//墙
var box = ['box5_5','box5_7','box6_5','box7_6'];//箱子
var place = ['box3_5','box5_8','box6_3','box8_6'];//目的地
var person = ['box6_6'];//人
//草地
$(function(){
for(var i=1;i<=11;i++){
for(var j=1;j<=11;j++){
$("#box"+i+"_"+j).css({
"width":"50px",
"height":"50px",
"backgroundColor":"#39ffff",
"border":"1px solid black",
"float": "left"});
}
}
});
$(function () {
//墙
for(var i=0;i<wall.length;i++){
$("#"+wall[i]).css("backgroundColor","white");
}
//箱子
for(var i=0;i<box.length;i++){
$("#"+box[i]).css("backgroundColor","yellow");
}
//目的地
for(var i=0;i<place.length;i++){
$("#"+place[i]).css("backgroundColor","black");
}
});
//插入小人图片
$("#box6_6").css("background-image","url('tuixiangzi/box.jpg')");
//键盘监听
$(document).keydown(function(e){
//截取字符串subString
var event = e || event;
var objarr_01 = person.toString().substring(3,4) + "," + person.toString().substring(5,6);
var objarr_02 = objarr_01.split(",");
switch(e.keyCode){
x = objarr_02[0];
y = objarr_02[1] - 1;
//判断若小人前面是墙，则小人不动
if($("#box"+x+"_"+y).css('background-color') == "rgb(255, 255, 255)"){
}
//判断小人前面是否是可移动区域
else if($("#box"+x+"_"+y).css('background-color') == "rgb(57, 255, 255)"){
$("#box"+x+"_"+y).css("background","url('tuixiangzi/box.jpg')");//新地址图片显示
$("#box"+x+"_"+(y+1)).css("background","");//原地址图片消失
$("#box"+x+"_"+(y+1)).css("background-color","rgb(57, 255, 255)");//原地址颜色设置为草地颜色
//更新小人的位置
person = "box" + objarr_02[0] + "_" + (objarr_02[1]-1);
}
//判断小人前面是否是箱子
//再判断，箱子前面是什么
else if($("#box"+x+"_"+y).css('background-color') == "rgb(255, 255, 0)"){
//若是墙则不动
if ($("#box"+x+"_"+(y-1)).css('background-color') == "rgb(255, 255, 255)"){
}
//若是箱子则不动
else if ($("#box"+x+"_"+(y-1)).css('background-color') == "rgb(255, 255, 0)"){
}
//若箱子前面是可移动区域
else if($("#box"+x+"_"+(y-1)).css('background-color') == "rgb(57, 255, 255)"){
$("#box"+x+"_"+(y-1)).css("background-color","rgb(255, 255, 0)");
// $("#box"+x+"_"+y).css("background-color", "transparent");//使漂浮颜色透明
$("#box"+x+"_"+y).css("background","url('tuixiangzi/box.jpg')");
$("#box"+x+"_"+(y+1)).css("background","");//图片消失
$("#box"+x+"_"+(y+1)).css("background-color","rgb(57, 255, 255)");//原地址颜色设置为草地颜色
//更新小人的位置
person = "box" + objarr_02[0] + "_" + (objarr_02[1]-1);
}
//判断若箱子前面是目的地
else if($("#box"+x+"_"+(y-1)).css('background-color') == "rgb(0, 0, 0)"){
$("#box"+x+"_"+(y-1)).css("background-color","rgb(255, 0, 0)");//目的地变成红色
$("#box"+x+"_"+y).css("background","url('tuixiangzi/box.jpg')");
// $("#box"+x+"_"+y).css("background-color", "transparent");
$("#box"+x+"_"+(y+1)).css("background","");//图片消失
$("#box"+x+"_"+(y+1)).css("background-color","rgb(57, 255, 255)");//原地址颜色设置为草地颜色
//更新小人的位置
person = "box" + objarr_02[0] + "_" + (objarr_02[1]-1);
next();
}
}
//判断若小人前面是目的地
else if($("#box"+x+"_"+y).css('background-color') == "rgb(0, 0, 0)"){
$("#box"+x+"_"+y).css("background","url('tuixiangzi/box.jpg')");
$("#box"+x+"_"+(y+1)).css("background","");//图片消失
$("#box"+x+"_"+(y+1)).css("background-color","rgb(57, 255, 255)");//原地址颜色设置为草地颜色
}
break;
case 38://向上
x = objarr_02[0] - 1;
y = objarr_02[1];
//判断若小人前面是墙，则小人不动
if($("#box"+x+"_"+y).css('background-color') == "rgb(255, 255, 255)"){
}
//判断小人前面是否是可移动区域
else if($("#box"+x+"_"+y).css('background-color') == "rgb(57, 255, 255)"){
$("#box"+x+"_"+y).css("background","url('tuixiangzi/box.jpg')");//新地址图片显示
$("#box"+(x+1)+"_"+y).css("background","");//原地址图片消失
$("#box"+(x+1)+"_"+y).css("background-color","rgb(57, 255, 255)");
//更新小人的位置
person = "box" + (objarr_02[0]-1) + "_" + objarr_02[1];
}
//判断小人前面是否是箱子
//再判断，箱子前面是什么
else if($("#box"+x+"_"+y).css('background-color') == "rgb(255, 255, 0)"){
//若是墙则不动
if ($("#box"+(x-1)+"_"+y).css('background-color') == "rgb(255, 255, 255)"){
}
//若是箱子则不动
else if ($("#box"+(x-1)+"_"+y).css('background-color') == "rgb(255, 255, 0)"){
}
//若箱子前面是可移动区域
else if($("#box"+(x-1)+"_"+y).css('background-color') == "rgb(57, 255, 255)"){
$("#box"+(x-1)+"_"+y).css("background-color","rgb(255, 255, 0)");
$("#box"+x+"_"+y).css("background","url('tuixiangzi/box.jpg')");
// $("#box"+x+"_"+y).css("background-color", "transparent");
$("#box"+(x+1)+"_"+y).css("background","");//图片消失
$("#box"+(x+1)+"_"+y).css("background-color","rgb(57, 255, 255)");
//更新小人的位置
person = "box" + (objarr_02[0]-1) + "_" + objarr_02[1];
}
//判断若箱子前面是目的地
else if($("#box"+(x-1)+"_"+y).css('background-color') == "rgb(0, 0, 0)"){
$("#box"+(x-1)+"_"+y).css("background-color","rgb(255, 0, 0)");//目的地变成红色
$("#box"+x+"_"+y).css("background","url('tuixiangzi/box.jpg')");
// $("#box"+x+"_"+y).css("background-color", "transparent");
$("#box"+(x+1)+"_"+y).css("background","");//图片消失
$("#box"+(x+1)+"_"+y).css("background-color","rgb(57, 255, 255)");
//更新小人的位置
person = "box" + (objarr_02[0]-1) + "_" + objarr_02[1];
next();
}
}
//判断若小人前面是目的地
else if($("#box"+x+"_"+y).css('background-color') == "rgb(0, 0, 0)"){
$("#box"+x+"_"+y).css("background","url('tuixiangzi/box.jpg')");
$("#box"+(x+1)+"_"+y).css("background","");//图片消失
$("#box"+(x+1)+"_"+y).css("background-color","rgb(57, 255, 255)");
}
break;
case 39://向右
x = objarr_02[0];
y = (parseInt(objarr_02[1])) + 1;
//判断若小人前面是墙，则小人不动
if($("#box"+x+"_"+y).css('background-color') == "rgb(255, 255, 255)"){
}
//判断小人前面是否是可移动区域
else if($("#box"+x+"_"+y).css('background-color') == "rgb(57, 255, 255)"){
$("#box"+x+"_"+y).css("background","url('tuixiangzi/box.jpg')");//新地址图片显示
$("#box"+x+"_"+(y-1)).css("background","");//原地址图片消失
$("#box"+x+"_"+(y-1)).css("background-color","rgb(57, 255, 255)");
//更新小人的位置
person = "box" + objarr_02[0] + "_" + ((parseInt(objarr_02[1])) + 1);
}
//判断小人前面若是箱子
//再判断，箱子前面是什么
else if($("#box"+x+"_"+y).css('background-color') == "rgb(255, 255, 0)"){
//若是墙则不动
if ($("#box"+x+"_"+(y+1)).css('background-color') == "rgb(255, 255, 255)"){
}
//若是箱子则不动
else if ($("#box"+x+"_"+(y+1)).css('background-color') == "rgb(255, 255, 0)"){
}
//若箱子前面是可移动区域
else if($("#box"+x+"_"+(y+1)).css('background-color') == "rgb(57, 255, 255)"){
$("#box"+x+"_"+(y+1)).css("background-color","rgb(255, 255, 0)");
$("#box"+x+"_"+y).css("background","url('tuixiangzi/box.jpg')");
// $("#box"+x+"_"+y).css("background-color", "transparent");
$("#box"+x+"_"+(y-1)).css("background","");//图片消失
$("#box"+x+"_"+(y-1)).css("background-color","rgb(57, 255, 255)");
//更新小人的位置
person = "box" + objarr_02[0] + "_" + ((parseInt(objarr_02[1])) + 1);//box05_051
}
//判断若箱子前面是目的地
else if($("#box"+x+"_"+(y+1)).css('background-color') == "rgb(0, 0, 0)"){
$("#box"+x+"_"+(y+1)).css("background-color","rgb(255, 0, 0)");//目的地变成红色
$("#box"+x+"_"+y).css("background","url('tuixiangzi/box.jpg')");
// $("#box"+x+"_"+y).css("background-color", "transparent");
$("#box"+x+"_"+(y-1)).css("background","");//图片消失
$("#box"+x+"_"+(y-1)).css("background-color","rgb(57, 255, 255)");
//更新小人的位置
person = "box" + objarr_02[0] + "_" + ((parseInt(objarr_02[1])) + 1);//box05_051
next();
}
}
//判断若小人前面是目的地
else if($("#box"+x+"_"+y).css('background-color') == "rgb(0, 0, 0)"){
$("#box"+x+"_"+y).css("background","url('tuixiangzi/box.jpg')");
$("#box"+x+"_"+(y-1)).css("background","");//图片消失
$("#box"+x+"_"+(y-1)).css("background-color","rgb(57, 255, 255)");
}
break;
case 40://向下
x = (parseInt(objarr_02[0])) + 1;
y = objarr_02[1];
//判断若小人前面是墙，则小人不动
if($("#box"+x+"_"+y).css('background-color') == "rgb(255, 255, 255)"){
}
//判断小人前面是否是可移动区域
else if($("#box"+x+"_"+y).css('background-color') == "rgb(57, 255, 255)"){
$("#box"+x+"_"+y).css("background","url('tuixiangzi/box.jpg')");//新地址图片显示
$("#box"+(x-1)+"_"+y).css("background","");//原地址图片消失
$("#box"+(x-1)+"_"+y).css("background-color","rgb(57, 255, 255)");
//更新小人的位置
person = "box" + ((parseInt(objarr_02[0])) + 1) + "_" + objarr_02[1];
}
//判断小人前面是否是箱子
//再判断，箱子前面是什么
else if($("#box"+x+"_"+y).css('background-color') == "rgb(255, 255, 0)"){
//若是墙则不动
if ($("#box"+(x+1)+"_"+y).css('background-color') == "rgb(255, 255, 255)"){
}
//若是箱子则不动
else if ($("#box"+(x+1)+"_"+y).css('background-color') == "rgb(255, 255, 0)"){
}
//若箱子前面是可移动区域
else if($("#box"+(x+1)+"_"+y).css('background-color') == "rgb(57, 255, 255)"){
$("#box"+(x+1)+"_"+y).css("background-color","rgb(255, 255, 0)");
$("#box"+x+"_"+y).css("background","url('tuixiangzi/box.jpg')");
// $("#box"+x+"_"+y).css("background-color", "transparent");
$("#box"+(x-1)+"_"+y).css("background","");//图片消失
$("#box"+(x-1)+"_"+y).css("background-color","rgb(57, 255, 255)");
//更新小人的位置
person = "box" + ((parseInt(objarr_02[0])) + 1) + "_" + objarr_02[1];
}
//判断若箱子前面是目的地
else if($("#box"+(x+1)+"_"+y).css('background-color') == "rgb(0, 0, 0)"){
$("#box"+(x+1)+"_"+y).css("background-color","rgb(255, 0, 0)");//目的地变成红色
$("#box"+x+"_"+y).css("background","url('tuixiangzi/box.jpg')");
// $("#box"+x+"_"+y).css("background-color", "transparent");
$("#box"+(x-1)+"_"+y).css("background","");//图片消失
$("#box"+(x-1)+"_"+y).css("background-color","rgb(57, 255, 255)");
//更新小人的位置
person = "box" + ((parseInt(objarr_02[0])) + 1) + "_" + objarr_02[1];
next();
}
}
//判断若小人前面是目的地
else if($("#box"+x+"_"+y).css('background-color') == "rgb(0, 0, 0)"){
$("#box"+x+"_"+y).css("background","url('tuixiangzi/box.jpg')");
$("#box"+(x-1)+"_"+y).css("background","");//图片消失
$("#box"+(x-1)+"_"+y).css("background-color","rgb(57, 255, 255)");
}
break;
}
});
function next() {
var num = 0;
for(var i=0;i<place.length;i++) {
if($("#"+place[i]).css('background-color') == "rgb(255, 0, 0)") {
num++;
}
}
if(num == place.length) {
setTimeout('alert("成功")', 50);
}
}
类似资料：