Javascript实现《推箱子》游戏

  1 function $id(id){return document.getElementById(id)};
  2 function $name(name){return document.getElementsByName(name)};
  3 //定义地图开始
  4 var box =[]
  5 var map1 = [
  6 [0,0,0,1,1,1,0,0,0,0],
  7 [0,0,0,1,4,1,0,0,0,0],
  8 [0,0,0,1,0,1,1,1,1,0],
  9 [0,1,1,1,2,0,2,4,1,0],
 10 [0,1,4,0,2,3,1,1,1,0],
 11 [0,1,1,1,1,2,1,0,0,0],
 12 [0,0,0,0,1,4,1,0,0,0],
 13 [0,0,0,0,1,1,1,0,0,0]
 14 ]
 15 var map2 = [
 16 [1,1,1,1,1,0,0,0,0,0],
 17 [1,0,0,0,1,0,0,0,0,0],
 18 [1,0,2,2,1,0,1,1,1,0],
 19 [1,3,2,0,1,0,1,4,1,0],
 20 [1,1,1,0,1,1,1,4,1,0],
 21 [0,1,1,0,0,0,0,4,1,0],
 22 [0,1,0,0,0,1,0,0,1,0],
 23 [0,1,0,0,0,1,1,1,1,0],
 24 [0,1,1,1,1,1,0,0,0,0]
 25 ]
 26 box.push(map1);
 27 box.push(map2);
 28 //定义地图结束
 29 //定义游戏配置开始
 30 var gameConfig={
 31 "person":{//定义人物配置
 32 "x":0,
 33 "y":0,
 34 "id":"person"
 35 },
 36 "map" : 0,//定义地图
 37 "endpointNumber":0, /*用来存储当前关卡的终点数目, 见 createGame函数 switch case 4 .*/
 38 "box":{//定义每个div的参数
 39 "x":"50",
 40 "y":"50"
 41 },
 42 "ko" : 0 ,//定义箱子是否在终点上
 43 };
 44 //定义游戏配置结束
 45 //创建游戏开始
 46 function createGame(){
 47 //定义控制整体的div，用于当本关结束后消除上一关的地图。
 48 $id("cell").innerHTML="";
 49 $id("cell").style.position="absolute";
 50 $id("cell").left ="0px";
 51 $id("cell").top = "0px";
 52 //定义控制整体div结束
 53 //创建游戏循环
 54 for(var i=0;i<box[gameConfig.map].length;i++){
 55 for(var j=0;j<box[gameConfig.map][i].length;j++){
 56 var itemdiv = document.createElement("div");
 57 itemdiv.style.width = gameConfig.box.x + "px";
 58 itemdiv.style.height = gameConfig.box.y + "px";
 59 itemdiv.style.left = gameConfig.box.x*j + "px";
 60 itemdiv.style.top = gameConfig.box.y*i + "px" ;
 61 itemdiv.setAttribute("name",i+"_"+j);
 62 itemdiv.style.position="absolute";
 63 $id("cell").appendChild(itemdiv);
 64 switch(box[gameConfig.map][i][j]){
 65 case 0:
 66 itemdiv.style.background = "#000";
 67 //itemdiv.innerHTML="背景";
 68 break;
 69 
 70 case 1:
 71 itemdiv.style.background = "#996633";
 72 break;
 73 
 74 case 2:
 75 itemdiv.style.background = "yellow";
 76 itemdiv.innerHTML = "箱子";
 77 break;
 78 case 3:
 79 itemdiv.id = gameConfig.person.id;
 80 itemdiv.style.background = "#fff";
 81 itemdiv.innerHTML = "人物";
 82 gameConfig.person.x = j;//设置人物在二维数组的位置
 83 gameConfig.person.y = i;//设置人物在二维数组的位置
 84 break;
 85 case 4:
 86 itemdiv.setAttribute("endPoint","1");//设置终点标识符
 87 itemdiv.style.background = "green";
 88 itemdiv.innerHTML = "终点";
 89 gameConfig.endpointNumber++; //获取每一关的终点数目
 90 }
 91 }
 92 }
 93 };
 94 createGame();
 95 //创建游戏结束
 96 //移动函数开始
 97 function judgeGame(oy,ox,y,x,isperson){
 98 if (gameConfig.ko == gameConfig.endpointNumber) { //用最开始的获取到本关终点数目来对是否本关的箱子都在终点上面进行比较。
 99 alert("游戏结束");
100 gameConfig.map ++;//控制地图
101 gameConfig.ko = 0;//设置箱子在终点的变量
102 gameConfig.endpointNumber=0;//设置终点数目变量
103 createGame();//调用createGame()
104 }else{ 
105 var original = document.getElementsByName(oy+"_"+ox)[0]; //获取原始的位置。
106 var target = document.getElementsByName(y+"_"+x)[0];//获取目标div的位置
107 original.style.top = y * gameConfig.box.y + "px";//设置原始位置的left和top
108 original.style.left = x *gameConfig.box.x + "px";
109 target.style.top = oy * gameConfig.box.y + "px";//设置目标位置的left和top
110 target.style.left = ox * gameConfig.box.x + "px";
111 original.setAttribute("name",y+"_"+x);//设置原始位置的name属性，互换原始位置和目标位置的name
112 target.setAttribute("name",oy+"_"+ox);
113 var tmp = box[gameConfig.map][oy][ox];//设置二维数组，对换原始目标
114 box[gameConfig.map][oy][ox] = box[gameConfig.map][y][x];
115 box[gameConfig.map][y][x] = tmp;
116 if (isperson) {//检测是不是person，如果是，那么就改变游戏配置的person配置
117 gameConfig.person.y = y;
118 gameConfig.person.x = x;
119 };
120 InspectionEndPoint(original,target,isperson);//调用检测终点函数
121 }
122 };
123 function InspectionEndPoint(original,target,isperson){
124 if (original.getAttribute("endPoint") == "1" && target.getAttribute("endPoint") == "1") { 
125 //检测原始位置和目标位置的是否具有终点属性，也就是检测是不是站在终点上。如果是，那么就return false返回，因为不需要更改任何的
126 return false;
127 };
128 if (original.getAttribute("endPoint") == "1") { //检测原始是不是站在终点之上，如果是，先移除原始的终点检测属性。并设置目标终点属性，并设置目标颜色为绿色并返回
129 original.removeAttribute("endPoint");
130 target.setAttribute("endPoint","1");
131 target.style.background = "green";
132 return false;
133 };
134 if (target.getAttribute("endPoint") == "1") { //检测目标是不是终点，如果是，先移除目标的终点检测属性，并设置原始终点属性，并叫目标颜色调整为黑色并返回。
135 original.setAttribute("endPoint","1");
136 target.removeAttribute("endPoint");
137 target.style.background = "black";
138 if (isperson == false) {//检测是不是人物，如果不是，那么可移动的只有箱子，所以这里该增加ko。
139 gameConfig.ko ++
140 return false;
141 };
142 return false;
143 };
144 };
145 function startGame(){
146 document.onkeydown=function(e){
147 var zx = gameConfig.person.x;
148 var zy = gameConfig.person.y;
149 switch(e.keyCode){
150 case 37:
151 //console.log(box[gameConfig.map]);
152 switch(box[gameConfig.map][zy][zx-1]){
153 case 0:
154 judgeGame(zy,zx,zy,zx-1,true);
155 break;
156 case 2:
157 if(box[gameConfig.map][zy][zx-2] == 0){
158 judgeGame(zy,zx-1,zy,zx-2,false);
159 judgeGame(zy,zx,zy,zx-1,true);
160 }
161 if(box[gameConfig.map][zy][zx-2] == 4){
162 judgeGame(zy,zx-1,zy,zx-2,false);
163 judgeGame(zy,zx,zy,zx-1,true);
164 }
165 break;
166 case 4:
167 judgeGame(zy,zx,zy,zx-1,true);
168 break;
169 }
170 break;
171 case 38:
172 switch(box[gameConfig.map][zy-1][zx]){
173 case 0:
174 judgeGame(zy,zx,zy-1,zx,true);
175 break;
176 case 2:
177 if(box[gameConfig.map][zy-2][zx] == 0){
178 judgeGame(zy-1,zx,zy-2,zx,false);
179 judgeGame(zy,zx,zy-1,zx,true);
180 }
181 if(box[gameConfig.map][zy-2][zx] == 4){
182 judgeGame(zy-1,zx,zy-2,zx,false);
183 judgeGame(zy,zx,zy-1,zx,true);
184 }
185 break;
186 case 4:
187 judgeGame(zy,zx,zy-1,zx,true);
188 break;
189 }
190 break;
191 case 39:
192 switch(box[gameConfig.map][zy][zx+1]){
193 case 0:
194 judgeGame(zy,zx,zy,zx+1,true);
195 break;
196 case 2:
197 if(box[gameConfig.map][zy][zx+2] == 0){
198 judgeGame(zy,zx+1,zy,zx+2,false);
199 judgeGame(zy,zx,zy,zx+1,true);
200 }
201 if(box[gameConfig.map][zy][zx+2] == 4){
202 judgeGame(zy,zx+1,zy,zx+2,false);
203 judgeGame(zy,zx,zy,zx+1,true);
204 }
205 break;
206 case 4:
207 judgeGame(zy,zx,zy,zx+1,true);
208 break;
209 }
210 break;
211 case 40:
212 switch(box[gameConfig.map][zy+1][zx]){
213 case 0:
214 judgeGame(zy,zx,zy+1,zx,true);
215 break;
216 case 2:
217 if(box[gameConfig.map][zy+2][zx] == 0){
218 judgeGame(zy+1,zx,zy+2,zx,false);
219 judgeGame(zy,zx,zy+1,zx,true);
220 }
221 if(box[gameConfig.map][zy+2][zx] == 4){
222 judgeGame(zy+1,zx,zy+2,zx,false);
223 judgeGame(zy,zx,zy+1,zx,true);
224 }
225 break;
226 case 4:
227 judgeGame(zy,zx,zy+1,zx,true);
228 break;
229 }
230 break;
231 }
232 }
233 };
234 startGame();