2048 (java script) — различия между версиями
Материал из Department of Theoretical and Applied Mechanics
(Новая страница: «{{#widget:Iframe | url=http://tm.spbstu.ru/htmlets/js2020/Dolenko/2048.html | width=800 | height=800 | border=0}}») |
Dolenkoma (обсуждение | вклад) (→top) |
||
(не показано 8 промежуточных версий этого же участника) | |||
Строка 1: | Строка 1: | ||
+ | ==Описание== | ||
+ | |||
+ | Реализация игры 2048 на языке программирования JavaScript | ||
+ | |||
+ | Исполнители: Доленко М.А. ; Овчинников А.А. | ||
+ | |||
+ | Группа 3630103/90001 Кафедра Теоретической механики | ||
+ | |||
{{#widget:Iframe | url=http://tm.spbstu.ru/htmlets/js2020/Dolenko/2048.html | width=800 | height=800 | border=0}} | {{#widget:Iframe | url=http://tm.spbstu.ru/htmlets/js2020/Dolenko/2048.html | width=800 | height=800 | border=0}} | ||
+ | |||
+ | ==Код программы== | ||
+ | <div class="mw-collapsible mw-collapsed"> | ||
+ | '''Код программы на языке JavaScript:''' <div class="mw-collapsible-content"> | ||
+ | <syntaxhighlight lang="javascript" line start="1" enclose="div"> | ||
+ | <html> | ||
+ | <script> | ||
+ | var gridModel = []; | ||
+ | var numRows = 4; | ||
+ | var numCols = 4; | ||
+ | var backgroundElement; | ||
+ | var gap = 20; | ||
+ | |||
+ | var colors = [ | ||
+ | "orange", | ||
+ | "red", | ||
+ | "magenta", | ||
+ | "green", | ||
+ | "blue", | ||
+ | "cyan", | ||
+ | "purple", | ||
+ | "midnightblue", | ||
+ | "lime", | ||
+ | "pink", | ||
+ | "black" | ||
+ | ]; | ||
+ | |||
+ | window.onkeydown = function(e){ | ||
+ | if (e.keyCode == 38) | ||
+ | { | ||
+ | if (collapseUp()) addTile(); | ||
+ | } | ||
+ | else if (e.keyCode == 37) | ||
+ | { | ||
+ | if (collapseLeft()) addTile(); | ||
+ | } | ||
+ | else if (e.keyCode == 39) | ||
+ | { | ||
+ | if (collapseRight()) addTile(); | ||
+ | } | ||
+ | else if (e.keyCode == 40) | ||
+ | { | ||
+ | if (collapseDown()) addTile(); | ||
+ | } | ||
+ | |||
+ | setTimeout(function(){ | ||
+ | drawGridFromModel(); | ||
+ | },150); | ||
+ | } | ||
+ | |||
+ | window.onload = function() | ||
+ | { | ||
+ | backgroundElement = document.getElementById("gridBackground"); | ||
+ | |||
+ | initializeGridModel(); | ||
+ | drawGridFromModel(); | ||
+ | } | ||
+ | |||
+ | function initializeGridModel() | ||
+ | { | ||
+ | var counter = 0; | ||
+ | |||
+ | for (var i = 0; i < numRows; i++) | ||
+ | { | ||
+ | var aRow = []; | ||
+ | for (var j = 0; j < numCols; j++) | ||
+ | { | ||
+ | var value = ""; | ||
+ | if (Math.random() < .3 & counter < 2) | ||
+ | { | ||
+ | value = 2; | ||
+ | counter++; | ||
+ | } | ||
+ | aRow.push(value); | ||
+ | } | ||
+ | gridModel.push(aRow); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
+ | function addTile() | ||
+ | { | ||
+ | var randRow = Math.floor(Math.random()*numRows); | ||
+ | var randCol = Math.floor(Math.random()*numCols); | ||
+ | while (gridModel[randRow][randCol] != "") | ||
+ | { | ||
+ | randRow = Math.floor(Math.random()*numRows); | ||
+ | randCol = Math.floor(Math.random()*numCols); | ||
+ | } | ||
+ | gridModel[randRow][randCol] = (Math.random() > .1) ? 2 :4; | ||
+ | |||
+ | checkGameOver(); | ||
+ | } | ||
+ | |||
+ | function checkGameOver() | ||
+ | { | ||
+ | for (var i = 0; i < numRows; i++) | ||
+ | { | ||
+ | for (var j = 0; j < numCols; j++) | ||
+ | { | ||
+ | if (gridModel[i][j] == 2048) | ||
+ | { | ||
+ | alert("Win!"); | ||
+ | } | ||
+ | |||
+ | if (gridModel[i][j] == "" || canCollapseWithNeighbor(i,j)) | ||
+ | { | ||
+ | return false; | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | alert("Game Over"); | ||
+ | gameOver = true; | ||
+ | return true; | ||
+ | } | ||
+ | |||
+ | function canCollapseWithNeighbor(row,column) | ||
+ | { | ||
+ | if(row > 0 && gridModel[row][column] == gridModel[row-1][column]) | ||
+ | { | ||
+ | return true; | ||
+ | } | ||
+ | if(row < numRows-1 && gridModel[row][column] == gridModel[row+1][column]) | ||
+ | { | ||
+ | return true; | ||
+ | } | ||
+ | if(column > 0 && gridModel[row][column] == gridModel[row][column-1]) | ||
+ | { | ||
+ | return true; | ||
+ | } | ||
+ | if(column < numCols-1 && gridModel[row][column] == gridModel[row][column+1]) | ||
+ | { | ||
+ | return true; | ||
+ | } | ||
+ | |||
+ | return false; | ||
+ | |||
+ | } | ||
+ | |||
+ | function drawGridFromModel() | ||
+ | { | ||
+ | backgroundElement.innerHTML = ""; | ||
+ | |||
+ | for (var i = 0; i < numRows; i++) | ||
+ | { | ||
+ | |||
+ | for (var j = 0; j < numCols; j++) | ||
+ | { | ||
+ | |||
+ | var tile = document.createElement("div"); | ||
+ | tile.style.position = "absolute"; | ||
+ | tile.style.top = i * (120) + gap; | ||
+ | tile.style.left = j * (120) + gap; | ||
+ | tile.style.width = 100; | ||
+ | tile.style.height = 100; | ||
+ | tile.style.fontSize = 48; | ||
+ | tile.style.textAlign = "center"; | ||
+ | tile.style.transition = "all .15s"; | ||
+ | tile.setAttribute("id",i + " " + j); | ||
+ | |||
+ | var cellValue = gridModel[i][j]; | ||
+ | tile.innerHTML = cellValue; | ||
+ | if (cellValue == "") | ||
+ | { | ||
+ | tile.style.backgroundColor = "#eeeeee"; | ||
+ | } | ||
+ | else | ||
+ | { | ||
+ | var numDivisions = 1; | ||
+ | var curr = cellValue; | ||
+ | while (curr > 1) | ||
+ | { | ||
+ | curr /= 2; | ||
+ | numDivisions++; | ||
+ | } | ||
+ | tile.style.backgroundColor = colors[numDivisions-2]; | ||
+ | tile.style.color = "white"; | ||
+ | } | ||
+ | backgroundElement.appendChild(tile); | ||
+ | |||
+ | } | ||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | function animateDivFromPointToPoint(div,leftPoint,finalLeft,currTop,finalTop) | ||
+ | { | ||
+ | drawEmptyTile(leftPoint,currTop); | ||
+ | div.style.zIndex = 2; | ||
+ | setTimeout(function(){ | ||
+ | div.style.left = finalLeft + "px"; | ||
+ | div.style.top = finalTop + "px"; | ||
+ | },10); | ||
+ | } | ||
+ | |||
+ | function drawEmptyTile(leftPoint,topPoint) | ||
+ | { | ||
+ | var tile = document.createElement("div"); | ||
+ | tile.style.position = "absolute"; | ||
+ | tile.style.top = topPoint; | ||
+ | tile.style.left = leftPoint; | ||
+ | tile.style.width = 100; | ||
+ | tile.style.height = 100; | ||
+ | tile.style.backgroundColor = "#eeeeee"; | ||
+ | backgroundElement.appendChild(tile); | ||
+ | } | ||
+ | |||
+ | function collapseUp() | ||
+ | { | ||
+ | var tilesHaveMoved = false; | ||
+ | |||
+ | for (var column = 0; column < numCols; column++) | ||
+ | { | ||
+ | for (var row = 0; row < numRows; row++) | ||
+ | { | ||
+ | var currentValue = gridModel[row][column]; | ||
+ | if (currentValue != "") | ||
+ | { | ||
+ | var currTop = row * (120) + gap; | ||
+ | var finalTop; | ||
+ | |||
+ | var cellIterator = row; | ||
+ | var nextValue = ""; | ||
+ | while(cellIterator > 0 && nextValue == "") | ||
+ | { | ||
+ | cellIterator--; | ||
+ | nextValue = gridModel[cellIterator][column] | ||
+ | } | ||
+ | if (nextValue == currentValue && nextValue != "") | ||
+ | { | ||
+ | gridModel[row][column] = ""; | ||
+ | gridModel[cellIterator][column] = currentValue * 2; | ||
+ | finalTop = cellIterator * 120 + gap; | ||
+ | } | ||
+ | else if (nextValue == "") | ||
+ | { | ||
+ | gridModel[row][column] = ""; | ||
+ | gridModel[0][column] = currentValue; | ||
+ | finalTop = 0 * 120 + gap; | ||
+ | } | ||
+ | else | ||
+ | { | ||
+ | gridModel[row][column] = ""; | ||
+ | gridModel[cellIterator+1][column] = currentValue; | ||
+ | finalTop = (cellIterator+1) * 120 + gap; | ||
+ | } | ||
+ | |||
+ | var leftPoint = column * (120) + gap; | ||
+ | divToMove = document.getElementById(row + " " + column); | ||
+ | animateDivFromPointToPoint(divToMove,leftPoint,leftPoint,currTop,finalTop) | ||
+ | if (currTop != finalTop) tilesHaveMoved = true; | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | return tilesHaveMoved; | ||
+ | } | ||
+ | |||
+ | function collapseDown() | ||
+ | { | ||
+ | var tilesHaveMoved = false; | ||
+ | |||
+ | for (var column = 0; column < numCols; column++) | ||
+ | { | ||
+ | for (var row = numRows-1; row >= 0; row--) | ||
+ | { | ||
+ | var currentValue = gridModel[row][column]; | ||
+ | if (currentValue != "") | ||
+ | { | ||
+ | var currTop = row * (120) + gap; | ||
+ | var finalTop; | ||
+ | |||
+ | var cellIterator = row; | ||
+ | var nextValue = ""; | ||
+ | while(cellIterator < numRows-1 && nextValue == "") | ||
+ | { | ||
+ | cellIterator++; | ||
+ | nextValue = gridModel[cellIterator][column]; | ||
+ | } | ||
+ | if (nextValue == currentValue && nextValue != "") | ||
+ | { | ||
+ | gridModel[row][column] = ""; | ||
+ | gridModel[cellIterator][column] = currentValue * 2; | ||
+ | finalTop = cellIterator * 120 + gap; | ||
+ | } | ||
+ | else if (nextValue == "") | ||
+ | { | ||
+ | gridModel[row][column] = ""; | ||
+ | gridModel[numRows-1][column] = currentValue; | ||
+ | finalTop = (numRows-1)* 120 + gap; | ||
+ | } | ||
+ | else | ||
+ | { | ||
+ | gridModel[row][column] = ""; | ||
+ | gridModel[cellIterator-1][column] = currentValue; | ||
+ | finalTop = (cellIterator-1) * 120 + gap; | ||
+ | } | ||
+ | |||
+ | var leftPoint = column * (120) + gap; | ||
+ | divToMove = document.getElementById(row + " " + column); | ||
+ | animateDivFromPointToPoint(divToMove,leftPoint,leftPoint,currTop,finalTop) | ||
+ | if (currTop != finalTop) tilesHaveMoved = true; | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | return tilesHaveMoved; | ||
+ | } | ||
+ | |||
+ | function collapseRight() | ||
+ | { | ||
+ | var tilesHaveMoved = false; | ||
+ | |||
+ | for (var row = 0; row < numRows; row++) | ||
+ | { | ||
+ | for (var col = numCols-1; col >= 0; col--) | ||
+ | { | ||
+ | var currentValue = gridModel[row][col]; | ||
+ | if (currentValue != "") | ||
+ | { | ||
+ | var currLeft = col * (120) + gap; | ||
+ | var finalLeft; | ||
+ | |||
+ | var cellIterator = col; | ||
+ | var nextValue = ""; | ||
+ | while(cellIterator < numCols-1 && nextValue == "") | ||
+ | { | ||
+ | cellIterator++; | ||
+ | nextValue = gridModel[row][cellIterator]; | ||
+ | } | ||
+ | if (nextValue == currentValue && nextValue != "") | ||
+ | { | ||
+ | gridModel[row][col] = ""; | ||
+ | gridModel[row][cellIterator] = currentValue * 2; | ||
+ | finalLeft = cellIterator * 120 + gap; | ||
+ | } | ||
+ | else if (nextValue == "") | ||
+ | { | ||
+ | gridModel[row][col] = ""; | ||
+ | gridModel[row][numCols-1] = currentValue; | ||
+ | finalLeft = (numCols-1)* 120 + gap; | ||
+ | } | ||
+ | else | ||
+ | { | ||
+ | gridModel[row][col] = ""; | ||
+ | gridModel[row][cellIterator-1] = currentValue; | ||
+ | finalLeft = (cellIterator-1) * 120 + gap; | ||
+ | } | ||
+ | |||
+ | var topPoint = row * (120) + gap; | ||
+ | divToMove = document.getElementById(row + " " + col); | ||
+ | animateDivFromPointToPoint(divToMove,currLeft,finalLeft,topPoint,topPoint); | ||
+ | if (currLeft != finalLeft) tilesHaveMoved = true; | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | return tilesHaveMoved; | ||
+ | } | ||
+ | |||
+ | function collapseLeft() | ||
+ | { | ||
+ | var tilesHaveMoved = false; | ||
+ | |||
+ | for (var row = 0; row < numRows; row++) | ||
+ | { | ||
+ | for (var col = 0; col < numCols; col++) | ||
+ | { | ||
+ | var currentValue = gridModel[row][col]; | ||
+ | if (currentValue != "") | ||
+ | { | ||
+ | var currLeft = col * (120) + gap; | ||
+ | var finalLeft; | ||
+ | |||
+ | var cellIterator = col; | ||
+ | var nextValue = ""; | ||
+ | while(cellIterator > 0 && nextValue == "") | ||
+ | { | ||
+ | cellIterator--; | ||
+ | nextValue = gridModel[row][cellIterator]; | ||
+ | } | ||
+ | if (nextValue == currentValue && nextValue != "") | ||
+ | { | ||
+ | gridModel[row][col] = ""; | ||
+ | gridModel[row][cellIterator] = currentValue * 2; | ||
+ | finalLeft = cellIterator * 120 + gap; | ||
+ | } | ||
+ | else if (nextValue == "") | ||
+ | { | ||
+ | gridModel[row][col] = ""; | ||
+ | gridModel[row][0] = currentValue; | ||
+ | finalLeft = (0)* 120 + gap; | ||
+ | } | ||
+ | else | ||
+ | { | ||
+ | gridModel[row][col] = ""; | ||
+ | gridModel[row][cellIterator+1] = currentValue; | ||
+ | finalLeft = (cellIterator+1) * 120 + gap; | ||
+ | } | ||
+ | |||
+ | var topPoint = row * (120) + gap; | ||
+ | divToMove = document.getElementById(row + " " + col); | ||
+ | animateDivFromPointToPoint(divToMove,currLeft,finalLeft,topPoint,topPoint); | ||
+ | if (currLeft != finalLeft) tilesHaveMoved = true; | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | return tilesHaveMoved; | ||
+ | } | ||
+ | |||
+ | |||
+ | </script> | ||
+ | |||
+ | |||
+ | <div id= "gridBackground" style="top:0;left:0;position:absolute;height:500;width:500;background-color | ||
+ | :#cccccc"></div> | ||
+ | |||
+ | </html> | ||
+ | |||
+ | </syntaxhighlight> | ||
+ | </div> |
Текущая версия на 14:26, 1 июня 2020
Описание[править]
Реализация игры 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>