Skip to content

Instantly share code, notes, and snippets.

@arunkumar413

arunkumar413/grid.css

Created May 25, 2018 17:45
Show Gist options
  • Save arunkumar413/e8d53fb4267420ebe39f6e177c8ac65f to your computer and use it in GitHub Desktop.
Save arunkumar413/e8d53fb4267420ebe39f6e177c8ac65f to your computer and use it in GitHub Desktop.
Download ZIP
HTML,CSS grid for 2048 game
Raw
grid.css
.cell{
border: ;
background-color: #f1e7ce;
border-radius:5px;
}
.container{
display:inline-grid;
grid-template-columns: 100px 100px 100px 100px;
grid-column-gap: 10px;
grid-row-gap: 10px;
grid-template-rows: 100px 100px 100px 100px;
background-color: #e9ad36;
padding: 10px;
border-radius:5px;
}
Raw
grid.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class = 'container'>
</div>
</body>
</html>
Raw
grid.js
var container = document.querySelector('.container'); //get the container element
var puzzle_array; // is the 2d array on which we apply the 2048 logics transformations.
//build an array to simulate our 2048 puzzle array.
var grid = new Array(4);
for (i=0;i<grid.length;i++){
grid[i]= new Array(4);
}
// build div for each cell/element
for (i=0;i<4;i++){
for (j=0;j<4;j++){
grid[i][j] = document.createElement('div');
grid[i][j].setAttribute('class','cell');
grid[i][j].textContent = i+','+j; // replace this value with the puzzle_array[i][j];
container.appendChild(grid[i][j]);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment