| Текущая версия |
Ваш текст |
| Строка 1: |
Строка 1: |
| | + | 2048 (JavaScript) |
| | + | |
| | ==Описание== | | ==Описание== |
| | | | |
| − | Реализация игры 2048 на языке программирования JavaScript | + | Реализация копьютерной игры тетрис на языке программирования JavaScript |
| | | | |
| − | Исполнители: Доленко М.А. ; Овчинников А.А.
| + | Исполнитель: [[Доленко Михаил|Доленко Михаил]] |
| | | | |
| | Группа 3630103/90001 Кафедра Теоретической механики | | Группа 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>
| |
