diff --git a/index.html b/index.html index 4740408..ee73554 100644 --- a/index.html +++ b/index.html @@ -3,30 +3,40 @@ 2048 + -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+

2048

+
+ SCORE +
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
2
diff --git a/javascripts/2048.js b/javascripts/2048.js index 07aef24..da6b5b6 100644 --- a/javascripts/2048.js +++ b/javascripts/2048.js @@ -1,42 +1,256 @@ var Game = function() { + this.newGame(); +}; + +Game.prototype.newGame = function() { this.board = [[0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0]]; + // this.board = [[2, 2, 32, 512], + // [2, 16, 320, 256], + // [4, 2, 64, 128], + // [1048, 90, 1024, 8]]; + this.addTile(); + this.addTile(); + this.win = false; + this.lose = false; + this.score = 0; }; +var mergeBackwards = function(array){ + var score = 0; + var squished_array = []; + while (array.length > 0) { + if (array.length === 1) { + squished_array.push(array[0]); + array.splice(0, 1); + } else if (array[0] === array[1]) { + var mergeVal = array[0] * 2; + squished_array.push(mergeVal); + score += mergeVal; + array.splice(0, 2); + } else { + squished_array.push(array[0]); + array.splice(0, 1); + } + } + return { squished_array: squished_array, + score: score + }; +}; +var mergeForwards = function(array){ + var score = 0; + var squished_array = []; + while (array.length > 0) { + if (array.length === 1) { + squished_array.unshift(array[0]); + array.splice(0, 1); + } else if (array[array.length-1] === array[array.length-2]) { + var mergeVal = array[array.length-1] * 2; + squished_array.unshift(mergeVal); + score += mergeVal; + array.splice(array.length-2, 2); + } else { + squished_array.unshift(array[array.length-1]); + array.splice(array.length-1, 1); + } + } + return { squished_array: squished_array, + score: score + }; +}; +var axisBuilder = function(boardLength, nonzeros, forward) { + var score = 0; + var mergeReturn; + if (nonzeros.length !== 0) { + if (forward) { + mergeReturn = mergeForwards(nonzeros); + } else { + mergeReturn = mergeBackwards(nonzeros); + } + nonzeros = mergeReturn.squished_array; + score += mergeReturn.score; + } + + var numZeros = (boardLength - nonzeros.length); + var zeros = new Array(numZeros + 1).join('0').split('').map(parseFloat); + var rebuiltArray; + if (forward){ + rebuiltArray = zeros.concat(nonzeros); + } else { + rebuiltArray = nonzeros.concat(zeros); + } + return { rebuiltArray: rebuiltArray, + score: score + }; +}; + +// forward is a boolean, true indicates down or right, row is a boolean, true is left or right, false is up or down +var shifter = function(board, forward, row) { + var score = new Number(); + var cell; + for (var outer = 0; outer < board.length; outer++) { + var nonzeros = []; + for (var inner = 0; inner < board.length; inner++) { + if (row) { + cell = board[outer][inner]; + } else { + cell = board[inner][outer]; + } + if (cell !== 0) { + nonzeros.push(cell); + } + } + var axisBuildReturn = axisBuilder(board.length, nonzeros, forward); + var new_axis = axisBuildReturn.rebuiltArray; + score += axisBuildReturn.score; + if (row){ + board[outer] = new_axis; + } else { + for (var i = 0; i < board.length; i++){ + board[i][outer] = new_axis[i]; + } + } + } + return score; +}; + +function arraysEqual(a1,a2) { + return JSON.stringify(a1)==JSON.stringify(a2); +} + +Game.prototype.checkLoser = function() { + var fakeBoard = this.board.slice(0); + shifter(fakeBoard, true, true); + shifter(fakeBoard, false, true); + shifter(fakeBoard, true, false); + shifter(fakeBoard, false, false); + if (arraysEqual(fakeBoard, this.board)) { + this.lose = true; + } +}; + +Game.prototype.checkWinner = function() { + var flattenedBoard = [].concat.apply([],this.board); + if (flattenedBoard.indexOf(2048) !== -1) { + this.win = true; + } +}; + +Game.prototype.addTile = function() { + var flattenedBoard = [].concat.apply([],this.board); + if (flattenedBoard.indexOf(0) === -1) { + this.checkLoser(); + return; + } + + var row = Math.floor(Math.random() * 4); + var column = Math.floor(Math.random() * 4); + while (this.board[row][column] !== 0) { + row = Math.floor(Math.random() * 4); + column = Math.floor(Math.random() * 4); + } + var options = [2,2,2,2,2,2,2,2,2,4]; + var value = options[Math.floor(Math.random() * options.length)]; + this.board[row][column] = value; +}; + +var floatPoints = function(points) { + $("#point-float").append("+" + points); + $("#point-float").animate({ + top: '-=100px', opacity: 0}, 1000, function(){ + $(this).css({'top': '+=100px', 'opacity':100}); + $("#point-float").empty(); + } ); +}; Game.prototype.moveTile = function(tile, direction) { - // Game method here + var points; switch(direction) { case 38: //up - console.log('up'); + // console.log('up'); + points = shifter(this.board, false, false); + this.score += points; + if (points !== 0){ floatPoints(points); } break; case 40: //down - console.log('down'); + points = shifter(this.board, true, false); + this.score += points; + if (points !== 0){ floatPoints(points); } + // console.log('down'); break; case 37: //left - console.log('left'); + // console.log('left'); + points = shifter(this.board, false, true); + this.score += points; + if (points !== 0){ floatPoints(points); } break; case 39: //right - console.log('right'); + // console.log('right'); + points = shifter(this.board, true, true); + this.score += points; + if (points !== 0){ floatPoints(points); } break; } }; +Game.prototype.drawBoard = function(){ + for(var row = 0; row < this.board.length; row++) { + for(var col = 0; col < this.board.length; col++) { + var value = this.board[row][col]; + if (value !== 0) { + $("#gameboard").append($("
" + value + "
")); + } + } + } +}; + +Game.prototype.updateScore = function(){ + $("#score-value").empty(); + $("#score-value").append(this.score); +}; + +Game.prototype.clearBoard = function(){ + $(".tile").remove(); +}; + $(document).ready(function() { - console.log("ready to go!"); // Any interactive jQuery functionality var game = new Game(); - + game.drawBoard(); + game.updateScore(); $('body').keydown(function(event){ + if (game.lose || game.win) { + return; + } var arrows = [37, 38, 39, 40]; if (arrows.indexOf(event.which) > -1) { var tile = $('.tile'); game.moveTile(tile, event.which); + game.addTile(); + game.clearBoard(); + game.drawBoard(); + game.updateScore(); + game.checkWinner(); + if (game.win) { + $("#gameboard").append("

You WIN!!!!!!

"); + } else if (game.lose) { + $("#gameboard").append("

Game Over!

"); + } } }); + + $('button').click(function(){ + $("#outcome").remove(); + game.newGame(); + game.clearBoard(); + game.drawBoard(); + game.updateScore(); + console.log("Hi"); + }); + }); diff --git a/stylesheets/2048.css b/stylesheets/2048.css index 2a46a94..25185e7 100644 --- a/stylesheets/2048.css +++ b/stylesheets/2048.css @@ -1,9 +1,82 @@ html { font: normal normal 30px/1 "Clear Sans", "Helvetica Neue", Arial, sans-serif; + background-color: #e6e9f0; +} + +button { + background: #2F4F4F; + color: #ffffe5; + border-radius: 0.5rem; + padding: 2.5%; + font-size: 0.5em; + position: absolute; + top: 16%; + right: 1%; + +} + +#all-content { + width: 18.5rem; + margin: auto; + position: relative; +} + +h1 { + text-align: left; + color: #431c5d; + font-size: 4em; + font-family: 'Neucha', cursive; +} + +#outcome { + color: #2F4F4F; + background-color: rgba(238, 204, 255, .9); + position: absolute; + width: 18.5em; + height: 18.5em; + border-radius: 0.5rem; + z-index: 1; +} +div > p { + vertical-align: middle; + text-align: center; + font-size: 5em; + font-family: 'Neucha', cursive; + /*position: absolute; + top: 37%;*/ +} + +#score { + text-align: center; + background-color: #431c5d; + padding: 2.5%; + font-size: 0.6em; + width: 3rem; + position: absolute; + top: 0; + right: 0; + border-radius: 0.5rem; + color: #e6e9f0; +} + +#point-float { + position: absolute; + top: 6.5%; + right: 6.5%; + font-size: 1.2em; + font-weight: bold; + color: #ff1a75; + +} +#score-value{ + padding-top: 12px; + font-size: 2em; + font-weight: bold; + color: #bccbde; } #gameboard { - background: #bbada0; + background: #431c5d; border-radius: 0.5rem; height: 18.5rem; margin: 1rem auto; @@ -48,14 +121,14 @@ html { .tile[data-col=c2] { left: 9rem; } .tile[data-col=c3] { left: 13.5rem; } -.tile[data-val="2"] { color: #776e65; background-color: #eee4da; } -.tile[data-val="4"] { color: #776e65; background-color: #ede0c8; } -.tile[data-val="8"] { background-color: #f2b179; } -.tile[data-val="16"] { background-color: #f59563; } -.tile[data-val="32"] { background: #f67c5f; } +.tile[data-val="2"] { color: #431c5d; background-color: #bccbde; } +.tile[data-val="4"] { color: #431c5d; background-color: #cdd422; } +.tile[data-val="8"] { background-color: #e05915; } +.tile[data-val="16"] { background-color: #ff1a75; } +.tile[data-val="32"] { background: #3333ff; } .tile[data-val="64"] { background: #f65e3b; } -.tile[data-val="128"] { background: #edcf72; } -.tile[data-val="256"] { background: #edcc61; } -.tile[data-val="512"] { background: #edc850; } -.tile[data-val="1024"] { background: #edc53f; } -.tile[data-val="2048"] { background: #edc22e; } +.tile[data-val="128"] { background: #ff9800; } +.tile[data-val="256"] { background: #e040fb; } +.tile[data-val="512"] { color: #431c5d; background: #64ffda; } +.tile[data-val="1024"] { color: #431c5d; background: #97ff00; } +.tile[data-val="2048"] { background: #259b24; }