2048 (java script)

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

Перейти к: навигация, поиск

2048 (JavaScript)

Описание

Реализация игры 2048 на языке программирования JavaScript

Исполнители: Доленко М.А. ; Овчинников А.А.

Группа 3630103/90001 Кафедра Теоретической механики

Код программы

Код программы на языке JavaScript:

<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>


</html>