js实现的推箱子小游戏（转）_怎么用javascript做推箱子-CSDN博客

<html>
<body>
<div id="cell"></div>
<script type="text/javascript" src="dom.jS"></script>
</body>
</html>

以下是Javascript代码段：

function $id(id){return document.getElementById(id)};
function $name(name){return document.getElementsByName(name)};
//定义地图开始
var box =[]
var map1 = [
[0,0,0,1,1,1,0,0,0,0],
[0,0,0,1,4,1,0,0,0,0],
[0,0,0,1,0,1,1,1,1,0],
[0,1,1,1,2,0,2,4,1,0],
[0,1,4,0,2,3,1,1,1,0],
[0,1,1,1,1,2,1,0,0,0],
[0,0,0,0,1,4,1,0,0,0],
[0,0,0,0,1,1,1,0,0,0]
]
var map2 = [
[1,1,1,1,1,0,0,0,0,0],
[1,0,0,0,1,0,0,0,0,0],
[1,0,2,2,1,0,1,1,1,0],
[1,3,2,0,1,0,1,4,1,0],
[1,1,1,0,1,1,1,4,1,0],
[0,1,1,0,0,0,0,4,1,0],
[0,1,0,0,0,1,0,0,1,0],
[0,1,0,0,0,1,1,1,1,0],
[0,1,1,1,1,1,0,0,0,0]
]
box.push(map1);
box.push(map2);
//定义地图结束
//定义游戏配置开始
var gameConfig={
"person":{//定义人物配置
"x":0,
"y":0,
"id":"person"
},
"map" : 0,//定义地图
"endpointNumber":0, /*用来存储当前关卡的终点数目, 见 createGame函数 switch case 4 .*/
"box":{//定义每个div的参数
"x":"50",
"y":"50"
},
"ko" : 0 ,//定义箱子是否在终点上
};
//定义游戏配置结束
//创建游戏开始
function createGame(){
//定义控制整体的div，用于当本关结束后消除上一关的地图。
$id("cell").innerHTML="";
$id("cell").style.position="absolute";
$id("cell").left ="0px";
$id("cell").top = "0px";
//定义控制整体div结束
//创建游戏循环
for(var i=0;i<box[gameConfig.map].length;i++){
for(var j=0;j<box[gameConfig.map][i].length;j++){
var itemdiv = document.createElement("div");
itemdiv.style.width = gameConfig.box.x + "px";
itemdiv.style.height = gameConfig.box.y + "px";
itemdiv.style.left = gameConfig.box.x*j + "px";
itemdiv.style.top = gameConfig.box.y*i + "px" ;
itemdiv.setAttribute("name",i+"_"+j);
itemdiv.style.position="absolute";
$id("cell").appendChild(itemdiv);
switch(box[gameConfig.map][i][j]){
case 0:
itemdiv.style.background = "#000";
//itemdiv.innerHTML="背景";
break;

case 1:
itemdiv.style.background = "#996633";
break;

case 2:
itemdiv.style.background = "yellow";
itemdiv.innerHTML = "箱子";
break;
case 3:
itemdiv.id = gameConfig.person.id;
itemdiv.style.background = "#fff";
itemdiv.innerHTML = "人物";
gameConfig.person.x = j;//设置人物在二维数组的位置
gameConfig.person.y = i;//设置人物在二维数组的位置
break;
case 4:
itemdiv.setAttribute("endPoint","1");//设置终点标识符
itemdiv.style.background = "green";
itemdiv.innerHTML = "终点";
gameConfig.endpointNumber++; //获取每一关的终点数目
}
}
}
};
createGame();
//创建游戏结束
//移动函数开始
function judgeGame(oy,ox,y,x,isperson){
if (gameConfig.ko == gameConfig.endpointNumber) { //用最开始的获取到本关终点数目来对是否本关的箱子都在终点上面进行比较。
alert("游戏结束");
gameConfig.map ++;//控制地图
gameConfig.ko = 0;//设置箱子在终点的变量
gameConfig.endpointNumber=0;//设置终点数目变量
createGame();//调用createGame()
}else{
var original = document.getElementsByName(oy+"_"+ox)[0]; //获取原始的位置。
var target = document.getElementsByName(y+"_"+x)[0];//获取目标div的位置
original.style.top = y * gameConfig.box.y + "px";//设置原始位置的left和top
original.style.left = x *gameConfig.box.x + "px";
target.style.top = oy * gameConfig.box.y + "px";//设置目标位置的left和top
target.style.left = ox * gameConfig.box.x + "px";
original.setAttribute("name",y+"_"+x);//设置原始位置的name属性，互换原始位置和目标位置的name
target.setAttribute("name",oy+"_"+ox);
var tmp = box[gameConfig.map][oy][ox];//设置二维数组，对换原始目标
box[gameConfig.map][oy][ox] = box[gameConfig.map][y][x];
box[gameConfig.map][y][x] = tmp;
if (isperson) {//检测是不是person，如果是，那么就改变游戏配置的person配置
gameConfig.person.y = y;
gameConfig.person.x = x;
};
InspectionEndPoint(original,target,isperson);//调用检测终点函数
}
};
function InspectionEndPoint(original,target,isperson){
if (original.getAttribute("endPoint") == "1" && target.getAttribute("endPoint") == "1") {
//检测原始位置和目标位置的是否具有终点属性，也就是检测是不是站在终点上。如果是，那么就return false返回，因为不需要更改任何的
return false;
};
if (original.getAttribute("endPoint") == "1") { //检测原始是不是站在终点之上，如果是，先移除原始的终点检测属性。并设置目标终点属性，并设置目标颜色为绿色并返回
original.removeAttribute("endPoint");
target.setAttribute("endPoint","1");
target.style.background = "green";
return false;
};
if (target.getAttribute("endPoint") == "1") { //检测目标是不是终点，如果是，先移除目标的终点检测属性，并设置原始终点属性，并叫目标颜色调整为黑色并返回。
original.setAttribute("endPoint","1");
target.removeAttribute("endPoint");
target.style.background = "black";
if (isperson == false) {//检测是不是人物，如果不是，那么可移动的只有箱子，所以这里该增加ko。
gameConfig.ko ++
return false;
};
return false;
};
};
function startGame(){
document.οnkeydοwn=function(e){
var zx = gameConfig.person.x;
var zy = gameConfig.person.y;
switch(e.keyCode){
case 37:
//console.log(box[gameConfig.map]);
switch(box[gameConfig.map][zy][zx-1]){
case 0:
judgeGame(zy,zx,zy,zx-1,true);
break;
case 2:
if(box[gameConfig.map][zy][zx-2] == 0){
judgeGame(zy,zx-1,zy,zx-2,false);
judgeGame(zy,zx,zy,zx-1,true);
}
if(box[gameConfig.map][zy][zx-2] == 4){
judgeGame(zy,zx-1,zy,zx-2,false);
judgeGame(zy,zx,zy,zx-1,true);
}
break;
case 4:
judgeGame(zy,zx,zy,zx-1,true);
break;
}
break;
case 38:
switch(box[gameConfig.map][zy-1][zx]){
case 0:
judgeGame(zy,zx,zy-1,zx,true);
break;
case 2:
if(box[gameConfig.map][zy-2][zx] == 0){
judgeGame(zy-1,zx,zy-2,zx,false);
judgeGame(zy,zx,zy-1,zx,true);
}
if(box[gameConfig.map][zy-2][zx] == 4){
judgeGame(zy-1,zx,zy-2,zx,false);
judgeGame(zy,zx,zy-1,zx,true);
}
break;
case 4:
judgeGame(zy,zx,zy-1,zx,true);
break;
}
break;
case 39:
switch(box[gameConfig.map][zy][zx+1]){
case 0:
judgeGame(zy,zx,zy,zx+1,true);
break;
case 2:
if(box[gameConfig.map][zy][zx+2] == 0){
judgeGame(zy,zx+1,zy,zx+2,false);
judgeGame(zy,zx,zy,zx+1,true);
}
if(box[gameConfig.map][zy][zx+2] == 4){
judgeGame(zy,zx+1,zy,zx+2,false);
judgeGame(zy,zx,zy,zx+1,true);
}
break;
case 4:
judgeGame(zy,zx,zy,zx+1,true);
break;
}
break;
case 40:
switch(box[gameConfig.map][zy+1][zx]){
case 0:
judgeGame(zy,zx,zy+1,zx,true);
break;
case 2:
if(box[gameConfig.map][zy+2][zx] == 0){
judgeGame(zy+1,zx,zy+2,zx,false);
judgeGame(zy,zx,zy+1,zx,true);
}
if(box[gameConfig.map][zy+2][zx] == 4){
judgeGame(zy+1,zx,zy+2,zx,false);
judgeGame(zy,zx,zy+1,zx,true);
}
break;
case 4:
judgeGame(zy,zx,zy+1,zx,true);
break;
}
break;
}
}
};
startGame();