Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Lgkd/master #24

Open
wants to merge 23 commits into
base: lgkd/master
Choose a base branch
from
Open

Lgkd/master #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
78b5735
added simple tile sliding
kdefliese Feb 2, 2016
ce6c240
arrow key presses move and reassign tile rol and col values
Feb 2, 2016
ee311f4
random 2 is added to the game board via the createRandomTile function
Feb 2, 2016
8194ec5
tiles are being added to the board
Feb 2, 2016
48cfb76
random tiles adding to board based on their rando locations, plus bug…
Feb 2, 2016
c368127
began thinking about how to move tiles horizontally
kdefliese Feb 2, 2016
475b467
board updates when you move the tiles to the left
kdefliese Feb 2, 2016
eab262c
did a little cosmetic clean up
kdefliese Feb 2, 2016
cc58520
updated tile references to tiles
kdefliese Feb 2, 2016
0025e26
a few more cosmetic clean up items
kdefliese Feb 2, 2016
409976f
separated animation into its own function
kdefliese Feb 2, 2016
0aaf558
wtf is happening
Feb 3, 2016
2d7095e
played around with alternate solution for moving tiles but nothing co…
kdefliese Feb 3, 2016
4432672
added sort function for Tiles array
kdefliese Feb 4, 2016
1fb9752
draft of animateTiles function
kdefliese Feb 4, 2016
a333f98
tiles slide properly to the left
Feb 4, 2016
f9a9672
fixed tile colors and cleaned things up a bit
Feb 4, 2016
e87843c
upateBoard function properly updates board for all cases
Feb 4, 2016
96e51d3
fixed board updating
kdefliese Feb 5, 2016
3239180
deleting div tiles that were combined
kdefliese Feb 5, 2016
b86502e
swiping left combines tiles successfully, YAY
kdefliese Feb 5, 2016
140b12f
added scoring
kdefliese Feb 5, 2016
e726354
tiles swiping right and combining although animation is not quite right
kdefliese Feb 5, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,12 @@
<script type="text/javascript" src="javascripts/2048.js"></script>
</head>
<body>
<h1 class="title">
2048
</h1>
<div class="score">
Score:
</div>
<div id="gameboard">
<div class="cells">
<div class="cell"></div>
Expand All @@ -26,7 +32,7 @@
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="tile" data-row="r1", data-col="c1" data-val="2">2</div>

</div>
</body>
</html>
311 changes: 302 additions & 9 deletions javascripts/2048.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,36 +1,329 @@
var Game = function() {
// Game logic and initialization here
this.board = [[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0]];
this.score = 0;
// 15 because squares are counted based on the board array which starts at 0
this.availableSquares = 15;
};

