2048 (java script)
Материал из Department of Theoretical and Applied Mechanics
Описание
Реализация игры 2048 на языке программирования JavaScript
Исполнители: Доленко М.А. ; Овчинников А.А.
Группа 3630103/90001 Кафедра Теоретической механики
Код программы
Код программы на языке JavaScript:
1 <html>
2 <script>
3 var gridModel = [];
4 var numRows = 4;
5 var numCols = 4;
6 var backgroundElement;
7 var gap = 20;
8
9 var colors = [
10 "orange",
11 "red",
12 "magenta",
13 "green",
14 "blue",
15 "cyan",
16 "purple",
17 "midnightblue",
18 "lime",
19 "pink",
20 "black"
21 ];
22
23 window.onkeydown = function(e){
24 if (e.keyCode == 38)
25 {
26 if (collapseUp()) addTile();
27 }
28 else if (e.keyCode == 37)
29 {
30 if (collapseLeft()) addTile();
31 }
32 else if (e.keyCode == 39)
33 {
34 if (collapseRight()) addTile();
35 }
36 else if (e.keyCode == 40)
37 {
38 if (collapseDown()) addTile();
39 }
40
41 setTimeout(function(){
42 drawGridFromModel();
43 },150);
44 }
45
46 window.onload = function()
47 {
48 backgroundElement = document.getElementById("gridBackground");
49
50 initializeGridModel();
51 drawGridFromModel();
52 }
53
54 function initializeGridModel()
55 {
56 var counter = 0;
57
58 for (var i = 0; i < numRows; i++)
59 {
60 var aRow = [];
61 for (var j = 0; j < numCols; j++)
62 {
63 var value = "";
64 if (Math.random() < .3 & counter < 2)
65 {
66 value = 2;
67 counter++;
68 }
69 aRow.push(value);
70 }
71 gridModel.push(aRow);
72 }
73 }
74
75
76 function addTile()
77 {
78 var randRow = Math.floor(Math.random()*numRows);
79 var randCol = Math.floor(Math.random()*numCols);
80 while (gridModel[randRow][randCol] != "")
81 {
82 randRow = Math.floor(Math.random()*numRows);
83 randCol = Math.floor(Math.random()*numCols);
84 }
85 gridModel[randRow][randCol] = (Math.random() > .1) ? 2 :4;
86
87 checkGameOver();
88 }
89
90 function checkGameOver()
91 {
92 for (var i = 0; i < numRows; i++)
93 {
94 for (var j = 0; j < numCols; j++)
95 {
96 if (gridModel[i][j] == 2048)
97 {
98 alert("Win!");
99 }
100
101 if (gridModel[i][j] == "" || canCollapseWithNeighbor(i,j))
102 {
103 return false;
104 }
105 }
106 }
107 alert("Game Over");
108 gameOver = true;
109 return true;
110 }
111
112 function canCollapseWithNeighbor(row,column)
113 {
114 if(row > 0 && gridModel[row][column] == gridModel[row-1][column])
115 {
116 return true;
117 }
118 if(row < numRows-1 && gridModel[row][column] == gridModel[row+1][column])
119 {
120 return true;
121 }
122 if(column > 0 && gridModel[row][column] == gridModel[row][column-1])
123 {
124 return true;
125 }
126 if(column < numCols-1 && gridModel[row][column] == gridModel[row][column+1])
127 {
128 return true;
129 }
130
131 return false;
132
133 }
134
135 function drawGridFromModel()
136 {
137 backgroundElement.innerHTML = "";
138
139 for (var i = 0; i < numRows; i++)
140 {
141
142 for (var j = 0; j < numCols; j++)
143 {
144
145 var tile = document.createElement("div");
146 tile.style.position = "absolute";
147 tile.style.top = i * (120) + gap;
148 tile.style.left = j * (120) + gap;
149 tile.style.width = 100;
150 tile.style.height = 100;
151 tile.style.fontSize = 48;
152 tile.style.textAlign = "center";
153 tile.style.transition = "all .15s";
154 tile.setAttribute("id",i + " " + j);
155
156 var cellValue = gridModel[i][j];
157 tile.innerHTML = cellValue;
158 if (cellValue == "")
159 {
160 tile.style.backgroundColor = "#eeeeee";
161 }
162 else
163 {
164 var numDivisions = 1;
165 var curr = cellValue;
166 while (curr > 1)
167 {
168 curr /= 2;
169 numDivisions++;
170 }
171 tile.style.backgroundColor = colors[numDivisions-2];
172 tile.style.color = "white";
173 }
174 backgroundElement.appendChild(tile);
175
176 }
177 }
178
179 }
180
181 function animateDivFromPointToPoint(div,leftPoint,finalLeft,currTop,finalTop)
182 {
183 drawEmptyTile(leftPoint,currTop);
184 div.style.zIndex = 2;
185 setTimeout(function(){
186 div.style.left = finalLeft + "px";
187 div.style.top = finalTop + "px";
188 },10);
189 }
190
191 function drawEmptyTile(leftPoint,topPoint)
192 {
193 var tile = document.createElement("div");
194 tile.style.position = "absolute";
195 tile.style.top = topPoint;
196 tile.style.left = leftPoint;
197 tile.style.width = 100;
198 tile.style.height = 100;
199 tile.style.backgroundColor = "#eeeeee";
200 backgroundElement.appendChild(tile);
201 }
202
203 function collapseUp()
204 {
205 var tilesHaveMoved = false;
206
207 for (var column = 0; column < numCols; column++)
208 {
209 for (var row = 0; row < numRows; row++)
210 {
211 var currentValue = gridModel[row][column];
212 if (currentValue != "")
213 {
214 var currTop = row * (120) + gap;
215 var finalTop;
216
217 var cellIterator = row;
218 var nextValue = "";
219 while(cellIterator > 0 && nextValue == "")
220 {
221 cellIterator--;
222 nextValue = gridModel[cellIterator][column]
223 }
224 if (nextValue == currentValue && nextValue != "")
225 {
226 gridModel[row][column] = "";
227 gridModel[cellIterator][column] = currentValue * 2;
228 finalTop = cellIterator * 120 + gap;
229 }
230 else if (nextValue == "")
231 {
232 gridModel[row][column] = "";
233 gridModel[0][column] = currentValue;
234 finalTop = 0 * 120 + gap;
235 }
236 else
237 {
238 gridModel[row][column] = "";
239 gridModel[cellIterator+1][column] = currentValue;
240 finalTop = (cellIterator+1) * 120 + gap;
241 }
242
243 var leftPoint = column * (120) + gap;
244 divToMove = document.getElementById(row + " " + column);
245 animateDivFromPointToPoint(divToMove,leftPoint,leftPoint,currTop,finalTop)
246 if (currTop != finalTop) tilesHaveMoved = true;
247 }
248 }
249 }
250 return tilesHaveMoved;
251 }
252
253 function collapseDown()
254 {
255 var tilesHaveMoved = false;
256
257 for (var column = 0; column < numCols; column++)
258 {
259 for (var row = numRows-1; row >= 0; row--)
260 {
261 var currentValue = gridModel[row][column];
262 if (currentValue != "")
263 {
264 var currTop = row * (120) + gap;
265 var finalTop;
266
267 var cellIterator = row;
268 var nextValue = "";
269 while(cellIterator < numRows-1 && nextValue == "")
270 {
271 cellIterator++;
272 nextValue = gridModel[cellIterator][column];
273 }
274 if (nextValue == currentValue && nextValue != "")
275 {
276 gridModel[row][column] = "";
277 gridModel[cellIterator][column] = currentValue * 2;
278 finalTop = cellIterator * 120 + gap;
279 }
280 else if (nextValue == "")
281 {
282 gridModel[row][column] = "";
283 gridModel[numRows-1][column] = currentValue;
284 finalTop = (numRows-1)* 120 + gap;
285 }
286 else
287 {
288 gridModel[row][column] = "";
289 gridModel[cellIterator-1][column] = currentValue;
290 finalTop = (cellIterator-1) * 120 + gap;
291 }
292
293 var leftPoint = column * (120) + gap;
294 divToMove = document.getElementById(row + " " + column);
295 animateDivFromPointToPoint(divToMove,leftPoint,leftPoint,currTop,finalTop)
296 if (currTop != finalTop) tilesHaveMoved = true;
297 }
298 }
299 }
300 return tilesHaveMoved;
301 }
302
303 function collapseRight()
304 {
305 var tilesHaveMoved = false;
306
307 for (var row = 0; row < numRows; row++)
308 {
309 for (var col = numCols-1; col >= 0; col--)
310 {
311 var currentValue = gridModel[row][col];
312 if (currentValue != "")
313 {
314 var currLeft = col * (120) + gap;
315 var finalLeft;
316
317 var cellIterator = col;
318 var nextValue = "";
319 while(cellIterator < numCols-1 && nextValue == "")
320 {
321 cellIterator++;
322 nextValue = gridModel[row][cellIterator];
323 }
324 if (nextValue == currentValue && nextValue != "")
325 {
326 gridModel[row][col] = "";
327 gridModel[row][cellIterator] = currentValue * 2;
328 finalLeft = cellIterator * 120 + gap;
329 }
330 else if (nextValue == "")
331 {
332 gridModel[row][col] = "";
333 gridModel[row][numCols-1] = currentValue;
334 finalLeft = (numCols-1)* 120 + gap;
335 }
336 else
337 {
338 gridModel[row][col] = "";
339 gridModel[row][cellIterator-1] = currentValue;
340 finalLeft = (cellIterator-1) * 120 + gap;
341 }
342
343 var topPoint = row * (120) + gap;
344 divToMove = document.getElementById(row + " " + col);
345 animateDivFromPointToPoint(divToMove,currLeft,finalLeft,topPoint,topPoint);
346 if (currLeft != finalLeft) tilesHaveMoved = true;
347 }
348 }
349 }
350 return tilesHaveMoved;
351 }
352
353 function collapseLeft()
354 {
355 var tilesHaveMoved = false;
356
357 for (var row = 0; row < numRows; row++)
358 {
359 for (var col = 0; col < numCols; col++)
360 {
361 var currentValue = gridModel[row][col];
362 if (currentValue != "")
363 {
364 var currLeft = col * (120) + gap;
365 var finalLeft;
366
367 var cellIterator = col;
368 var nextValue = "";
369 while(cellIterator > 0 && nextValue == "")
370 {
371 cellIterator--;
372 nextValue = gridModel[row][cellIterator];
373 }
374 if (nextValue == currentValue && nextValue != "")
375 {
376 gridModel[row][col] = "";
377 gridModel[row][cellIterator] = currentValue * 2;
378 finalLeft = cellIterator * 120 + gap;
379 }
380 else if (nextValue == "")
381 {
382 gridModel[row][col] = "";
383 gridModel[row][0] = currentValue;
384 finalLeft = (0)* 120 + gap;
385 }
386 else
387 {
388 gridModel[row][col] = "";
389 gridModel[row][cellIterator+1] = currentValue;
390 finalLeft = (cellIterator+1) * 120 + gap;
391 }
392
393 var topPoint = row * (120) + gap;
394 divToMove = document.getElementById(row + " " + col);
395 animateDivFromPointToPoint(divToMove,currLeft,finalLeft,topPoint,topPoint);
396 if (currLeft != finalLeft) tilesHaveMoved = true;
397 }
398 }
399 }
400 return tilesHaveMoved;
401 }
402
403
404 </script>
405
406
407 <div id= "gridBackground" style="top:0;left:0;position:absolute;height:500;width:500;background-color
408 :#cccccc"></div>
409
410 </html>
