地址：http://www.llovell.cn/game.html
通过jQuery做的一个简单迷宫游戏~
原理的话，毛毛在里面走，遇到墙壁就无法过去，直到走到棋子才算赢。(像是废话)
代码还是比较简单的
第一步、把墙壁给动态画上去，定义墙我只用了一个数组来定义，每一个数字代表，这个位置有一块墙。（墙的号码是由左往右数的）
第二步、绑定键盘事件，判断移动时是否遇到墙壁，然后你按的是什么键，该往哪走等。
第三步、设置起点与终点，起点与终点也是给个号码定义的。
1 $(function(){
2
3 var _currentCur=0; //光标位置
4
5 var _currentCur_X=0;
6
7 var _currentCur_Y=0;
8
9 //添加地图
10 for(var i=1;i<290;i++)
11 {
12 $("#map_list").append("<li id='wall_"+i+"'></li>");
13 }
14
15 //设定墙
16 var walls=new Array(19,2,36,53,70,87,156,104,172,189,241,206,191,155,94,138,257,240,106,89,123,140,157,174,199,208,242,276,38,55,21,22,56,57,74,91,108,142,143,141,76,93,110,127,144,23,58,59,27,44,10,61,78,95,24,25,209,210,211,212,261,244,278,263,280,246,197,214,231,248,284,283,282,177,178,179,176,180,130,131,129,148,165,182,216,217,218,62,63,64,65,81,98,30,29,31,33,50,16,101,100,150,167,133,116,99,251,252,253,254,250,267,287,288,289,163,84,151,152,219,202,203,186,187,153);
17
18 //砌墙
19 addwall(walls);
20
21 //设置起点
22 setLoc(1,'s');
23
24 //设置终点
25 setLoc(170,'e');
26
27 //键盘事件
28 document.onkeydown =function(event){
29
30 //cmd 1:上 2:左 3:下 4:右
31
32 if(event.keyCode==37) move(2); //左
33
34 if(event.keyCode==38) move(1); //上
35
36 if(event.keyCode==39) move(4); //右
37
38 if(event.keyCode==40) move(3); //下
39
40 };
41
42 });
43
44 //砌墙
45 function addwall(list_wall)
46 {
47 for(i=0;i<list_wall.length;i++)
48 {
49 $("#wall_"+list_wall[i]).addClass("wall");
50 }
51 }
52
53 //设置起点与终点
54 function setLoc(location,type)
55 {
56 if(type=='s')
57 {
58 $("#wall_"+location).css("background","url(images/loc_start.gif) no-repeat").attr("tag","start");
59 _currentCur_X=1;
60 _currentCur_Y=1;
61 _currentCur=1;
62 $("#wall_"+_currentCur).addClass("currentCur");
63 }
64 if(type=='e')
65 {
66 $("#wall_"+location).css("background","url(images/loc_end.gif) no-repeat").attr("tag","end");
67 }
68 }
69
70 //判断是否可以移动(将命令传过来)
71 function checkmove(cmd)
72 {
73 var check=true;
74 //cmd 1:上 2:左 3:下 4:右
75 if(cmd==1)
76 {
77 if(_currentCur_Y==1)
78 check=false;
79 }
80 if(cmd==2)
81 {
82 if(_currentCur_X==1)
83 check=false;
84 }
85 if(cmd==3)
86 {
87 if(_currentCur_Y==17)
88 check=false;
89 }
90 if(cmd==4)
91 {
92 if(_currentCur_X==17)
93 check=false;
94 }
95
96 if(check)
97 {
98 var locs=getMoveLoc(cmd);
99
100 var liCursor=computebyLocs(locs[0],locs[1]);
101
102 if($("#wall_"+liCursor).attr("class")=='wall')
103 returnfalse;
104 }
105
106 return check;
107 }
108
109 //移动
110 function move(cmd)
111 {
112 if(checkmove(cmd))
113 {
114 //cmd 1:上 2:左 3:下 4:右
115 var locs=getMoveLoc(cmd);
116
117 _currentCur_X=locs[0];
118
119 _currentCur_Y=locs[1];
120
121 _currentCur=computebyLoc();
122
123 //设置光标
124 $("li").removeClass("currentCur");
125 $("#wall_"+_currentCur).addClass("currentCur");
126
127 $("#cur_x").html(_currentCur_X);
128
129 $("#cur_y").html(_currentCur_Y);
130
131 //到达终点胜利
132 if($("#wall_"+_currentCur).attr("tag")=="end")
133 {
134 alert("恭喜你胜利到达终点");
135 location.reload();
136 }
137
138 }
139 }
140
141 //根据坐标算出号码
142 function computebyLoc()
143 {
144 return _currentCur_X+((_currentCur_Y-1)*17);
145 }
146
147 //根据坐标算出号码
148 function computebyLocs(cur_x,cur_y)
149 {
150 return cur_x+((cur_y-1)*17);
151 }
152
153 //获取移动后的坐标
154 function getMoveLoc(cmd)
155 {
156 var locs=new Array(_currentCur_X,_currentCur_Y);
157
158 //cmd 1:上 2:左 3:下 4:右
159 if(cmd==1)
160 {
161 locs[1]=_currentCur_Y-1;
162 }
163 if(cmd==2)
164 {
165 locs[0]=_currentCur_X-1;
166 }
167 if(cmd==3)
168 {
169 locs[1]=_currentCur_Y+1;
170 }
171 if(cmd==4)
172 {
173 locs[0]=_currentCur_X+1;
174 }
175
176 return locs;
177
178 }
2
3 var _currentCur=0; //光标位置
4
5 var _currentCur_X=0;
6
7 var _currentCur_Y=0;
8
9 //添加地图
10 for(var i=1;i<290;i++)
11 {
12 $("#map_list").append("<li id='wall_"+i+"'></li>");
13 }
14
15 //设定墙
16 var walls=new Array(19,2,36,53,70,87,156,104,172,189,241,206,191,155,94,138,257,240,106,89,123,140,157,174,199,208,242,276,38,55,21,22,56,57,74,91,108,142,143,141,76,93,110,127,144,23,58,59,27,44,10,61,78,95,24,25,209,210,211,212,261,244,278,263,280,246,197,214,231,248,284,283,282,177,178,179,176,180,130,131,129,148,165,182,216,217,218,62,63,64,65,81,98,30,29,31,33,50,16,101,100,150,167,133,116,99,251,252,253,254,250,267,287,288,289,163,84,151,152,219,202,203,186,187,153);
17
18 //砌墙
19 addwall(walls);
20
21 //设置起点
22 setLoc(1,'s');
23
24 //设置终点
25 setLoc(170,'e');
26
27 //键盘事件
28 document.onkeydown =function(event){
29
30 //cmd 1:上 2:左 3:下 4:右
31
32 if(event.keyCode==37) move(2); //左
33
34 if(event.keyCode==38) move(1); //上
35
36 if(event.keyCode==39) move(4); //右
37
38 if(event.keyCode==40) move(3); //下
39
40 };
41
42 });
43
44 //砌墙
45 function addwall(list_wall)
46 {
47 for(i=0;i<list_wall.length;i++)
48 {
49 $("#wall_"+list_wall[i]).addClass("wall");
50 }
51 }
52
53 //设置起点与终点
54 function setLoc(location,type)
55 {
56 if(type=='s')
57 {
58 $("#wall_"+location).css("background","url(images/loc_start.gif) no-repeat").attr("tag","start");
59 _currentCur_X=1;
60 _currentCur_Y=1;
61 _currentCur=1;
62 $("#wall_"+_currentCur).addClass("currentCur");
63 }
64 if(type=='e')
65 {
66 $("#wall_"+location).css("background","url(images/loc_end.gif) no-repeat").attr("tag","end");
67 }
68 }
69
70 //判断是否可以移动(将命令传过来)
71 function checkmove(cmd)
72 {
73 var check=true;
74 //cmd 1:上 2:左 3:下 4:右
75 if(cmd==1)
76 {
77 if(_currentCur_Y==1)
78 check=false;
79 }
80 if(cmd==2)
81 {
82 if(_currentCur_X==1)
83 check=false;
84 }
85 if(cmd==3)
86 {
87 if(_currentCur_Y==17)
88 check=false;
89 }
90 if(cmd==4)
91 {
92 if(_currentCur_X==17)
93 check=false;
94 }
95
96 if(check)
97 {
98 var locs=getMoveLoc(cmd);
99
100 var liCursor=computebyLocs(locs[0],locs[1]);
101
102 if($("#wall_"+liCursor).attr("class")=='wall')
103 returnfalse;
104 }
105
106 return check;
107 }
108
109 //移动
110 function move(cmd)
111 {
112 if(checkmove(cmd))
113 {
114 //cmd 1:上 2:左 3:下 4:右
115 var locs=getMoveLoc(cmd);
116
117 _currentCur_X=locs[0];
118
119 _currentCur_Y=locs[1];
120
121 _currentCur=computebyLoc();
122
123 //设置光标
124 $("li").removeClass("currentCur");
125 $("#wall_"+_currentCur).addClass("currentCur");
126
127 $("#cur_x").html(_currentCur_X);
128
129 $("#cur_y").html(_currentCur_Y);
130
131 //到达终点胜利
132 if($("#wall_"+_currentCur).attr("tag")=="end")
133 {
134 alert("恭喜你胜利到达终点");
135 location.reload();
136 }
137
138 }
139 }
140
141 //根据坐标算出号码
142 function computebyLoc()
143 {
144 return _currentCur_X+((_currentCur_Y-1)*17);
145 }
146
147 //根据坐标算出号码
148 function computebyLocs(cur_x,cur_y)
149 {
150 return cur_x+((cur_y-1)*17);
151 }
152
153 //获取移动后的坐标
154 function getMoveLoc(cmd)
155 {
156 var locs=new Array(_currentCur_X,_currentCur_Y);
157
158 //cmd 1:上 2:左 3:下 4:右
159 if(cmd==1)
160 {
161 locs[1]=_currentCur_Y-1;
162 }
163 if(cmd==2)
164 {
165 locs[0]=_currentCur_X-1;
166 }
167 if(cmd==3)
168 {
169 locs[1]=_currentCur_Y+1;
170 }
171 if(cmd==4)
172 {
173 locs[0]=_currentCur_X+1;
174 }
175
176 return locs;
177
178 }