Game.prototype.moveTile = function(tile, direction) {
Game.prototype.sortTiles = function(tiles) {
var arrayOfArrays = [[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0]];
for (var i = 0; i < tiles.length; i ++) {
var tileRow = parseInt(tiles[i].dataset.row.charAt(1));
var tileCol = parseInt(tiles[i].dataset.col.charAt(1));
arrayOfArrays[tileRow][tileCol] = tiles[i];
}
var flattened = arrayOfArrays.reduce(function(a, b) {
return a.concat(b);
});
return flattened;
};

Game.prototype.moveTiles = function(tiles, direction) {
// Game method here
var currentRow = parseInt(tiles[0].dataset.row.charAt(1));
var currentCol = parseInt(tiles[0].dataset.col.charAt(1));
switch(direction) {
case 38: //up
console.log('up');
if (currentRow > 0) {
tiles[0].dataset.row = "r" + (currentRow - 1);
tiles.animate({top: '-=135px'}, 50);
}
break;
case 40: //down
console.log('down');
if (currentRow < 3) {
tiles[0].dataset.row = "r" + (currentRow + 1);
tiles.animate({top: '+=135px'}, 50);
}
break;
case 37: //left
console.log('left');
// looping through this.board array
for (var i = 0; i < 4; i++) {
var innerArray = this.board[i];
var beginningTilesArray = [];
for (var j = 0; j < 4; j++) {
if (innerArray[j] !== 0) {
beginningTilesArray.push(innerArray[j]);
// bTA now looks like [2,4] if you started with [2,0,4,0]
}
}
this.updateBoardLeft(beginningTilesArray,i);
}
this.animateTilesLeft(tiles);
break;
case 39: //right
console.log('right');
// looping through this.board array
for (var i = 0; i < 4; i++) {
var innerArray = this.board[i];
var beginningTilesArray = [];
for (var j = 0; j < 4; j++) {
if (innerArray[j] !== 0) {
beginningTilesArray.push(innerArray[j]);
// bTA now looks like [2,4] if you started with [2,0,4,0]
}
}
this.updateBoardRight(beginningTilesArray,i);
console.log("updated board is " + this.board);
}
this.animateTilesRight(tiles);
break;
}
};


Game.prototype.animateTilesLeft = function(tiles) {
var tileArray = this.sortTiles(tiles);
for (var i = 0; i < tileArray.length; i++) {
if (tileArray[i] !== 0) {
var tileRow = tileArray[i].dataset.row.charAt(1);
if (oldTileRow != tileRow) {
var j = 0;
}
var tileVal = tileArray[i].dataset.val;
var newCol = j;
var oldCol = tileArray[i].dataset.col.charAt(1);
if (this.board[tileRow][j] !== 0) {
if(this.board[tileRow][j] === tileVal) {
// move tile[i] to position of this.board[tileRow][i]
// access tile element's dataset.col and update it
var moveAmt = this.calcMoveAmt(oldCol, newCol);
tileArray[i].animate({left: moveAmt}, 50);
tileArray[i].dataset.col = "c" + j;
}
else {
var moveAmt = this.calcMoveAmt(oldCol, newCol);
tileArray[i].animate({left: moveAmt}, 50);
// move tile[i] to position of this.board[tileRow][i]
tileArray[i].dataset.col = "c" + j;
tileArray[i].dataset.val = this.board[tileRow][j];
$(tileArray[i]).html(tileArray[i].dataset.val);
// and reassign the value to be this.board[tileRow][i]
// tileArray[i].dataset.val = this.board[tileRow][i];
}
}
else {
var moveAmt = this.calcMoveAmt(oldCol, 0);
tileArray[i].animate({left: moveAmt}, 50);
tileArray[i].dataset.col = "c" + 0;
tileArray[i].remove();
// then delete the tile because it has been combined
}
}
var oldTileRow = tileRow;
if (j !== undefined && tileArray[i] !== 0) {
j++;
}
}
};

Game.prototype.animateTilesRight = function(tiles) {
var tileArray = this.sortTiles(tiles);
for (var i = 0; i < tileArray.length; i++) {
if (tileArray[i] !== 0) {
var tileRow = tileArray[i].dataset.row.charAt(1);
if (oldTileRow != tileRow) {
var j = 3;
}
var tileVal = tileArray[i].dataset.val;
var newCol = j;
var oldCol = tileArray[i].dataset.col.charAt(1);
if (this.board[tileRow][j] !== 0) {
if(this.board[tileRow][j] === tileVal) {
// move tile[i] to position of this.board[tileRow][i]
// access tile element's dataset.col and update it
var moveAmt = this.calcMoveAmtRight(oldCol, newCol);
tileArray[i].animate({left: moveAmt}, 50);
tileArray[i].dataset.col = "c" + j;
}
else {
var moveAmt = this.calcMoveAmtRight(oldCol, newCol);
tileArray[i].animate({left: moveAmt}, 50);
// move tile[i] to position of this.board[tileRow][i]
tileArray[i].dataset.col = "c" + j;
tileArray[i].dataset.val = this.board[tileRow][j];
$(tileArray[i]).html(tileArray[i].dataset.val);
// and reassign the value to be this.board[tileRow][i]
// tileArray[i].dataset.val = this.board[tileRow][i];
}
}
else {
var moveAmt = this.calcMoveAmtRight(oldCol, 0);
tileArray[i].animate({left: moveAmt}, 50);
tileArray[i].dataset.col = "c" + 0;
tileArray[i].remove();
// then delete the tile because it has been combined
}
}
var oldTileRow = tileRow;
if (j !== undefined && tileArray[i] !== 0) {
j--;
}
}
};

Game.prototype.calcMoveAmt = function(oldCol,newCol) {
var colDiff = oldCol - newCol;
var moveAmt = 135 * colDiff;
return '-=' + moveAmt + 'px';
};

Game.prototype.calcMoveAmtRight = function(oldCol,newCol) {
var colDiff = Math.abs(oldCol - newCol);
var moveAmt = 135 * colDiff;
return '+=' + moveAmt + 'px';
};

// used inside the moveTiles function
Game.prototype.updateBoardRight = function(arr,rowIndex) {
var brd = this.board[rowIndex];
switch(arr.length) {
case 1:
this.board[rowIndex] = [0,0,0,arr[0]];
break;
case 2:
if (arr[0] === arr[1]) {
this.board[rowIndex] = [0,0,0,(arr[0] + arr[1])];
this.score += (arr[0] + arr[1]);
} else {
this.board[rowIndex] = [0,0,arr[0],arr[1]];
}
break;
case 3:
if (arr[1] === arr[2]) {
this.board[rowIndex] = [0,0,arr[0],(arr[1] + arr[2])];
this.score += (arr[1] + arr[2]);
} else if (arr[0] === arr[1]) {
this.board[rowIndex] = [0,0,(arr[0] + arr[1]),arr[2]];
this.score += (arr[0] + arr[1]);
} else {
this.board[rowIndex] = [0,arr[0],arr[1],arr[2]];
}
break;
case 4:
if (arr[2] == arr[3]) {
if (arr[0] == arr[1]){
this.board[rowIndex] = [0,0,(arr[0] + arr[1]), (arr[2] + arr[3])];
this.score += (arr[0] + arr[1]);
this.score += (arr[2] + arr[3]);
} else {
this.board[rowIndex] = [0, arr[0], arr[1], (arr[2] + arr[3])];
this.score += (arr[2] + arr[3]);
}
} else if (arr[1] === arr[2]) {
this.board[rowIndex] = [0, arr[0], (arr[1] + arr[2]), arr[3]];
this.score += (arr[1] + arr[2]);
} else if (arr[0] == arr[1]) {
this.board[rowIndex] = [0,(arr[0] + arr[1]),arr[2],arr[3]];
this.score += (arr[0] + arr[1]);
} else {
this.board[rowIndex] = arr;
}
break;
}
$(".score").html("Score: " + this.score);
};

// used inside the moveTiles function
Game.prototype.updateBoardLeft = function(arr,rowIndex) {
var brd = this.board[rowIndex];
switch(arr.length) {
case 1:
this.board[rowIndex] = [arr[0],0,0,0];
break;
case 2:
if (arr[0] === arr[1]) {
this.board[rowIndex] = [(arr[0] + arr[1]),0,0,0];
this.score += (arr[0] + arr[1]);
} else {
this.board[rowIndex] = [arr[0],arr[1],0,0];
}
break;
case 3:
if (arr[0] === arr[1]) {
this.board[rowIndex] = [(arr[0] + arr[1]), arr[2],0,0];
this.score += (arr[0] + arr[1]);
} else if (arr[1] === arr[2]) {
this.board[rowIndex] = [arr[0],(arr[1] + arr[2]),0,0];
this.score += (arr[1] + arr[2]);
} else {
this.board[rowIndex] = [arr[0],arr[1],arr[2],0];
}
break;
case 4:
if (arr[0] == arr[1]) {
if (arr[2] == arr[3]){
this.board[rowIndex] = [(arr[0] + arr[1]), (arr[2] + arr[3]), 0,0];
this.score += (arr[0] + arr[1]);
this.score += (arr[2] + arr[3]);
} else {
this.board[rowIndex] = [(arr[0] + arr[1]),arr[2], arr[3], 0];
this.score += (arr[0] + arr[1]);
}
} else if (arr[1] === arr[2]) {
this.board[rowIndex] = [arr[0], (arr[1] + arr[2]), arr[3], 0];
this.score += (arr[1] + arr[2]);
} else if (arr[2] == arr[3]) {
this.board[rowIndex] = [arr[0], arr[1], (arr[2] + arr[3]), 0];
this.score += (arr[2] + arr[3]);
} else {
this.board[rowIndex] = arr;
}
break;
}
console.log("the score is now " + this.score);
$(".score").html("Score: " + this.score);
};

// call this function twice when creating a new game, call it on every turn
Game.prototype.createRandomTile = function() {
function getRando(min,max){
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// randomly pick one
var rando = getRando(0,this.availableSquares);
// calculates the index of the intter array
var innerArr = ((rando/4).toString()).charAt(0);
// calculates the index in the innerArray that the tile should ba assiged to
var innerArrIndex = (rando - (innerArr * 4));
// looks at the index in the inner Array and if no empty moves to the next index
while (this.board[innerArr][innerArrIndex] !== 0) {
innerArrIndex++;
}
// assigns the tile value to the board
var twoOrFour = getRando(0,9);
var tileVal;
if (twoOrFour === 0) {
tileVal = 4;
} else {
tileVal = 2;
}
this.board[innerArr][innerArrIndex] = tileVal;
// assign a tile there in the HTML
$(".cells").after('<div class="tile" data-row="r' + innerArr +'", data-col="c' + innerArrIndex + '" data-val="' + tileVal + '">' + tileVal + '</div>');
};


$(document).ready(function() {
console.log("ready to go!");
// Any interactive jQuery functionality
var game = new Game();

// randomly assign two tiles
game.createRandomTile();
game.createRandomTile();
game.createRandomTile();
game.createRandomTile();
game.createRandomTile();
game.createRandomTile();
game.createRandomTile();
$('body').keydown(function(event){
var arrows = [37, 38, 39, 40];
if (arrows.indexOf(event.which) > -1) {
var tile = $('.tile');

game.moveTile(tile, event.which);
var tiles = $('.tile');
game.moveTiles(tiles, event.which);
}
});

// check to see if we lost
// yes => it's over!
// no => another game loop!
});
16 changes: 16 additions & 0 deletions stylesheets/2048.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
html {
font: normal normal 30px/1 "Clear Sans", "Helvetica Neue", Arial, sans-serif;
background: #faf8ef;
}

#gameboard {
Expand Down Expand Up @@ -59,3 +60,18 @@ html {
.tile[data-val="512"] { background: #edc850; }
.tile[data-val="1024"] { background: #edc53f; }
.tile[data-val="2048"] { background: #edc22e; }

h1.title {
font-size: 80px;
font-weight: bold;
margin: auto;
text-align: center;
font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
color: #776e65;
}

.score {
color: #776e65;
margin: auto;
text-align: center;
}