2048 (java script)

Материал из Department of Theoretical and Applied Mechanics
Версия от 14:26, 1 июня 2020; Dolenkoma (обсуждение | вклад) (top)

(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

Описание

Реализация игры 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>