1 <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
2 <script>
3
4 $(function(){
5
6 Game.init( $('#div1') );
7
8 });
9
10 var Game = {
11
12 gk : [
13 //第一个 //关卡的数据
14 {
15 map : [
16 1,1,2,2,2,2,1,1,
17 1,1,2,3,3,2,1,1,
18 1,2,2,0,3,2,2,1,
19 1,2,0,0,0,3,2,1,
20 2,2,0,0,0,0,2,2,
21 2,0,0,2,0,0,0,2,
22 2,0,0,0,0,0,0,2,
23 2,2,2,2,2,2,2,2
24 ],
25 box : [
26 {x:4,y:3},
27 {x:3,y:4},
28 {x:4,y:5},
29 {x:5,y:5}
30 ],
31 person : {x:3,y:6}
32 },
33 //第一个结束
34
35 //第二个开始
36 {
37 map : [
38 1,1,1,1,2,2,2,2,2,2,2,1,
39 1,1,1,1,2,0,0,2,0,0,2,1,
40 1,1,1,1,2,0,0,0,0,0,2,1,
41 2,2,2,2,2,0,0,2,0,0,2,1,
42 3,3,3,2,2,2,0,2,0,0,2,2,
43 3,0,0,2,0,0,0,0,2,0,0,2,
44 3,0,0,0,0,0,0,0,0,0,0,2,
45 3,0,0,2,0,0,0,0,2,0,0,2,
46 3,3,3,2,2,2,0,2,0,0,2,2,
47 2,2,2,2,2,0,0,0,0,0,2,1,
48 1,1,1,1,2,0,0,2,0,0,2,1,
49 1,1,1,1,2,2,2,2,2,2,2,1
50 ],
51 box : [
52 {x : 5 , y : 6},
53 {x : 6 , y : 3},
54 {x : 6 , y : 5},
55 {x : 6 , y : 7},
56 {x : 6 , y : 9},
57 {x : 7 , y : 2},
58 {x : 8 , y : 2},
59 {x : 9 , y : 6},
60 ],
61 person : { x : 5 , y : 9 }
62 }
63 //第二个结束
64 ],
65
66 init : function(oParent){ //初始化
67
68 this.oParent = oParent;
69
70 this.createMap(0);
71
72 },
73
74 createMap : function(iNow){ //创建地图
75
76 this.oParent.empty(); //empty()方法从被选元素移除所有内容，包括所有文本和子节点
77 document.title = '第' + (iNow + 1) + '关'; //设置title的关数
78
79 this.nowJson = this.gk[iNow]; //读取gk数组的为1数据
80
81 //设置#div1的宽 this.nowJson.map.length =64 width=3200
82 this.oParent.css('width',Math.sqrt(this.nowJson.map.length) * 50);
83
84 //$.each遍历数组函数 第一个参数为遍历数组，第二个参数为回调函数
85 //$(selector).proxy(function,context)方法接受一个已有的函数，并返回一个带特定上下文的新的函数
86 $.each(this.nowJson.map, $.proxy(function(i,elem){
87
88 //给#div1添加一个class为pos的div盒子
89 this.oParent.append('<div class="pos' + elem + '"></div>');
90
91 },this) );
92
93 this.createBox(); //调用createBox函数 创建箱子
94
95
96 this.createPerson(); //调用createPerson函数 创建人物
97
98 },
99
100 createBox : function() { //创建箱子
101
102 //$.each遍历数组函数 第一个参数为遍历数组，第二个参数为回调函数
103 //$(selector).proxy(function,context)方法接受一个已有的函数，并返回一个带特定上下文的新函数
104 $.each(this.nowJson.box, $.proxy(function(i,elem){
105
106 //创建一个class为box的div，并且把这个div对象赋值给oBox
107 var oBox = $('<div class="box"></div>');
108 oBox.css('left', elem.x*50); //设置oBox的左边距
109 oBox.css('top', elem.y*50); //设置oBox的顶距
110 this.oParent.append(oBox); //把oBox盒子添加进#div1中
111 },this));
112 },
113
114 createPerson : function(){ //创建人物
115
116
117 //创建一个class为person的div，并且把这个div对象赋值给oPerson
118 var oPerson = $('<div class="person"></div>');
119 oPerson.css('left',this.nowJson.person.x*50); //设置oBox的左边距
120 oPerson.css('top',this.nowJson.person.y*50); //设置oBox的顶距
121
122 //data() 方法向被选元素附加数据，或者从被选元素获取数据
123 oPerson.data('x',this.nowJson.person.x); //x : 3
124 oPerson.data('y',this.nowJson.person.y); //y : 6
125
126 this.oParent.append( oPerson ); //把oPerson添加进#div1中
127
128 this.bindPerson(oPerson); //调用bindPerson函数 operson作为参数
129
130 },
131
132 bindPerson : function(oPerson){ //操作人物
133
134 //通过keydown事件（上 下 左 右），来移动操作人物
135 $(document).keydown($.proxy(function(ev){
136
137 switch(ev.which){
138 case 37: //左键
139 //backgroundPosition 属性设置背景图像的位置
140 //设置操作人物的左右边
141 oPerson.css('backgroundPosition','-150px 0');
142 this.movePerson(oPerson,{x:-1});
143
144
145 break;
146 case 38: //上键
147 //backgroundPosition 属性设置背景图像的位置
148 //设置操作人物的左右边距
149 oPerson.css('backgroundPosition','0 0');
150
151 this.movePerson(oPerson,{y:-1});
152
153 break;
154 case 39: //右键
155 oPerson.css('backgroundPosition','-50px 0');
156
157 this.movePerson(oPerson,{x:1});
158
159 break;
160 case 40: //下键
161 oPerson.css('backgroundPosition','-100px 0');
162 this.movePerson(oPerson,{y:1});
163 break;
164 }
165
166 },this));
167
168 },
169
170 movePerson : function(oPerson,opt){
171
172 var xValue = opt.x || 0;
173 var yValue = opt.y || 0;
174
175
176 if( this.nowJson.map[ (oPerson.data('y') + yValue )*Math.sqrt(this.nowJson.map.length) + (oPerson.data('x') + xValue ) ] != 2 ){
177
178 oPerson.data('x',oPerson.data('x') + xValue );
179 oPerson.data('y',oPerson.data('y') + yValue );
180
181 oPerson.css('left' , oPerson.data('x')*50 );
182 oPerson.css('top' , oPerson.data('y')*50 );
183
184 $('.box').each($.proxy(function(i,elem){
185
186 if( this.pz( oPerson , $(elem) ) && this.nowJson.map[ (oPerson.data('y') + yValue )*Math.sqrt(this.nowJson.map.length) + (oPerson.data('x') + xValue ) ] != 2 ){
187
188 $(elem).css('left' , (oPerson.data('x') + xValue)*50 );
189 $(elem).css('top' , (oPerson.data('y') + yValue)*50 );
190
191 $('.box').each($.proxy(function(j,elem2){
192
193 if( this.pz( $(elem) , $(elem2) ) && elem!=elem2 ){
194
195 $(elem).css('left' , oPerson.data('x')*50 );
196 $(elem).css('top' , oPerson.data('y')*50 );
197
198 oPerson.data('x',oPerson.data('x') - xValue );
199 oPerson.data('y',oPerson.data('y') - yValue );
200
201 oPerson.css('left' , oPerson.data('x')*50 );
202 oPerson.css('top' , oPerson.data('y')*50 );
203
204 }
205
206 },this));
207
208
209 }
210 else if( this.pz( oPerson , $(elem) ) ){
211
212 oPerson.data('x',oPerson.data('x') - xValue );
213 oPerson.data('y',oPerson.data('y') - yValue );
214
215 oPerson.css('left' , oPerson.data('x')*50 );
216 oPerson.css('top' , oPerson.data('y')*50 );
217
218 }
219
220 },this));
221
222 }
223
224 this.nextShow();
225
226 },
227
228 nextShow : function() { //下一关
229
230 var iNum = 0;
231
232 $('box').each($.proxy(function(i, elem){
233
234 $('pos3').each($.proxy(function(j, elem2){
235
236 if( this.px( $(elem), $(elem2)) ){
237 iNum++;
238 }
239
240 }, this));
241
242
243 }, this));
244 if(iNum == this.nowJson.box.length){
245 this.createMap(1);
246 }
247
248 },
249
250
251 pz : function(obj1, obj2){ //碰撞检测
252
253 var L1 = obj1.offset().left;
254 var R1 = obj1.offset().left + obj1.width();
255 var T1 = obj1.offset().top;
256 var B1 = obj1.offset().top + obj1.height();
257
258 var L2 = obj2.offset().left;
259 var R2 = obj2.offset().left + obj2.width();
260 var T2 = obj2.offset().top;
261 var B2 = obj2.offset().top + obj2.height();
262
263 if( R1 <= L2 || L1 >=R2 || T1 >= B2 || B1 <= T2){
264 return false;
265 } else {
266 return true;
267
268 }
269
270 }
271
272 };
273
274
275 </script>
浙公网安备 33010602011771号