From 7884f361d4b6695d34d18a8f544251f0bf087c60 Mon Sep 17 00:00:00 2001 From: Cristal Tay Date: Tue, 5 Jul 2016 13:47:56 -0700 Subject: [PATCH 01/28] answered readme questions --- README.md | 20 ++++++++++++++++++++ index.html | 3 ++- stylesheets/2048.css | 18 +++++++++--------- 3 files changed, 31 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 40920f6..eebbafd 100644 --- a/README.md +++ b/README.md @@ -28,3 +28,23 @@ Recreate as much of the original game as is reasonable in the one week we have a - Document your answers to these questions in this README. - Use your discussion and answers to create tasks for a trello board. Organize those tasks into deliverable components (e.e., _Scoring_, _Tile Collision_, _Win/Loss_). - Open a PR with your discussion notes and answers to the above questions. Include a link to your Trello board. Indicate in the PR which deliverable(s) you are targeting first. + +### ANSWERS +1. How does scoring work? +when 2 of the same tiles love each other (are the same), they add up in the direction of the swipe, starting from the opposite direction of the swipe. +2. When do tiles enter the game? +At the beginning, and every time we swipe, it randomly places a tile in a space available. +3. How do you know if you've won? +When you get a tile that has 2048 +4. How do you know if you've lost? +When all the spaces are filled and none of the same values are next to each other. +5. What makes tiles move? +When the user presses the arrows on the keyboard. It's based on the direction. +6. What happens when they move? +They traverse across each tile (in the direction) and stop if they hit a wall or a different valued tile. If it's the same value, please read number 1. +7. How would you know how far a tile should move? +We are creating pointers, that tell us the last available space a tile can move to. +8. How would you know if tiles would collide? +We check the tile in the direction of the swipe and the closest one to it (in the same direction), if it matches, we add them. Collision! +9. What happens when tiles collide? +They add together, some weird CSS happens and it changes their data val and their actual value in the div. diff --git a/index.html b/index.html index 4740408..c0f5e76 100644 --- a/index.html +++ b/index.html @@ -26,7 +26,8 @@
-
2
+
2
+
4
diff --git a/stylesheets/2048.css b/stylesheets/2048.css index 2a46a94..feb82cb 100644 --- a/stylesheets/2048.css +++ b/stylesheets/2048.css @@ -38,15 +38,15 @@ html { width: 4rem; } -.tile[data-row=r0] { top: 0; } -.tile[data-row=r1] { top: 4.5rem; } -.tile[data-row=r2] { top: 9rem; } -.tile[data-row=r3] { top: 13.5rem; } - -.tile[data-col=c0] { left: 0; } -.tile[data-col=c1] { left: 4.5rem; } -.tile[data-col=c2] { left: 9rem; } -.tile[data-col=c3] { left: 13.5rem; } +.tile[data-row='0'] { top: 0; } +.tile[data-row='1'] { top: 4.5rem; } +.tile[data-row='2'] { top: 9rem; } +.tile[data-row='3'] { top: 13.5rem; } + +.tile[data-col='0'] { left: 0; } +.tile[data-col='1'] { left: 4.5rem; } +.tile[data-col='2'] { left: 9rem; } +.tile[data-col='3'] { left: 13.5rem; } .tile[data-val="2"] { color: #776e65; background-color: #eee4da; } .tile[data-val="4"] { color: #776e65; background-color: #ede0c8; } From 8ab90224a7688eaaf384b26ceaeccc142e42426c Mon Sep 17 00:00:00 2001 From: Cristal Tay Date: Tue, 5 Jul 2016 14:41:01 -0700 Subject: [PATCH 02/28] trying to do fxn. halp. --- README.md | 7 +++++++ index.html | 13 ++++++++++++- javascripts/2048.js | 26 +++++++++++++++++++++++++- 3 files changed, 44 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index eebbafd..3a48e22 100644 --- a/README.md +++ b/README.md @@ -48,3 +48,10 @@ We are creating pointers, that tell us the last available space a tile can move We check the tile in the direction of the swipe and the closest one to it (in the same direction), if it matches, we add them. Collision! 9. What happens when tiles collide? They add together, some weird CSS happens and it changes their data val and their actual value in the div. + +EDGE CASES +diag +
2
+
2
+
2
+
2
diff --git a/index.html b/index.html index c0f5e76..4ec01cc 100644 --- a/index.html +++ b/index.html @@ -26,8 +26,19 @@
+ +
2
2
-
4
+
2
+
2
+ + + diff --git a/javascripts/2048.js b/javascripts/2048.js index 4b2746c..ae41aae 100644 --- a/javascripts/2048.js +++ b/javascripts/2048.js @@ -1,25 +1,49 @@ var Game = function() { // Game logic and initialization here + this._board = [ + [2,0,0,0], + [0,2,0,0], + [0,0,2,0], + [0,0,0,2] + ] }; Game.prototype.moveTile = function(tile, direction) { // Game method here switch(direction) { case 38: //up + console.log('up'); break; + case 40: //down console.log('down'); break; + case 37: //left console.log('left'); break; + case 39: //right console.log('right'); break; } }; +Game.prototype.moveAll = function(tile, direction) { + tile.each(function (key,val) { + console.log(key) + }) + for (let col = 0; col < 4; col++){ + let pointer = 0 + for (let row = 0; row < 4; col++) { + + // if + // pointer++ + // if + } + } +} $(document).ready(function() { console.log("ready to go!"); // Any interactive jQuery functionality @@ -29,7 +53,7 @@ $(document).ready(function() { var arrows = [37, 38, 39, 40]; if (arrows.indexOf(event.which) > -1) { var tile = $('.tile'); - + console.log(tile) game.moveTile(tile, event.which); } }); From 4ce8db9c456aa209826f6d817150886294074170 Mon Sep 17 00:00:00 2001 From: Cristal Tay Date: Tue, 5 Jul 2016 16:45:00 -0700 Subject: [PATCH 03/28] creating functionality for moving. --- index.html | 9 +++-- javascripts/2048.js | 91 ++++++++++++++++++++++++++++++++++++++------- 2 files changed, 83 insertions(+), 17 deletions(-) diff --git a/index.html b/index.html index 4ec01cc..d448f2e 100644 --- a/index.html +++ b/index.html @@ -27,10 +27,11 @@
-
2
-
2
-
2
-
2
+
2
+
2
+
2
+
2
+
2
-
2
-
2
-
2
-
2
-
2
+
4
+
2
+
2
+
2
+
2
-
4
2
-
2
+
2
+
4
+ -
2
-
2
-
4
+
2
+
2
+
4
diff --git a/javascripts/2048.js b/javascripts/2048.js index 3c340ca..606cf1e 100644 --- a/javascripts/2048.js +++ b/javascripts/2048.js @@ -1,10 +1,10 @@ var Game = function() { // Game logic and initialization here this._board = [ - [4,0,0,0], [2,0,0,0], [2,0,0,0], - [2,0,0,0] + [4,0,0,0], + [4,0,0,0] ] }; From 4d62ccf45a6997537f1d78acefef06b2093c43f1 Mon Sep 17 00:00:00 2001 From: Cristal Tay Date: Wed, 6 Jul 2016 13:59:52 -0700 Subject: [PATCH 08/28] holy crap it moves and adds --- javascripts/2048.js | 182 +++++++++++++++++--------------------------- 1 file changed, 70 insertions(+), 112 deletions(-) diff --git a/javascripts/2048.js b/javascripts/2048.js index 606cf1e..da3e8ee 100644 --- a/javascripts/2048.js +++ b/javascripts/2048.js @@ -1,21 +1,84 @@ var Game = function() { // Game logic and initialization here this._board = [ - [2,0,0,0], - [2,0,0,0], - [4,0,0,0], - [4,0,0,0] + [2,2,0,2], + [2,0,2,2], + [0,2,0,0], + [2,0,0,4] ] }; +Game.prototype.moveAll = function(tile) { + + + // create matrix each row represents a column + var matrix = [] + var matrixValues = [] + for (let i = 0; i < tile.length; i++){ + var queryStr = '.tile[data-col=' + i +']' + let row = $(queryStr).sort(function (a, b) { + return +a.getAttribute('data-row') - +b.getAttribute('data-row'); + }) + matrix.push(row) + matrixValues.push(row.text().split("")) + } +// [ +// [2, 4, 2], +// [4, 2, 2], +// [2, 2], +// [4] +// ] + // + // var column = [] + for (let j =0; j < matrix.length -1 ; j++){ //j is column + // for (let i=0; i<4; i++) { // i is the row + // if (matrix[i][j] !== 0 ){ + // column.push(matrix[i][0]); + // } + // } + // console.log(matrix[0][0]) + for (let i=0; i< matrixValues[j].length; i++) { + if (matrixValues[j][i] == matrixValues[j][i+1]) { + + // CHANGES VAL AND DATA + var value = matrixValues[j][i]*2; + matrixValues[j][i] = value + $(matrix[j][i]).attr({ "data-val": value.toString() }); + $(matrix[j][i]).text(value); + + // DELETES + $(matrixValues[j][i]).attr({ "data-row": "0" }); + // matrix[j].splice(i+1,1) + console.log("HI: ", matrix[i][j]) + $(matrix[j][i+1]).remove(); + + // CHANGE INDEXES + + // + // change matrix[0].attr({ "data-val": "4" }) + // matrix[0].text(4) + // + // matrix[0].remove() + // + // matrix[] + // .delete the div + } + } + // console.log(column) + } + + console.log(matrix) +} + Game.prototype.moveTile = function(tile, direction) { // Game method here switch(direction) { case 38: //up - console.log('up'); + console.log(tile); // for (let i = 0; i < tile.length; i++) - tile.attr({ "data-row": "0" }); + // tile.attr({ "data-row": "0" }); + this.moveAll(tile) break; case 40: //down @@ -32,112 +95,7 @@ Game.prototype.moveTile = function(tile, direction) { } }; -Game.prototype.moveAll = function() { - var column = [] - for (let i=0; i<4; i++) { - if (this._board[i][0] !== 0 ){ - column.push(this._board[i][0]); - } - } - console.log(column) - - for (let i=0; i 0 ) && (tempAdd != 0) && (currentValue == tempAdd)) { - // console.log("FIRST") - // - // this._board[pointer][col] = currentValue*2 ; - // this._board[row][col] = 0; - // pointer++; - // tempAdd = 0; - // // tempAddRow = row; - // // jquery to delete currentValue div - // } else if (tempAdd != 0 && tempAddRow != 0) { - // if (row == 3) { - // console.log("SECOND") - // this._board[pointer][col] = tempAdd - // this._board[tempAddRow][col] = 0; - // pointer++ - // this._board[pointer][col] = currentValue; - // this._board[row][col] = 0; - // // currentValue - // break; - // } else { - // console.log("THIRD") - // this._board[pointer][col] = tempAdd; - // this._board[tempAddRow][col] = 0; - // this._board[row][col] = 0; - // tempAdd = 0; - // // tempAddRow = row; - // pointer ++ - // } - // } - // - // if (row === 3 && tempAdd === 0) { - // console.log("FIFTH") - // this._board[pointer][col] = currentValue; - // this._board[row][col] = 0; - // } - // - // if ((tempAdd != 0) && (currentValue != tempAdd)) { - // // tempAdd != 0 && tempAddRow === 0) { - // console.log("FIF SIX") - // this._board[pointer][col] = tempAdd; - // pointer++ - // if (row === 3) { - // this._board[pointer][col] = tempAdd; - // } - // // this._board[] - // - // } - // // } else if (row === 3 && tempAdd != 0) - // - // if (currentValue > 0) { - // console.log("SIXTH") - // tempAdd = currentValue; - // tempAddRow = row; - // // console.log("TEMPADD: " + tempAdd + " tEMPROW: " + tempAddRow) - // // console.log(this._board) - // } - // - // - // } - // // console.log(col) - // } - // return this._board -} - - - // .dataset - // [0].dataset.row - // if - // pointer++ // $('.tile[data-row=0]') $(document).ready(function() { @@ -146,7 +104,7 @@ $(document).ready(function() { var game = new Game(); console.log("START000000:", game._board) - console.log(game.moveAll()) + // console.log(game.moveAll()) $('body').keydown(function(event){ var arrows = [37, 38, 39, 40]; From 205e685ce3857aca00286e066df11b79b9b026d6 Mon Sep 17 00:00:00 2001 From: Cristal Tay Date: Wed, 6 Jul 2016 14:10:01 -0700 Subject: [PATCH 09/28] it adds and pushes up. yo's code is in there via slack --- javascripts/2048.js | 46 +++++++++++++++++++++------------------------ 1 file changed, 21 insertions(+), 25 deletions(-) diff --git a/javascripts/2048.js b/javascripts/2048.js index da3e8ee..ea8bcfb 100644 --- a/javascripts/2048.js +++ b/javascripts/2048.js @@ -20,7 +20,7 @@ Game.prototype.moveAll = function(tile) { return +a.getAttribute('data-row') - +b.getAttribute('data-row'); }) matrix.push(row) - matrixValues.push(row.text().split("")) + // matrixValues.push(row.text().split("")) } // [ // [2, 4, 2], @@ -31,45 +31,41 @@ Game.prototype.moveAll = function(tile) { // // var column = [] for (let j =0; j < matrix.length -1 ; j++){ //j is column - // for (let i=0; i<4; i++) { // i is the row - // if (matrix[i][j] !== 0 ){ - // column.push(matrix[i][0]); - // } - // } - // console.log(matrix[0][0]) - for (let i=0; i< matrixValues[j].length; i++) { - if (matrixValues[j][i] == matrixValues[j][i+1]) { + + for (let i=0; i< matrix[j].length; i++) { + if ($(matrix[j][i]).text().toString() === $(matrix[j][i+1]).text().toString()) { // CHANGES VAL AND DATA - var value = matrixValues[j][i]*2; - matrixValues[j][i] = value + var value = $(matrix[j][i]).text()*2; $(matrix[j][i]).attr({ "data-val": value.toString() }); $(matrix[j][i]).text(value); // DELETES - $(matrixValues[j][i]).attr({ "data-row": "0" }); - // matrix[j].splice(i+1,1) - console.log("HI: ", matrix[i][j]) + $(matrix[j][i]).attr({ "data-row": "0" }); $(matrix[j][i+1]).remove(); - - // CHANGE INDEXES - - // - // change matrix[0].attr({ "data-val": "4" }) - // matrix[0].text(4) - // - // matrix[0].remove() - // - // matrix[] - // .delete the div + $(matrix[j][i+2]).attr({ "data-row": (i+1).toString()}); } } + // console.log(column) } console.log(matrix) } + // matrix[j].splice(i+1,1) + // console.log("HI: ", matrix[j][i]) + // CHANGE INDEXES + + // + // change matrix[0].attr({ "data-val": "4" }) + // matrix[0].text(4) + // + // matrix[0].remove() + // + // matrix[] + // .delete the div + Game.prototype.moveTile = function(tile, direction) { // Game method here switch(direction) { From 73cc92faee58fa1e3a46c15ca3ab3312558f095e Mon Sep 17 00:00:00 2001 From: Cristal Tay Date: Wed, 6 Jul 2016 14:30:51 -0700 Subject: [PATCH 10/28] holy effing crap it works. --- index.html | 29 ++++++++++++++++++----------- javascripts/2048.js | 24 +++++++++++++++--------- 2 files changed, 33 insertions(+), 20 deletions(-) diff --git a/index.html b/index.html index c7b306b..87be717 100644 --- a/index.html +++ b/index.html @@ -28,19 +28,26 @@
2
-
2
-
4
- - +
2
+ + +
2
+ +
2
+ - + +
2
+ + + +
2
+ diff --git a/javascripts/2048.js b/javascripts/2048.js index ea8bcfb..91aa422 100644 --- a/javascripts/2048.js +++ b/javascripts/2048.js @@ -1,11 +1,11 @@ var Game = function() { // Game logic and initialization here - this._board = [ - [2,2,0,2], - [2,0,2,2], - [0,2,0,0], - [2,0,0,4] - ] + // this._board = [ + // [2,2,0,2], + // [2,0,2,2], + // [0,2,0,0], + // [2,0,0,4] + // ] }; Game.prototype.moveAll = function(tile) { @@ -30,9 +30,10 @@ Game.prototype.moveAll = function(tile) { // ] // // var column = [] - for (let j =0; j < matrix.length -1 ; j++){ //j is column + for (let j = 0; j < matrix.length -1 ; j++){ //j is column for (let i=0; i< matrix[j].length; i++) { + console.log("i: ", i) if ($(matrix[j][i]).text().toString() === $(matrix[j][i+1]).text().toString()) { // CHANGES VAL AND DATA @@ -41,9 +42,14 @@ Game.prototype.moveAll = function(tile) { $(matrix[j][i]).text(value); // DELETES - $(matrix[j][i]).attr({ "data-row": "0" }); + $(matrix[j][i]).attr({ "data-row": i.toString() }); $(matrix[j][i+1]).remove(); - $(matrix[j][i+2]).attr({ "data-row": (i+1).toString()}); + matrix[j].splice(i+1,1) + console.log(matrix[j]) + // $(matrix[j][i+2]).attr({ "data-row": (i+1).toString()}); + } else { + console.log("hi") + $(matrix[j][i]).attr({ "data-row": i.toString()}); } } From de2d8fe0953f826e5955ef3113da95f4ea02d7ee Mon Sep 17 00:00:00 2001 From: Cristal Tay Date: Wed, 6 Jul 2016 16:24:57 -0700 Subject: [PATCH 11/28] working on up and down --- index.html | 16 +++---- javascripts/2048.js | 101 ++++++++++++++++++++++++++++++++------------ 2 files changed, 83 insertions(+), 34 deletions(-) diff --git a/index.html b/index.html index 87be717..d1701fa 100644 --- a/index.html +++ b/index.html @@ -29,23 +29,23 @@
2
2
- +
2
+
4
2
- +
2
2
2
- +
2
+
2
2
- - +
2
+
2
+
2
2
diff --git a/javascripts/2048.js b/javascripts/2048.js index 91aa422..a6bfb09 100644 --- a/javascripts/2048.js +++ b/javascripts/2048.js @@ -8,57 +8,105 @@ var Game = function() { // ] }; -Game.prototype.moveAll = function(tile) { +Game.prototype.moveAll = function(tile, num) { - - // create matrix each row represents a column var matrix = [] var matrixValues = [] - for (let i = 0; i < tile.length; i++){ - var queryStr = '.tile[data-col=' + i +']' + + if (num%2 == 0) { + this.createMatrix(tile, 'data-col', matrix) + } else if (num%2 == 1) { + this.createMatrix(tile, 'data-col', matrix) + } + + // console.log("i: ", i) + // console.log("MATRIX: ", matrix) + // console.log("MATRIcesss: ", $(matrix)) + // console.log("str1: ", $(matrix[j][i]).text().toString()) + // console.log("str2: ", $(matrix[j][i+1]).text().toString()) + + // console.log( "a", matrix[j][i].dataset) + // console.log( "b", matrix[j][i].dataset['val'] = value) + // console.log( "c", matrix[j][i].dataset) + + console.log("OUTSIDE: ", matrix[0]) + console.log("OUTSIDE: ", matrix[1]) + console.log("AHHHHHHHHHHHH") + console.log("LENGTH: ", matrix.length) + if (num === 2) { + this.moveTiles(tile, matrix, 2) + } + // console.log(matrix) +} + +Game.prototype.createMatrix = function(tile, data, matrix) { + // var col = $(matrix[j][0]).data("col") + + for (let i = 0; i < 4; i++){ + var queryStr = '.tile[' + data +'=' + i +']' + console.log("query ", queryStr) let row = $(queryStr).sort(function (a, b) { return +a.getAttribute('data-row') - +b.getAttribute('data-row'); }) - matrix.push(row) + // console.log("row ", row) + if (row.length > 0) { + matrix.push(row) + } // matrixValues.push(row.text().split("")) } -// [ -// [2, 4, 2], -// [4, 2, 2], -// [2, 2], -// [4] -// ] - // - // var column = [] - for (let j = 0; j < matrix.length -1 ; j++){ //j is column - - for (let i=0; i< matrix[j].length; i++) { - console.log("i: ", i) - if ($(matrix[j][i]).text().toString() === $(matrix[j][i+1]).text().toString()) { + return matrix; +} +Game.prototype.moveTiles = function(tile, matrix, direction) { + if (direction === 2) { + var start1 = 0 + var start2 = (matrix.length) + var counts = 1 + } else { + var start1 = (matrix.length) + var start2 = 0 + var counts = -1 + } + + for (let j = 0; j < (matrix.length) ; j=j+counts){ + //j is column + // matrix.each do () + // var col = $(matrix[j][0]).data("col") + // .toString() + // console.log("COLOR ", col) + if (direction === 2) { + var val1 = 0 + var val2 = matrix[j].length + var counter = 1 + } else { + var val1 = 0 + var val2 = matrix[j].length + var counter = -1 + } + for (let i = val1; i < val2; i=i+counter) { + if ($(matrix[j][i]).text().toString() === $(matrix[j][i+1]).text().toString()) { + // console.log("ITS A MATCH") // CHANGES VAL AND DATA var value = $(matrix[j][i]).text()*2; $(matrix[j][i]).attr({ "data-val": value.toString() }); + // console.log("VALUE: ", value) $(matrix[j][i]).text(value); + // matrix[j][i] // DELETES $(matrix[j][i]).attr({ "data-row": i.toString() }); $(matrix[j][i+1]).remove(); matrix[j].splice(i+1,1) - console.log(matrix[j]) + // console.log(matrix[j]) // $(matrix[j][i+2]).attr({ "data-row": (i+1).toString()}); } else { - console.log("hi") + // console.log("hi") $(matrix[j][i]).attr({ "data-row": i.toString()}); } } - // console.log(column) } - - console.log(matrix) } - // matrix[j].splice(i+1,1) // console.log("HI: ", matrix[j][i]) // CHANGE INDEXES @@ -80,11 +128,12 @@ Game.prototype.moveTile = function(tile, direction) { console.log(tile); // for (let i = 0; i < tile.length; i++) // tile.attr({ "data-row": "0" }); - this.moveAll(tile) + this.moveAll(tile, 2) break; case 40: //down console.log('down'); + this.moveAll(tile, 4) break; case 37: //left From e9d3a3a9f6a31dc96d517d00e9aa015f4bbae437 Mon Sep 17 00:00:00 2001 From: Cristal Tay Date: Wed, 6 Jul 2016 18:10:58 -0700 Subject: [PATCH 12/28] up down functionality works --- javascripts/2048.js | 131 ++++++++++++++++++++++++++------------------ 1 file changed, 78 insertions(+), 53 deletions(-) diff --git a/javascripts/2048.js b/javascripts/2048.js index a6bfb09..69ac0ff 100644 --- a/javascripts/2048.js +++ b/javascripts/2048.js @@ -8,21 +8,21 @@ var Game = function() { // ] }; -Game.prototype.moveAll = function(tile, num) { +Game.prototype.moveAll = function(tile, dataValue, num, reverse) { var matrix = [] var matrixValues = [] - if (num%2 == 0) { - this.createMatrix(tile, 'data-col', matrix) - } else if (num%2 == 1) { - this.createMatrix(tile, 'data-col', matrix) - } + // if (num % 2 == 0) { + this.createMatrix(tile, 'data-col', matrix, reverse) + // } else if (num % 2 == 1) { + // this.createMatrix(tile, 'data-row', matrix) + // } // console.log("i: ", i) // console.log("MATRIX: ", matrix) // console.log("MATRIcesss: ", $(matrix)) - // console.log("str1: ", $(matrix[j][i]).text().toString()) + // console.log("str1: ", $(matrix[j][i3]).text().toString()) // console.log("str2: ", $(matrix[j][i+1]).text().toString()) // console.log( "a", matrix[j][i].dataset) @@ -33,22 +33,27 @@ Game.prototype.moveAll = function(tile, num) { console.log("OUTSIDE: ", matrix[1]) console.log("AHHHHHHHHHHHH") console.log("LENGTH: ", matrix.length) - if (num === 2) { - this.moveTiles(tile, matrix, 2) - } + + // if (num === 2) { + this.moveTiles(tile, matrix, num) + // } // console.log(matrix) } -Game.prototype.createMatrix = function(tile, data, matrix) { +Game.prototype.createMatrix = function(tile, data, matrix, reverse) { // var col = $(matrix[j][0]).data("col") for (let i = 0; i < 4; i++){ var queryStr = '.tile[' + data +'=' + i +']' console.log("query ", queryStr) let row = $(queryStr).sort(function (a, b) { - return +a.getAttribute('data-row') - +b.getAttribute('data-row'); + if (reverse == 'true') { + return +b.getAttribute('data-row') - +a.getAttribute('data-row'); + } else { + return +a.getAttribute('data-row') - +b.getAttribute('data-row'); + } }) - // console.log("row ", row) + console.log("row ", row) if (row.length > 0) { matrix.push(row) } @@ -58,52 +63,47 @@ Game.prototype.createMatrix = function(tile, data, matrix) { } Game.prototype.moveTiles = function(tile, matrix, direction) { - if (direction === 2) { - var start1 = 0 - var start2 = (matrix.length) - var counts = 1 - } else { - var start1 = (matrix.length) - var start2 = 0 - var counts = -1 - } - - for (let j = 0; j < (matrix.length) ; j=j+counts){ + // if (direction === 2) { + // var start1 = 0 + // var start2 = (matrix.length) + // var counts = 1 + // } else { + // var start1 = (matrix.length) + // var start2 = 0 + // var counts = -1 + // } + + for (let j = 0; j < matrix.length ; j++) { //j is column // matrix.each do () // var col = $(matrix[j][0]).data("col") // .toString() - // console.log("COLOR ", col) + var i3 = 0; if (direction === 2) { - var val1 = 0 - var val2 = matrix[j].length - var counter = 1 + for (let i = 0; i < matrix[j].length; i++) { + var i2 = i + 1; + i3 = i; + var k = i; + this.moveDirection(j,i, i2, matrix, k, i3) + } } else { - var val1 = 0 - var val2 = matrix[j].length - var counter = -1 - } - for (let i = val1; i < val2; i=i+counter) { - if ($(matrix[j][i]).text().toString() === $(matrix[j][i+1]).text().toString()) { - // console.log("ITS A MATCH") - // CHANGES VAL AND DATA - var value = $(matrix[j][i]).text()*2; - $(matrix[j][i]).attr({ "data-val": value.toString() }); - // console.log("VALUE: ", value) - $(matrix[j][i]).text(value); - // matrix[j][i] - - // DELETES - $(matrix[j][i]).attr({ "data-row": i.toString() }); - $(matrix[j][i+1]).remove(); - matrix[j].splice(i+1,1) - // console.log(matrix[j]) - // $(matrix[j][i+2]).attr({ "data-row": (i+1).toString()}); - } else { - // console.log("hi") - $(matrix[j][i]).attr({ "data-row": i.toString()}); + for (let i = 3; i > (3-matrix[j].length); i--) { + var k = i+1; + i2 = i + this.moveDirection(j, i, i2, matrix, k , i3) + i3 = i3+1; } } + + // var val1 = 0 + // var val2 = matrix[j].length + // var counter = 1 + // {} else { + // var val1 = matrix[j].length + // var val2 = 0 + // var counter = -1 + // var work = i+'> 0' + // } // console.log(column) } } @@ -119,6 +119,29 @@ Game.prototype.moveTiles = function(tile, matrix, direction) { // // matrix[] // .delete the div +Game.prototype.moveDirection = function(j, i, i2, matrix, k, i3) { + // console.log("[i]: ", i + " [i2]: ", i2 + " [k]: ", k) + // console.log("COLOR-1 ", i2) + // console.log("[j][i]: ", $(matrix[j][i]).text().toString() + " [j][i2]: " , $(matrix[j][i2]).text().toString() ) + if ($(matrix[j][i3]).text().toString() === $(matrix[j][i3+1]).text().toString()) { + // console.log("ITS A MATCH") + + // CHANGES VAL AND DATA + var value = $(matrix[j][i3]).text()*2; + $(matrix[j][i3]).attr({ "data-val": value.toString() }); + $(matrix[j][i3]).text(value); + + // DELETES + $(matrix[j][i3]).attr({ "data-row": i.toString() }); + $(matrix[j][i3+1]).remove(); + matrix[j].splice(i3,1) + // console.log("SPLICE: ", matrix[j]) + + } else { + $(matrix[j][i3]).attr({ "data-row": i.toString()}); + } +} + Game.prototype.moveTile = function(tile, direction) { // Game method here @@ -128,15 +151,17 @@ Game.prototype.moveTile = function(tile, direction) { console.log(tile); // for (let i = 0; i < tile.length; i++) // tile.attr({ "data-row": "0" }); - this.moveAll(tile, 2) + this.moveAll(tile, 'data-col', 2, 'false') break; case 40: //down console.log('down'); - this.moveAll(tile, 4) + this.moveAll(tile, 'data-col', 4, 'true') break; case 37: //left + this.moveAll(tile, 'data-row') + console.log('left'); break; From a15a76aa072de69d14eb61d5e30a9359acf5035b Mon Sep 17 00:00:00 2001 From: Cristal Tay Date: Wed, 6 Jul 2016 18:33:24 -0700 Subject: [PATCH 13/28] right doesn't work yet. left up and down work --- javascripts/2048.js | 73 ++++++++++++++++++++++++--------------------- 1 file changed, 39 insertions(+), 34 deletions(-) diff --git a/javascripts/2048.js b/javascripts/2048.js index 69ac0ff..cec5a94 100644 --- a/javascripts/2048.js +++ b/javascripts/2048.js @@ -14,7 +14,7 @@ Game.prototype.moveAll = function(tile, dataValue, num, reverse) { var matrixValues = [] // if (num % 2 == 0) { - this.createMatrix(tile, 'data-col', matrix, reverse) + this.createMatrix(tile, dataValue, matrix, reverse) // } else if (num % 2 == 1) { // this.createMatrix(tile, 'data-row', matrix) // } @@ -29,13 +29,13 @@ Game.prototype.moveAll = function(tile, dataValue, num, reverse) { // console.log( "b", matrix[j][i].dataset['val'] = value) // console.log( "c", matrix[j][i].dataset) - console.log("OUTSIDE: ", matrix[0]) - console.log("OUTSIDE: ", matrix[1]) - console.log("AHHHHHHHHHHHH") - console.log("LENGTH: ", matrix.length) + // console.log("OUTSIDE: ", matrix[0]) + // console.log("OUTSIDE: ", matrix[1]) + // console.log("AHHHHHHHHHHHH") + // console.log("LENGTH: ", matrix.length) // if (num === 2) { - this.moveTiles(tile, matrix, num) + this.moveTiles(tile, matrix, num, dataValue) // } // console.log(matrix) } @@ -62,37 +62,32 @@ Game.prototype.createMatrix = function(tile, data, matrix, reverse) { return matrix; } -Game.prototype.moveTiles = function(tile, matrix, direction) { - // if (direction === 2) { - // var start1 = 0 - // var start2 = (matrix.length) - // var counts = 1 - // } else { - // var start1 = (matrix.length) - // var start2 = 0 - // var counts = -1 - // } +Game.prototype.moveTiles = function(tile, matrix, direction, data) { + console.log("DATA: ", data) + var i2 = 0; for (let j = 0; j < matrix.length ; j++) { - //j is column - // matrix.each do () - // var col = $(matrix[j][0]).data("col") - // .toString() var i3 = 0; - if (direction === 2) { + if (direction === 2 || direction === 1 ) { for (let i = 0; i < matrix[j].length; i++) { - var i2 = i + 1; + i2 = i + 1; i3 = i; - var k = i; - this.moveDirection(j,i, i2, matrix, k, i3) + this.moveDirection(j,i, i2, i3, matrix, data) } - } else { + } else if (direction === 3 || direction === 4) { for (let i = 3; i > (3-matrix[j].length); i--) { - var k = i+1; + k = i+1; i2 = i - this.moveDirection(j, i, i2, matrix, k , i3) + this.moveDirection(j, i, i2, i3, matrix, data) i3 = i3+1; } + // else if (direction === 1) { + // for (let i = 0; i < matrix[j].length; i++) { + // i2 = i + 1; + // i3 = i; + // this.moveDirection(j,i, i2, i3, matrix, 'data-row') + // } + } } // var val1 = 0 @@ -105,7 +100,7 @@ Game.prototype.moveTiles = function(tile, matrix, direction) { // var work = i+'> 0' // } // console.log(column) - } + // } } // matrix[j].splice(i+1,1) // console.log("HI: ", matrix[j][i]) @@ -119,7 +114,7 @@ Game.prototype.moveTiles = function(tile, matrix, direction) { // // matrix[] // .delete the div -Game.prototype.moveDirection = function(j, i, i2, matrix, k, i3) { +Game.prototype.moveDirection = function(j, i, i2, i3, matrix, data) { // console.log("[i]: ", i + " [i2]: ", i2 + " [k]: ", k) // console.log("COLOR-1 ", i2) // console.log("[j][i]: ", $(matrix[j][i]).text().toString() + " [j][i2]: " , $(matrix[j][i2]).text().toString() ) @@ -132,13 +127,21 @@ Game.prototype.moveDirection = function(j, i, i2, matrix, k, i3) { $(matrix[j][i3]).text(value); // DELETES - $(matrix[j][i3]).attr({ "data-row": i.toString() }); + if (data === 'data-col') { + $(matrix[j][i3]).attr({ 'data-row' : i.toString() }); + } else { + $(matrix[j][i3]).attr({ 'data-col' : i.toString() }); + } $(matrix[j][i3+1]).remove(); matrix[j].splice(i3,1) // console.log("SPLICE: ", matrix[j]) } else { - $(matrix[j][i3]).attr({ "data-row": i.toString()}); + if (data == 'data-col') { + $(matrix[j][i3]).attr({ 'data-row' : i.toString()}); + } else { + $(matrix[j][i3]).attr({ 'data-col' : i.toString()}); + } } } @@ -160,13 +163,15 @@ Game.prototype.moveTile = function(tile, direction) { break; case 37: //left - this.moveAll(tile, 'data-row') - - console.log('left'); + console.log('left') + this.moveAll(tile, 'data-row', 1, 'false') + // console.log('left'); break; + case 39: //right console.log('right'); + this.moveAll(tile, 'data-row', 3, 'true') break; } }; From 75e81356bf96ee449957ac876d978b877132bbae Mon Sep 17 00:00:00 2001 From: Cristal Tay Date: Wed, 6 Jul 2016 18:40:06 -0700 Subject: [PATCH 14/28] up down left right works. to do win lose and rando --- javascripts/2048.js | 45 +++++++++++---------------------------------- 1 file changed, 11 insertions(+), 34 deletions(-) diff --git a/javascripts/2048.js b/javascripts/2048.js index cec5a94..b5477c6 100644 --- a/javascripts/2048.js +++ b/javascripts/2048.js @@ -8,49 +8,27 @@ var Game = function() { // ] }; -Game.prototype.moveAll = function(tile, dataValue, num, reverse) { +Game.prototype.moveAll = function(tile, dataValue, dataValue2, num, reverse) { var matrix = [] var matrixValues = [] - // if (num % 2 == 0) { - this.createMatrix(tile, dataValue, matrix, reverse) - // } else if (num % 2 == 1) { - // this.createMatrix(tile, 'data-row', matrix) - // } - - // console.log("i: ", i) - // console.log("MATRIX: ", matrix) - // console.log("MATRIcesss: ", $(matrix)) - // console.log("str1: ", $(matrix[j][i3]).text().toString()) - // console.log("str2: ", $(matrix[j][i+1]).text().toString()) - - // console.log( "a", matrix[j][i].dataset) - // console.log( "b", matrix[j][i].dataset['val'] = value) - // console.log( "c", matrix[j][i].dataset) - - // console.log("OUTSIDE: ", matrix[0]) - // console.log("OUTSIDE: ", matrix[1]) - // console.log("AHHHHHHHHHHHH") - // console.log("LENGTH: ", matrix.length) - - // if (num === 2) { + this.createMatrix(tile, dataValue, dataValue2, matrix, reverse) this.moveTiles(tile, matrix, num, dataValue) - // } - // console.log(matrix) + } -Game.prototype.createMatrix = function(tile, data, matrix, reverse) { +Game.prototype.createMatrix = function(tile, data1, data2, matrix, reverse) { // var col = $(matrix[j][0]).data("col") for (let i = 0; i < 4; i++){ - var queryStr = '.tile[' + data +'=' + i +']' + var queryStr = '.tile[' + data1 +'=' + i +']' console.log("query ", queryStr) let row = $(queryStr).sort(function (a, b) { if (reverse == 'true') { - return +b.getAttribute('data-row') - +a.getAttribute('data-row'); + return +b.getAttribute(data2) - +a.getAttribute(data2); } else { - return +a.getAttribute('data-row') - +b.getAttribute('data-row'); + return +a.getAttribute(data2) - +b.getAttribute(data2); } }) console.log("row ", row) @@ -134,7 +112,6 @@ Game.prototype.moveDirection = function(j, i, i2, i3, matrix, data) { } $(matrix[j][i3+1]).remove(); matrix[j].splice(i3,1) - // console.log("SPLICE: ", matrix[j]) } else { if (data == 'data-col') { @@ -154,24 +131,24 @@ Game.prototype.moveTile = function(tile, direction) { console.log(tile); // for (let i = 0; i < tile.length; i++) // tile.attr({ "data-row": "0" }); - this.moveAll(tile, 'data-col', 2, 'false') + this.moveAll(tile, 'data-col', 'data-row', 2, 'false') break; case 40: //down console.log('down'); - this.moveAll(tile, 'data-col', 4, 'true') + this.moveAll(tile, 'data-col', 'data-row', 4, 'true') break; case 37: //left console.log('left') - this.moveAll(tile, 'data-row', 1, 'false') + this.moveAll(tile, 'data-row', 'data-col', 1, 'false') // console.log('left'); break; case 39: //right console.log('right'); - this.moveAll(tile, 'data-row', 3, 'true') + this.moveAll(tile, 'data-row','data-col', 3, 'true') break; } }; From 65d060b15ba42665fae721ce6013e64f35f7db91 Mon Sep 17 00:00:00 2001 From: Yordanos Date: Thu, 7 Jul 2016 15:13:02 -0700 Subject: [PATCH 15/28] created gameOver and createTile function --- index.html | 8 +- javascripts/2048.js | 330 +++++++++++++++++++++++++++++++++++--------- 2 files changed, 266 insertions(+), 72 deletions(-) diff --git a/index.html b/index.html index d1701fa..3aea8d3 100644 --- a/index.html +++ b/index.html @@ -28,17 +28,17 @@
2
-
2
+ -
2
+ diff --git a/javascripts/2048.js b/javascripts/2048.js index b5477c6..c1d7985 100644 --- a/javascripts/2048.js +++ b/javascripts/2048.js @@ -1,11 +1,9 @@ +Array.prototype.diff = function(a) { + return this.filter(function(i) {return a.indexOf(i) < 0;}); +}; + var Game = function() { // Game logic and initialization here - // this._board = [ - // [2,2,0,2], - // [2,0,2,2], - // [0,2,0,0], - // [2,0,0,4] - // ] }; Game.prototype.moveAll = function(tile, dataValue, dataValue2, num, reverse) { @@ -13,17 +11,16 @@ Game.prototype.moveAll = function(tile, dataValue, dataValue2, num, reverse) { var matrix = [] var matrixValues = [] - this.createMatrix(tile, dataValue, dataValue2, matrix, reverse) - this.moveTiles(tile, matrix, num, dataValue) + this.createMatrix(tile, dataValue, dataValue2, matrix, reverse) + this.moveTiles(tile, matrix, num, dataValue) } Game.prototype.createMatrix = function(tile, data1, data2, matrix, reverse) { - // var col = $(matrix[j][0]).data("col") - +//.tile, data1 = data-row or data-col +// up --> (.tile, 'data-col', 'data-row', matrixUp, false) for (let i = 0; i < 4; i++){ var queryStr = '.tile[' + data1 +'=' + i +']' - console.log("query ", queryStr) let row = $(queryStr).sort(function (a, b) { if (reverse == 'true') { return +b.getAttribute(data2) - +a.getAttribute(data2); @@ -31,18 +28,82 @@ Game.prototype.createMatrix = function(tile, data1, data2, matrix, reverse) { return +a.getAttribute(data2) - +b.getAttribute(data2); } }) - console.log("row ", row) if (row.length > 0) { matrix.push(row) } - // matrixValues.push(row.text().split("")) } return matrix; } +Game.prototype.availableMoves = function() { + //check up and right. + var matrixUp = [] + var matrixLeft = [] + + var tile = $('.tile') + createMatrix(tile, 'data-col', 'data-row', matrixUp, "false") + createMatrix(tile, 'data-row', 'data-col', matrixRight, "false") + + matrixUp = matrixUp.map(function() { return $(this).data('value')}) + matrixLeft = matrixLeft.map(function() { return $(this).data('value')}) + + return (checkMatrix(matrixUp) && checkMatrix(matrixLeft)) + +} + +Game.prototype.checkMatrix = function(matrix) { + var result = true + // available spaces + if (matrix.length < 4){result = false} + + // else check mataches + for (let row=0; row2") +} + + + +Game.prototype.gameOver = function(){ + + if(this.unoccupiedSpaces().length === 0){ + return this.availableMoves() + }else { + return false + } +} + + + Game.prototype.moveTiles = function(tile, matrix, direction, data) { - console.log("DATA: ", data) var i2 = 0; for (let j = 0; j < matrix.length ; j++) { var i3 = 0; @@ -59,46 +120,13 @@ Game.prototype.moveTiles = function(tile, matrix, direction, data) { this.moveDirection(j, i, i2, i3, matrix, data) i3 = i3+1; } - // else if (direction === 1) { - // for (let i = 0; i < matrix[j].length; i++) { - // i2 = i + 1; - // i3 = i; - // this.moveDirection(j,i, i2, i3, matrix, 'data-row') - // } - } } - - // var val1 = 0 - // var val2 = matrix[j].length - // var counter = 1 - // {} else { - // var val1 = matrix[j].length - // var val2 = 0 - // var counter = -1 - // var work = i+'> 0' - // } - // console.log(column) - // } + } } - // matrix[j].splice(i+1,1) - // console.log("HI: ", matrix[j][i]) - // CHANGE INDEXES - - // - // change matrix[0].attr({ "data-val": "4" }) - // matrix[0].text(4) - // - // matrix[0].remove() - // - // matrix[] - // .delete the div + Game.prototype.moveDirection = function(j, i, i2, i3, matrix, data) { - // console.log("[i]: ", i + " [i2]: ", i2 + " [k]: ", k) - // console.log("COLOR-1 ", i2) - // console.log("[j][i]: ", $(matrix[j][i]).text().toString() + " [j][i2]: " , $(matrix[j][i2]).text().toString() ) - if ($(matrix[j][i3]).text().toString() === $(matrix[j][i3+1]).text().toString()) { - // console.log("ITS A MATCH") + if ($(matrix[j][i3]).text().toString() === $(matrix[j][i3+1]).text().toString()) { // CHANGES VAL AND DATA var value = $(matrix[j][i3]).text()*2; $(matrix[j][i3]).attr({ "data-val": value.toString() }); @@ -106,10 +134,11 @@ Game.prototype.moveDirection = function(j, i, i2, i3, matrix, data) { // DELETES if (data === 'data-col') { - $(matrix[j][i3]).attr({ 'data-row' : i.toString() }); - } else { - $(matrix[j][i3]).attr({ 'data-col' : i.toString() }); - } + $(matrix[j][i3]).attr({ 'data-row' : i.toString() }); + } else { + $(matrix[j][i3]).attr({ 'data-col' : i.toString() }); + } + $(matrix[j][i3+1]).remove(); matrix[j].splice(i3,1) @@ -127,25 +156,16 @@ Game.prototype.moveTile = function(tile, direction) { // Game method here switch(direction) { case 38: //up - - console.log(tile); - // for (let i = 0; i < tile.length; i++) - // tile.attr({ "data-row": "0" }); this.moveAll(tile, 'data-col', 'data-row', 2, 'false') break; - case 40: //down console.log('down'); this.moveAll(tile, 'data-col', 'data-row', 4, 'true') break; - case 37: //left console.log('left') this.moveAll(tile, 'data-row', 'data-col', 1, 'false') - // console.log('left'); break; - - case 39: //right console.log('right'); this.moveAll(tile, 'data-row','data-col', 3, 'true') @@ -154,16 +174,11 @@ Game.prototype.moveTile = function(tile, direction) { }; - // $('.tile[data-row=0]') $(document).ready(function() { console.log("ready to go!"); // Any interactive jQuery functionality var game = new Game(); - console.log("START000000:", game._board) - - // console.log(game.moveAll()) - $('body').keydown(function(event){ var arrows = [37, 38, 39, 40]; if (arrows.indexOf(event.which) > -1) { @@ -173,3 +188,182 @@ $(document).ready(function() { } }); }); + + + +// +// var Game = function() { +// // Game logic and initialization here +// // this._board = [ +// // [2,2,0,2], +// // [2,0,2,2], +// // [0,2,0,0], +// // [2,0,0,4] +// // ] +// }; +// +// Game.prototype.moveAll = function(tile, dataValue, dataValue2, num, reverse) { +// +// var matrix = [] +// var matrixValues = [] +// +// this.createMatrix(tile, dataValue, dataValue2, matrix, reverse) +// this.moveTiles(tile, matrix, num, dataValue) +// +// } +// +// Game.prototype.createMatrix = function(tile, data1, data2, matrix, reverse) { +// // var col = $(matrix[j][0]).data("col") +// +// for (let i = 0; i < 4; i++){ +// var queryStr = '.tile[' + data1 +'=' + i +']' +// console.log("query ", queryStr) +// let row = $(queryStr).sort(function (a, b) { +// if (reverse == 'true') { +// return +b.getAttribute(data2) - +a.getAttribute(data2); +// } else { +// return +a.getAttribute(data2) - +b.getAttribute(data2); +// } +// }) +// console.log("row ", row) +// if (row.length > 0) { +// matrix.push(row) +// } +// // matrixValues.push(row.text().split("")) +// } +// return matrix; +// } +// +// Game.prototype.moveTiles = function(tile, matrix, direction, data) { +// +// console.log("DATA: ", data) +// var i2 = 0; +// for (let j = 0; j < matrix.length ; j++) { +// var i3 = 0; +// if (direction === 2 || direction === 1 ) { +// for (let i = 0; i < matrix[j].length; i++) { +// i2 = i + 1; +// i3 = i; +// this.moveDirection(j,i, i2, i3, matrix, data) +// } +// } else if (direction === 3 || direction === 4) { +// for (let i = 3; i > (3-matrix[j].length); i--) { +// k = i+1; +// i2 = i +// this.moveDirection(j, i, i2, i3, matrix, data) +// i3 = i3+1; +// } +// // else if (direction === 1) { +// // for (let i = 0; i < matrix[j].length; i++) { +// // i2 = i + 1; +// // i3 = i; +// // this.moveDirection(j,i, i2, i3, matrix, 'data-row') +// // } +// } +// } +// +// // var val1 = 0 +// // var val2 = matrix[j].length +// // var counter = 1 +// // {} else { +// // var val1 = matrix[j].length +// // var val2 = 0 +// // var counter = -1 +// // var work = i+'> 0' +// // } +// // console.log(column) +// // } +// } +// // matrix[j].splice(i+1,1) +// // console.log("HI: ", matrix[j][i]) +// // CHANGE INDEXES +// +// // +// // change matrix[0].attr({ "data-val": "4" }) +// // matrix[0].text(4) +// // +// // matrix[0].remove() +// // +// // matrix[] +// // .delete the div +// Game.prototype.moveDirection = function(j, i, i2, i3, matrix, data) { +// // console.log("[i]: ", i + " [i2]: ", i2 + " [k]: ", k) +// // console.log("COLOR-1 ", i2) +// // console.log("[j][i]: ", $(matrix[j][i]).text().toString() + " [j][i2]: " , $(matrix[j][i2]).text().toString() ) +// if ($(matrix[j][i3]).text().toString() === $(matrix[j][i3+1]).text().toString()) { +// // console.log("ITS A MATCH") +// +// // CHANGES VAL AND DATA +// var value = $(matrix[j][i3]).text()*2; +// $(matrix[j][i3]).attr({ "data-val": value.toString() }); +// $(matrix[j][i3]).text(value); +// +// // DELETES +// if (data === 'data-col') { +// $(matrix[j][i3]).attr({ 'data-row' : i.toString() }); +// } else { +// $(matrix[j][i3]).attr({ 'data-col' : i.toString() }); +// } +// $(matrix[j][i3+1]).remove(); +// matrix[j].splice(i3,1) +// +// } else { +// if (data == 'data-col') { +// $(matrix[j][i3]).attr({ 'data-row' : i.toString()}); +// } else { +// $(matrix[j][i3]).attr({ 'data-col' : i.toString()}); +// } +// } +// } +// +// +// Game.prototype.moveTile = function(tile, direction) { +// // Game method here +// switch(direction) { +// case 38: //up +// +// console.log(tile); +// // for (let i = 0; i < tile.length; i++) +// // tile.attr({ "data-row": "0" }); +// this.moveAll(tile, 'data-col', 'data-row', 2, 'false') +// break; +// +// case 40: //down +// console.log('down'); +// this.moveAll(tile, 'data-col', 'data-row', 4, 'true') +// break; +// +// case 37: //left +// console.log('left') +// this.moveAll(tile, 'data-row', 'data-col', 1, 'false') +// // console.log('left'); +// break; +// +// +// case 39: //right +// console.log('right'); +// this.moveAll(tile, 'data-row','data-col', 3, 'true') +// break; +// } +// }; +// +// +// // $('.tile[data-row=0]') +// +// $(document).ready(function() { +// console.log("ready to go!"); +// // Any interactive jQuery functionality +// var game = new Game(); +// console.log("START000000:", game._board) +// +// // console.log(game.moveAll()) +// +// $('body').keydown(function(event){ +// var arrows = [37, 38, 39, 40]; +// if (arrows.indexOf(event.which) > -1) { +// var tile = $('.tile'); +// console.log(tile) +// game.moveTile(tile, event.which); +// } +// }); +// }); From edb6d289bdc5401aac1db07819e06675c0937f49 Mon Sep 17 00:00:00 2001 From: Yordanos Date: Thu, 7 Jul 2016 15:27:49 -0700 Subject: [PATCH 16/28] createTile stuff --- javascripts/2048.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/javascripts/2048.js b/javascripts/2048.js index c1d7985..a4c3f16 100644 --- a/javascripts/2048.js +++ b/javascripts/2048.js @@ -13,6 +13,8 @@ Game.prototype.moveAll = function(tile, dataValue, dataValue2, num, reverse) { this.createMatrix(tile, dataValue, dataValue2, matrix, reverse) this.moveTiles(tile, matrix, num, dataValue) + let self = this + setTimeout(function(){self.createTile()}, 0.3*1000) } @@ -85,7 +87,7 @@ Game.prototype.unoccupiedSpaces = function() { Game.prototype.createTile = function() { let availableSpaces = this.unoccupiedSpaces() - var tileLocation = availableSpaces[Math.floor(Math.random() * availableSpaces.length)][0]; + let tileLocation = availableSpaces[Math.floor(Math.random() * availableSpaces.length)][0]; $('#gameboard').append("
2
") } From d1f59c017ba93ffcdaba6472f909db0b5f78a843 Mon Sep 17 00:00:00 2001 From: Yordanos Date: Thu, 7 Jul 2016 15:48:05 -0700 Subject: [PATCH 17/28] working on creating a tile --- index.html | 20 ++++++++++---------- javascripts/2048.js | 21 ++++++++++++--------- 2 files changed, 22 insertions(+), 19 deletions(-) diff --git a/index.html b/index.html index 3aea8d3..ddb8162 100644 --- a/index.html +++ b/index.html @@ -28,25 +28,25 @@
2
- - +
16
--> diff --git a/javascripts/2048.js b/javascripts/2048.js index a4c3f16..35ecdc0 100644 --- a/javascripts/2048.js +++ b/javascripts/2048.js @@ -13,8 +13,8 @@ Game.prototype.moveAll = function(tile, dataValue, dataValue2, num, reverse) { this.createMatrix(tile, dataValue, dataValue2, matrix, reverse) this.moveTiles(tile, matrix, num, dataValue) - let self = this - setTimeout(function(){self.createTile()}, 0.3*1000) + // let self = this + setTimeout(() => this.createTile(), 0.3*1000) } @@ -72,22 +72,25 @@ Game.prototype.checkMatrix = function(matrix) { Game.prototype.unoccupiedSpaces = function() { // function creates a matrix from current by creating a matrix with row and col values - let allSpaces = [] - let array = ["0","1", "2", "3"] - array.map(function(x) { allSpaces.push([x+"0"],[x+"1"],[x+"2"],[x+"3"])}); - - let occupiedSpaces = [] + var allSpaces = [] + var array = ["0","1", "2", "3"] + array.map(function(x) { allSpaces.push(x+"0"); allSpaces.push(x+"1"); allSpaces.push(x+"2"); allSpaces.push(x+"3")}); + console.log("all", allSpaces) + var occupiedSpaces = [] // board of spaces that are occupied ["00","04"] $('.tile').map(function() { occupiedSpaces.push($(this).data('row').toString()+$(this).data('col').toString())}); - + console.log("occupied: ", occupiedSpaces) unoccupiedSpaces = allSpaces.diff(occupiedSpaces) + console.log("unoccupied: ", unoccupiedSpaces) return unoccupiedSpaces } Game.prototype.createTile = function() { let availableSpaces = this.unoccupiedSpaces() - let tileLocation = availableSpaces[Math.floor(Math.random() * availableSpaces.length)][0]; + console.log("-->available spaces: ", availableSpaces) + let tileLocation = availableSpaces[Math.floor(Math.random() * availableSpaces.length)]; + console.log("new tile: ", tileLocation) $('#gameboard').append("
2
") } From 6b5c71a186a743087aa9f2f26bbfd383da6d85c6 Mon Sep 17 00:00:00 2001 From: Cristal Tay Date: Thu, 7 Jul 2016 16:41:32 -0700 Subject: [PATCH 18/28] made random functionality work --- javascripts/2048.js | 21 +++++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/javascripts/2048.js b/javascripts/2048.js index 35ecdc0..40e67af 100644 --- a/javascripts/2048.js +++ b/javascripts/2048.js @@ -14,7 +14,8 @@ Game.prototype.moveAll = function(tile, dataValue, dataValue2, num, reverse) { this.createMatrix(tile, dataValue, dataValue2, matrix, reverse) this.moveTiles(tile, matrix, num, dataValue) // let self = this - setTimeout(() => this.createTile(), 0.3*1000) + setTimeout(() => this.createTile(), 1*1000) + console.log("MATRIX AFTER: ", matrix) } @@ -78,10 +79,18 @@ Game.prototype.unoccupiedSpaces = function() { console.log("all", allSpaces) var occupiedSpaces = [] // board of spaces that are occupied ["00","04"] - $('.tile').map(function() { occupiedSpaces.push($(this).data('row').toString()+$(this).data('col').toString())}); + // console.log("ALL TILES PLS: ", $('.tile')) + var x = $('.tile') + for (let i = 0; i < x.length; i++) { + // console.log("THIS DATA? ", x[i].dataset) + occupiedSpaces.push(x[i].dataset.row+x[i].dataset.col) + } + // $('.tile').map(function() { + // console.log($(this).data()) + // occupiedSpaces.push($(this).data('row').toString()+$(this).data('col').toString())}); console.log("occupied: ", occupiedSpaces) unoccupiedSpaces = allSpaces.diff(occupiedSpaces) - console.log("unoccupied: ", unoccupiedSpaces) + // console.log("unoccupied: ", unoccupiedSpaces) return unoccupiedSpaces } @@ -89,8 +98,12 @@ Game.prototype.unoccupiedSpaces = function() { Game.prototype.createTile = function() { let availableSpaces = this.unoccupiedSpaces() console.log("-->available spaces: ", availableSpaces) - let tileLocation = availableSpaces[Math.floor(Math.random() * availableSpaces.length)]; + // Math.floor(Math.random() * 7) + console.log(availableSpaces.length) + let tileLocation = availableSpaces[Math.floor(Math.random() * (availableSpaces.length))]; console.log("new tile: ", tileLocation) + console.log("a:", tileLocation.charAt(0) + " b:", tileLocation.charAt(1)) + $('#gameboard').append("
2
") } From 0a4f73eb3c67925c0d128ee7245c59cf9d5b0d5d Mon Sep 17 00:00:00 2001 From: Yordanos Date: Thu, 7 Jul 2016 16:59:56 -0700 Subject: [PATCH 19/28] trying to fix adding a new tile --- javascripts/2048.js | 42 +++++++++++++++++++++++++----------------- 1 file changed, 25 insertions(+), 17 deletions(-) diff --git a/javascripts/2048.js b/javascripts/2048.js index 40e67af..5d0a1b2 100644 --- a/javascripts/2048.js +++ b/javascripts/2048.js @@ -10,11 +10,12 @@ Game.prototype.moveAll = function(tile, dataValue, dataValue2, num, reverse) { var matrix = [] var matrixValues = [] + var move = 0; this.createMatrix(tile, dataValue, dataValue2, matrix, reverse) - this.moveTiles(tile, matrix, num, dataValue) + this.moveTiles(tile, matrix, num, dataValue, move) // let self = this - setTimeout(() => this.createTile(), 1*1000) + {setTimeout((move) => this.createTile(), 0.21*1000)} console.log("MATRIX AFTER: ", matrix) } @@ -96,15 +97,17 @@ Game.prototype.unoccupiedSpaces = function() { } Game.prototype.createTile = function() { - let availableSpaces = this.unoccupiedSpaces() - console.log("-->available spaces: ", availableSpaces) - // Math.floor(Math.random() * 7) - console.log(availableSpaces.length) - let tileLocation = availableSpaces[Math.floor(Math.random() * (availableSpaces.length))]; - console.log("new tile: ", tileLocation) - console.log("a:", tileLocation.charAt(0) + " b:", tileLocation.charAt(1)) - - $('#gameboard').append("
2
") + if(move > 0){ + let availableSpaces = this.unoccupiedSpaces() + console.log("-->available spaces: ", availableSpaces) + // Math.floor(Math.random() * 7) + console.log(availableSpaces.length) + let tileLocation = availableSpaces[Math.floor(Math.random() * (availableSpaces.length))]; + console.log("new tile: ", tileLocation) + console.log("a:", tileLocation.charAt(0) + " b:", tileLocation.charAt(1)) + + $('#gameboard').append("
2
") + } } @@ -120,7 +123,7 @@ Game.prototype.gameOver = function(){ -Game.prototype.moveTiles = function(tile, matrix, direction, data) { +Game.prototype.moveTiles = function(tile, matrix, direction, data, move) { var i2 = 0; for (let j = 0; j < matrix.length ; j++) { @@ -129,26 +132,27 @@ Game.prototype.moveTiles = function(tile, matrix, direction, data) { for (let i = 0; i < matrix[j].length; i++) { i2 = i + 1; i3 = i; - this.moveDirection(j,i, i2, i3, matrix, data) + this.moveDirection(j,i, i2, i3, matrix, data, move) } } else if (direction === 3 || direction === 4) { for (let i = 3; i > (3-matrix[j].length); i--) { k = i+1; i2 = i - this.moveDirection(j, i, i2, i3, matrix, data) + this.moveDirection(j, i, i2, i3, matrix, data, move) i3 = i3+1; } } } } -Game.prototype.moveDirection = function(j, i, i2, i3, matrix, data) { +Game.prototype.moveDirection = function(j, i, i2, i3, matrix, data, move) { if ($(matrix[j][i3]).text().toString() === $(matrix[j][i3+1]).text().toString()) { // CHANGES VAL AND DATA var value = $(matrix[j][i3]).text()*2; $(matrix[j][i3]).attr({ "data-val": value.toString() }); $(matrix[j][i3]).text(value); + move ++ // DELETES if (data === 'data-col') { @@ -162,9 +166,13 @@ Game.prototype.moveDirection = function(j, i, i2, i3, matrix, data) { } else { if (data == 'data-col') { - $(matrix[j][i3]).attr({ 'data-row' : i.toString()}); + if($(matrix[j][i3]).data('row') != i.toString()){ + $(matrix[j][i3]).attr({ 'data-row' : i.toString()}); + move++ } } else { - $(matrix[j][i3]).attr({ 'data-col' : i.toString()}); + if($(matrix[j][i3]).data('col') != i.toString()){ + $(matrix[j][i3]).attr({ 'data-col' : i.toString()}); + move++ } } } } From e2ace3a64d832d50111fc741f41135069d4aa746 Mon Sep 17 00:00:00 2001 From: Cristal Tay Date: Thu, 7 Jul 2016 17:00:32 -0700 Subject: [PATCH 20/28] idk what the changes are --- javascripts/2048.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/javascripts/2048.js b/javascripts/2048.js index 40e67af..8fa07aa 100644 --- a/javascripts/2048.js +++ b/javascripts/2048.js @@ -14,7 +14,7 @@ Game.prototype.moveAll = function(tile, dataValue, dataValue2, num, reverse) { this.createMatrix(tile, dataValue, dataValue2, matrix, reverse) this.moveTiles(tile, matrix, num, dataValue) // let self = this - setTimeout(() => this.createTile(), 1*1000) + setTimeout(() => this.createTile(), 0.22*1000) console.log("MATRIX AFTER: ", matrix) } From 136fb2f95834abaf16a13b461901832cec906396 Mon Sep 17 00:00:00 2001 From: Cristal Tay Date: Thu, 7 Jul 2016 19:52:12 -0700 Subject: [PATCH 21/28] fixed random tiles to not show if there's no movement --- javascripts/2048.js | 55 ++++++++++++++++++++++++++++----------------- 1 file changed, 35 insertions(+), 20 deletions(-) diff --git a/javascripts/2048.js b/javascripts/2048.js index 29bde98..2dc4e79 100644 --- a/javascripts/2048.js +++ b/javascripts/2048.js @@ -3,6 +3,7 @@ Array.prototype.diff = function(a) { }; var Game = function() { + this.move = 0; // Game logic and initialization here }; @@ -10,13 +11,12 @@ Game.prototype.moveAll = function(tile, dataValue, dataValue2, num, reverse) { var matrix = [] var matrixValues = [] - var move = 0; this.createMatrix(tile, dataValue, dataValue2, matrix, reverse) - this.moveTiles(tile, matrix, num, dataValue, move) + this.moveTiles(tile, matrix, num, dataValue) // let self = this - {setTimeout((move) => this.createTile(), 0.21*1000)} + {setTimeout(() => this.createTile(), 0.21*1000)} console.log("MATRIX AFTER: ", matrix) } @@ -78,7 +78,7 @@ Game.prototype.unoccupiedSpaces = function() { var allSpaces = [] var array = ["0","1", "2", "3"] array.map(function(x) { allSpaces.push(x+"0"); allSpaces.push(x+"1"); allSpaces.push(x+"2"); allSpaces.push(x+"3")}); - console.log("all", allSpaces) + // console.log("all", allSpaces) var occupiedSpaces = [] // board of spaces that are occupied ["00","04"] // console.log("ALL TILES PLS: ", $('.tile')) @@ -90,22 +90,24 @@ Game.prototype.unoccupiedSpaces = function() { // $('.tile').map(function() { // console.log($(this).data()) // occupiedSpaces.push($(this).data('row').toString()+$(this).data('col').toString())}); - console.log("occupied: ", occupiedSpaces) + // console.log("occupied: ", occupiedSpaces) unoccupiedSpaces = allSpaces.diff(occupiedSpaces) // console.log("unoccupied: ", unoccupiedSpaces) return unoccupiedSpaces } -Game.prototype.createTile = function() { - if(move > 0){ +Game.prototype.createTile = function(move) { + console.log("MOVE NOW? ", this.move) + + if( this.move > 0){ let availableSpaces = this.unoccupiedSpaces() - console.log("-->available spaces: ", availableSpaces) + // console.log("-->available spaces: ", availableSpaces) // Math.floor(Math.random() * 7) - console.log(availableSpaces.length) + // console.log(availableSpaces.length) let tileLocation = availableSpaces[Math.floor(Math.random() * (availableSpaces.length))]; - console.log("new tile: ", tileLocation) - console.log("a:", tileLocation.charAt(0) + " b:", tileLocation.charAt(1)) + // console.log("new tile: ", tileLocation) + // console.log("a:", tileLocation.charAt(0) + " b:", tileLocation.charAt(1)) $('#gameboard').append("
2
") } @@ -125,7 +127,7 @@ Game.prototype.gameOver = function(){ Game.prototype.moveTiles = function(tile, matrix, direction, data, move) { - +this.move = 0; var i2 = 0; for (let j = 0; j < matrix.length ; j++) { var i3 = 0; @@ -146,14 +148,13 @@ Game.prototype.moveTiles = function(tile, matrix, direction, data, move) { } } -Game.prototype.moveDirection = function(j, i, i2, i3, matrix, data, move) { - +Game.prototype.moveDirection = function(j, i, i2, i3, matrix, data) { if ($(matrix[j][i3]).text().toString() === $(matrix[j][i3+1]).text().toString()) { // CHANGES VAL AND DATA var value = $(matrix[j][i3]).text()*2; $(matrix[j][i3]).attr({ "data-val": value.toString() }); $(matrix[j][i3]).text(value); - move ++ + this.move++ // DELETES if (data === 'data-col') { @@ -167,14 +168,28 @@ Game.prototype.moveDirection = function(j, i, i2, i3, matrix, data, move) { } else { if (data == 'data-col') { - if($(matrix[j][i3]).data('row') != i.toString()){ + console.log("ROW: ", $(matrix[j][i3])[0].attributes["data-row"].nodeValue + " i: ", i) + + console.dir($(matrix[j][i3])) + // console.dir($(matrix[j][i3])[0].attributes["data-row"]) + if($(matrix[j][i3])[0].attributes["data-row"].nodeValue != i.toString()){ $(matrix[j][i3]).attr({ 'data-row' : i.toString()}); - move++ } + this.move++ + console.log("MEOW") + } } else { - if($(matrix[j][i3]).data('col') != i.toString()){ + console.log("COL: ", $(matrix[j][i3])[0].attributes["data-col"].nodeValue + " i: ", i) + console.dir($(matrix[j][i3])) + // console.log(($(matrix[j][i3])[0].attributes[3]).nodeValue) + + if($(matrix[j][i3])[0].attributes["data-col"].nodeValue != i.toString()) { $(matrix[j][i3]).attr({ 'data-col' : i.toString()}); - move++ } + this.move++ + console.log("WOOF") + } } + console.log("MOVE: ", this.move) + // return this.move; } } @@ -210,7 +225,7 @@ $(document).ready(function() { var arrows = [37, 38, 39, 40]; if (arrows.indexOf(event.which) > -1) { var tile = $('.tile'); - console.log(tile) + // console.log(tile) game.moveTile(tile, event.which); } }); From 938817aa473f9e3aa7762b2cc8ebdcd42708ebe0 Mon Sep 17 00:00:00 2001 From: Cristal Tay Date: Fri, 8 Jul 2016 09:51:26 -0700 Subject: [PATCH 22/28] 2048 with score css --- index.html | 9 ++++++++- javascripts/2048.js | 35 ++++++++++++++++++++++---------- stylesheets/2048.css | 48 ++++++++++++++++++++++++++++++++++++++++---- 3 files changed, 76 insertions(+), 16 deletions(-) diff --git a/index.html b/index.html index ddb8162..b03abcb 100644 --- a/index.html +++ b/index.html @@ -47,7 +47,14 @@
8
2
16
--> - +
+

+ Score +

+
+ +
+
diff --git a/javascripts/2048.js b/javascripts/2048.js index 2dc4e79..ea9f033 100644 --- a/javascripts/2048.js +++ b/javascripts/2048.js @@ -4,6 +4,8 @@ Array.prototype.diff = function(a) { var Game = function() { this.move = 0; + this.win = false; + this.score = 0; // Game logic and initialization here }; @@ -16,8 +18,11 @@ Game.prototype.moveAll = function(tile, dataValue, dataValue2, num, reverse) { this.moveTiles(tile, matrix, num, dataValue) // let self = this - {setTimeout(() => this.createTile(), 0.21*1000)} - console.log("MATRIX AFTER: ", matrix) + {setTimeout(() => this.createTile(), 0.25*1000)} + if (this.win) { + console.log("WINNER") + } + // console.log("MATRIX AFTER: ", matrix) } @@ -98,7 +103,7 @@ Game.prototype.unoccupiedSpaces = function() { } Game.prototype.createTile = function(move) { - console.log("MOVE NOW? ", this.move) + // console.log("MOVE NOW? ", this.move) if( this.move > 0){ let availableSpaces = this.unoccupiedSpaces() @@ -154,7 +159,12 @@ Game.prototype.moveDirection = function(j, i, i2, i3, matrix, data) { var value = $(matrix[j][i3]).text()*2; $(matrix[j][i3]).attr({ "data-val": value.toString() }); $(matrix[j][i3]).text(value); + this.score += value + $('.score').text(this.score); this.move++ + if (value == 2048) { + this.win = true; + } // DELETES if (data === 'data-col') { @@ -163,14 +173,17 @@ Game.prototype.moveDirection = function(j, i, i2, i3, matrix, data) { $(matrix[j][i3]).attr({ 'data-col' : i.toString() }); } - $(matrix[j][i3+1]).remove(); - matrix[j].splice(i3,1) + // {setTimeout(() => Del(), 0.1*1000)} + // function Del() { + $(matrix[j][i3+1]).remove(); + matrix[j].splice(i3,1); + // } } else { if (data == 'data-col') { - console.log("ROW: ", $(matrix[j][i3])[0].attributes["data-row"].nodeValue + " i: ", i) + // console.log("ROW: ", $(matrix[j][i3])[0].attributes["data-row"].nodeValue + " i: ", i) - console.dir($(matrix[j][i3])) + // console.dir($(matrix[j][i3])) // console.dir($(matrix[j][i3])[0].attributes["data-row"]) if($(matrix[j][i3])[0].attributes["data-row"].nodeValue != i.toString()){ $(matrix[j][i3]).attr({ 'data-row' : i.toString()}); @@ -178,17 +191,17 @@ Game.prototype.moveDirection = function(j, i, i2, i3, matrix, data) { console.log("MEOW") } } else { - console.log("COL: ", $(matrix[j][i3])[0].attributes["data-col"].nodeValue + " i: ", i) - console.dir($(matrix[j][i3])) + // console.log("COL: ", $(matrix[j][i3])[0].attributes["data-col"].nodeValue + " i: ", i) + // console.dir($(matrix[j][i3])) // console.log(($(matrix[j][i3])[0].attributes[3]).nodeValue) if($(matrix[j][i3])[0].attributes["data-col"].nodeValue != i.toString()) { $(matrix[j][i3]).attr({ 'data-col' : i.toString()}); this.move++ - console.log("WOOF") + // console.log("WOOF") } } - console.log("MOVE: ", this.move) + // console.log("MOVE: ", this.move) // return this.move; } } diff --git a/stylesheets/2048.css b/stylesheets/2048.css index feb82cb..e97bd51 100644 --- a/stylesheets/2048.css +++ b/stylesheets/2048.css @@ -4,13 +4,50 @@ html { #gameboard { background: #bbada0; - border-radius: 0.5rem; - height: 18.5rem; + border-radius: 0.3rem; + height: 25.5rem; margin: 1rem auto; position: relative; width: 18.5rem; } +#score { + position: absolute; + margin-top: 590px; + margin-left: 35%; + display: block; + top: 10; + background: #362d2d; + border-radius: 0.5rem; + width: 6rem; + height: 4.5rem; + font-size: 1.1rem; + font-weight: bold; + line-height: 4rem; + color: #f9f6f2; + text-align: center; +} + +#score p { + margin: 0; + padding: 0; + margin-top: -30px; + letter-spacing: 2.8px; +} + +.score { + margin-top: -66px; + border-radius: 0.5rem; + font-size: 1.5rem; + font-weight: 600; + line-height: 4rem; + color: #f9f6f2; + text-align: center; + letter-spacing: 2px; + transition: all 0.1s ease-in-out; + +} + .cell { background: rgba(238, 228, 218, 0.35); border-radius: 0.5rem; @@ -18,12 +55,15 @@ html { height: 4rem; margin: 0.5rem 0 0 0.5rem ; width: 4rem; + font-size: 1.5rem; + font-weight: bold; + } .tile { position: absolute; top: 0; left: 0; - transition: all 0.2s ease-in-out; + transition: all 0.1s ease-in-out; color: #f9f6f2; background: #000; @@ -49,7 +89,7 @@ html { .tile[data-col='3'] { left: 13.5rem; } .tile[data-val="2"] { color: #776e65; background-color: #eee4da; } -.tile[data-val="4"] { color: #776e65; background-color: #ede0c8; } +.tile[data-val="4"] { color: #776e65; background-color: #e8dabe; } .tile[data-val="8"] { background-color: #f2b179; } .tile[data-val="16"] { background-color: #f59563; } .tile[data-val="32"] { background: #f67c5f; } From dd30923920bf4eed3d970327a756ca1091d2848b Mon Sep 17 00:00:00 2001 From: Cristal Tay Date: Fri, 8 Jul 2016 10:13:42 -0700 Subject: [PATCH 23/28] can win --- index.html | 14 +++++++++----- javascripts/2048.js | 4 ++++ stylesheets/2048.css | 29 ++++++++++++++++++++++++++--- 3 files changed, 39 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index b03abcb..50273f9 100644 --- a/index.html +++ b/index.html @@ -27,10 +27,10 @@
-
2
-
16
-
4
-
2
+
1024
+
1024
+ + +
+
+
+

Score

- +
diff --git a/javascripts/2048.js b/javascripts/2048.js index ea9f033..28dc120 100644 --- a/javascripts/2048.js +++ b/javascripts/2048.js @@ -19,7 +19,11 @@ Game.prototype.moveAll = function(tile, dataValue, dataValue2, num, reverse) { // let self = this {setTimeout(() => this.createTile(), 0.25*1000)} + if (this.win) { + $('#win').text('YOU') + $('#wins').text('WON!') + console.log("WINNER") } // console.log("MATRIX AFTER: ", matrix) diff --git a/stylesheets/2048.css b/stylesheets/2048.css index e97bd51..b7814b1 100644 --- a/stylesheets/2048.css +++ b/stylesheets/2048.css @@ -14,7 +14,7 @@ html { #score { position: absolute; margin-top: 590px; - margin-left: 35%; + margin-left: 33.5%; display: block; top: 10; background: #362d2d; @@ -48,6 +48,31 @@ html { } +#win{ + font-size: 1.5rem; + font-weight: 600; + line-height: 4rem; + color: #f9f6f2; + margin: 0; + padding: 0; + position: absolute; + margin-top: 600px; + margin-left: 40px; + +} + +#wins{ + font-size: 1.5rem; + font-weight: 600; + line-height: 4rem; + color: #f9f6f2; + margin: 0; + padding: 0; + position: absolute; + margin-top: 600px; + margin-left: 400px; +} + .cell { background: rgba(238, 228, 218, 0.35); border-radius: 0.5rem; @@ -64,10 +89,8 @@ html { position: absolute; top: 0; left: 0; transition: all 0.1s ease-in-out; - color: #f9f6f2; background: #000; - border-radius: 0.5rem; font-size: 1.5rem; font-weight: bold; From 00e24cb95a6f32ee95517be78b37999f3f210c2e Mon Sep 17 00:00:00 2001 From: Yordanos Date: Fri, 8 Jul 2016 13:33:56 -0700 Subject: [PATCH 24/28] reset and best score works --- index.html | 26 ++++++------ javascripts/2048.js | 97 +++++++++++++++++++------------------------- stylesheets/2048.css | 70 ++++++++++++++++++-------------- 3 files changed, 94 insertions(+), 99 deletions(-) diff --git a/index.html b/index.html index 50273f9..f5f6a39 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,17 @@ +
+
+

Score

+
0
+
+
+

Best

+
0
+
+
+
@@ -47,18 +58,9 @@
8
2
16
--> -
-
-
-
-
-

- Score -

-
- -
-
+
+ +
diff --git a/javascripts/2048.js b/javascripts/2048.js index 28dc120..67b8b86 100644 --- a/javascripts/2048.js +++ b/javascripts/2048.js @@ -3,10 +3,11 @@ Array.prototype.diff = function(a) { }; var Game = function() { + // Game logic and initialization here this.move = 0; this.win = false; this.score = 0; - // Game logic and initialization here + this.bestScore = 0; }; Game.prototype.moveAll = function(tile, dataValue, dataValue2, num, reverse) { @@ -16,23 +17,16 @@ Game.prototype.moveAll = function(tile, dataValue, dataValue2, num, reverse) { this.createMatrix(tile, dataValue, dataValue2, matrix, reverse) this.moveTiles(tile, matrix, num, dataValue) - // let self = this {setTimeout(() => this.createTile(), 0.25*1000)} if (this.win) { - $('#win').text('YOU') - $('#wins').text('WON!') - - console.log("WINNER") + $('#win').text('YOU WON!') } - // console.log("MATRIX AFTER: ", matrix) } Game.prototype.createMatrix = function(tile, data1, data2, matrix, reverse) { -//.tile, data1 = data-row or data-col -// up --> (.tile, 'data-col', 'data-row', matrixUp, false) for (let i = 0; i < 4; i++){ var queryStr = '.tile[' + data1 +'=' + i +']' let row = $(queryStr).sort(function (a, b) { @@ -55,14 +49,13 @@ Game.prototype.availableMoves = function() { var matrixLeft = [] var tile = $('.tile') - createMatrix(tile, 'data-col', 'data-row', matrixUp, "false") - createMatrix(tile, 'data-row', 'data-col', matrixRight, "false") + this.createMatrix(tile, 'data-col', 'data-row', matrixUp, "false") + this.createMatrix(tile, 'data-row', 'data-col', matrixLeft, "false") matrixUp = matrixUp.map(function() { return $(this).data('value')}) matrixLeft = matrixLeft.map(function() { return $(this).data('value')}) - return (checkMatrix(matrixUp) && checkMatrix(matrixLeft)) - + return (this.checkMatrix(matrixUp) && this.checkMatrix(matrixLeft)) } Game.prototype.checkMatrix = function(matrix) { @@ -71,9 +64,9 @@ Game.prototype.checkMatrix = function(matrix) { if (matrix.length < 4){result = false} // else check mataches - for (let row=0; row 0){ let availableSpaces = this.unoccupiedSpaces() - // console.log("-->available spaces: ", availableSpaces) - // Math.floor(Math.random() * 7) - // console.log(availableSpaces.length) let tileLocation = availableSpaces[Math.floor(Math.random() * (availableSpaces.length))]; - // console.log("new tile: ", tileLocation) - // console.log("a:", tileLocation.charAt(0) + " b:", tileLocation.charAt(1)) - - $('#gameboard').append("
2
") + var tileValueArray = ["2","4"] + var tileValue = tileValueArray[Math.floor(Math.random() * (tileValueArray.length))]; + $('#gameboard').append("
" + tileValue +"
") } } Game.prototype.gameOver = function(){ - if(this.unoccupiedSpaces().length === 0){ return this.availableMoves() }else { @@ -176,37 +154,23 @@ Game.prototype.moveDirection = function(j, i, i2, i3, matrix, data) { } else { $(matrix[j][i3]).attr({ 'data-col' : i.toString() }); } - - // {setTimeout(() => Del(), 0.1*1000)} - // function Del() { $(matrix[j][i3+1]).remove(); matrix[j].splice(i3,1); - // } - } else { if (data == 'data-col') { - // console.log("ROW: ", $(matrix[j][i3])[0].attributes["data-row"].nodeValue + " i: ", i) - // console.dir($(matrix[j][i3])) - // console.dir($(matrix[j][i3])[0].attributes["data-row"]) if($(matrix[j][i3])[0].attributes["data-row"].nodeValue != i.toString()){ $(matrix[j][i3]).attr({ 'data-row' : i.toString()}); this.move++ console.log("MEOW") } } else { - // console.log("COL: ", $(matrix[j][i3])[0].attributes["data-col"].nodeValue + " i: ", i) - // console.dir($(matrix[j][i3])) - // console.log(($(matrix[j][i3])[0].attributes[3]).nodeValue) if($(matrix[j][i3])[0].attributes["data-col"].nodeValue != i.toString()) { $(matrix[j][i3]).attr({ 'data-col' : i.toString()}); this.move++ - // console.log("WOOF") } } - // console.log("MOVE: ", this.move) - // return this.move; } } @@ -238,13 +202,34 @@ $(document).ready(function() { console.log("ready to go!"); // Any interactive jQuery functionality var game = new Game(); - $('body').keydown(function(event){ - var arrows = [37, 38, 39, 40]; - if (arrows.indexOf(event.which) > -1) { - var tile = $('.tile'); - // console.log(tile) - game.moveTile(tile, event.which); + var reset = $('.reset button') + $('body').keydown(function(event){ + if(game.gameOver() === false){ + console.log("game.over: ", game.gameOver) + console.log("initial game over check") + var arrows = [37, 38, 39, 40]; + if (arrows.indexOf(event.which) > -1) { + var tile = $('.tile'); + game.moveTile(tile, event.which); + } + }else { + console.log("YOU LOST") + $('.win').text("GAME OVER"); + if(game.bestScore < game.score){ + game.bestScore = game.score + $('.best').text(game.bestScore); + } + } + }); + reset.on('click',function(event){ + if(game.bestScore < game.score){ + game.bestScore = game.score + $('.best').text(game.bestScore); } + $('.tile').remove(); + game.score = 0; + $('.score').text(game.score); + game.createTile(); }); }); diff --git a/stylesheets/2048.css b/stylesheets/2048.css index b7814b1..df1030a 100644 --- a/stylesheets/2048.css +++ b/stylesheets/2048.css @@ -11,66 +11,75 @@ html { width: 18.5rem; } -#score { - position: absolute; - margin-top: 590px; - margin-left: 33.5%; - display: block; +#score, #best { + margin: auto; top: 10; - background: #362d2d; + background: #FF9839; border-radius: 0.5rem; - width: 6rem; + width: 9rem; height: 4.5rem; font-size: 1.1rem; font-weight: bold; - line-height: 4rem; + line-height: 2rem; color: #f9f6f2; text-align: center; + display: inline-block; + margin: auto; } -#score p { +#score p, #best p { margin: 0; padding: 0; - margin-top: -30px; + margin-top: 0; letter-spacing: 2.8px; } -.score { - margin-top: -66px; +.score .best { + margin: auto; + top: 10; + background: #FF9839; border-radius: 0.5rem; - font-size: 1.5rem; - font-weight: 600; - line-height: 4rem; + width: 9rem; + height: 4.5rem; + font-size: 1.1rem; + font-weight: bold; + line-height: 2rem; color: #f9f6f2; text-align: center; - letter-spacing: 2px; - transition: all 0.1s ease-in-out; + display: inline-block; + margin: auto; } +#totalScore{ + margin-top: 58px; + width: 100%; + text-align: center; +} + #win{ font-size: 1.5rem; font-weight: 600; - line-height: 4rem; color: #f9f6f2; margin: 0; padding: 0; - position: absolute; - margin-top: 600px; - margin-left: 40px; + margin-top: 20px; } +.reset{ + height: 4rem; + display: inline-block; + width: 100%; + margin-top: 0.5rem; + text-align: center; +} -#wins{ - font-size: 1.5rem; - font-weight: 600; - line-height: 4rem; +#reset{ + background: rgba(128, 94, 49, 0.56); + border-radius: 0.5rem; + width: 9rem; + height: 4rem; color: #f9f6f2; - margin: 0; - padding: 0; - position: absolute; - margin-top: 600px; - margin-left: 400px; } .cell { @@ -82,7 +91,6 @@ html { width: 4rem; font-size: 1.5rem; font-weight: bold; - } .tile { From 951287706567e99ab1cf108bd8197bc905c8788c Mon Sep 17 00:00:00 2001 From: Yordanos Date: Fri, 8 Jul 2016 14:11:48 -0700 Subject: [PATCH 25/28] opacity changes color when you lose. Fixed a couple of bugs --- index.html | 2 ++ javascripts/2048.js | 23 ++++++++++++++++++++--- stylesheets/2048.css | 16 +++++++++++++++- 3 files changed, 37 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index f5f6a39..e168e31 100644 --- a/index.html +++ b/index.html @@ -61,6 +61,8 @@
+
+
diff --git a/javascripts/2048.js b/javascripts/2048.js index 67b8b86..b77e3ed 100644 --- a/javascripts/2048.js +++ b/javascripts/2048.js @@ -52,19 +52,32 @@ Game.prototype.availableMoves = function() { this.createMatrix(tile, 'data-col', 'data-row', matrixUp, "false") this.createMatrix(tile, 'data-row', 'data-col', matrixLeft, "false") - matrixUp = matrixUp.map(function() { return $(this).data('value')}) - matrixLeft = matrixLeft.map(function() { return $(this).data('value')}) + console.log("matrixUp: ", matrixUp) + console.log("matrixLeft: ", matrixLeft) + + // matrixUp = matrixUp.map(function() { return $(this).data('value')}) + // matrixLeft = matrixLeft.map(function() { return $(this).data('value')}) + // console.log("matrixUp: ", matrixUp) + // console.log("matrixLeft: ", matrixLeft) return (this.checkMatrix(matrixUp) && this.checkMatrix(matrixLeft)) } Game.prototype.checkMatrix = function(matrix) { + + matrix = matrix.map(function(row) {console.log("row to start: ", row); return row.map(function(i) {console.log("x again: ", $(row[i]).text()); return $(row[i]).text()})}); + console.log("matrix at CheckMatrix ", matrix) + var result = true // available spaces if (matrix.length < 4){result = false} // else check mataches for (var row=0; row Date: Fri, 8 Jul 2016 16:27:44 -0700 Subject: [PATCH 26/28] points value moves up as you earn them --- index.html | 2 ++ javascripts/2048.js | 27 ++++++++++++++------------- stylesheets/2048.css | 16 ++++++++++++++++ 3 files changed, 32 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index e168e31..273ceab 100644 --- a/index.html +++ b/index.html @@ -16,6 +16,8 @@

Best

0
+ +
diff --git a/javascripts/2048.js b/javascripts/2048.js index b77e3ed..305d982 100644 --- a/javascripts/2048.js +++ b/javascripts/2048.js @@ -52,21 +52,12 @@ Game.prototype.availableMoves = function() { this.createMatrix(tile, 'data-col', 'data-row', matrixUp, "false") this.createMatrix(tile, 'data-row', 'data-col', matrixLeft, "false") - console.log("matrixUp: ", matrixUp) - console.log("matrixLeft: ", matrixLeft) - - // matrixUp = matrixUp.map(function() { return $(this).data('value')}) - // matrixLeft = matrixLeft.map(function() { return $(this).data('value')}) - // console.log("matrixUp: ", matrixUp) - // console.log("matrixLeft: ", matrixLeft) - return (this.checkMatrix(matrixUp) && this.checkMatrix(matrixLeft)) } Game.prototype.checkMatrix = function(matrix) { matrix = matrix.map(function(row) {console.log("row to start: ", row); return row.map(function(i) {console.log("x again: ", $(row[i]).text()); return $(row[i]).text()})}); - console.log("matrix at CheckMatrix ", matrix) var result = true // available spaces @@ -74,10 +65,6 @@ Game.prototype.checkMatrix = function(matrix) { // else check mataches for (var row=0; row 0){ let availableSpaces = this.unoccupiedSpaces() @@ -156,6 +145,18 @@ Game.prototype.moveDirection = function(j, i, i2, i3, matrix, data) { $(matrix[j][i3]).text(value); this.score += value $('.score').text(this.score); + $('#totalScore').append("
+" + value + "
") + console.log("here") + $('#points').animate({'marginTop' : "-=200px"}); + // $("#points").queue(function() { + // $(this).remove(); + // }); + + + + setTimeout($('#totalScore').remove("#points"), 2*1000) + // setTimeout($('#points').remove(), 0.25*1000) + this.move++ if (value == 2048) { this.win = true; diff --git a/stylesheets/2048.css b/stylesheets/2048.css index e2c7acd..9529616 100644 --- a/stylesheets/2048.css +++ b/stylesheets/2048.css @@ -2,6 +2,18 @@ html { font: normal normal 30px/1 "Clear Sans", "Helvetica Neue", Arial, sans-serif; } +#points{ + top: 0; left: 0; + /*transition: all 0.1s ease-in-out;*/ + color: grey; + font-size: 1.1rem; + font-weight: bold; + width: 85%; + display: inline-grid; + position: absolute; + top: 3.7rem; +} + #gameboard { background: #bbada0; border-radius: 0.3rem; @@ -85,6 +97,8 @@ html { width: 100%; margin-top: 0.5rem; text-align: center; + font-size: 1rem; + } #reset{ @@ -93,6 +107,8 @@ html { width: 9rem; height: 4rem; color: #f9f6f2; + font-size: 1rem; + } .cell { From 72742c97ad236c0f9c5dfcff916755d43db81994 Mon Sep 17 00:00:00 2001 From: Yordanos Date: Fri, 8 Jul 2016 17:08:57 -0700 Subject: [PATCH 27/28] changed default value of this.win in reset to false --- javascripts/2048.js | 197 ++----------------------------------------- stylesheets/2048.css | 4 + 2 files changed, 11 insertions(+), 190 deletions(-) diff --git a/javascripts/2048.js b/javascripts/2048.js index 305d982..2620396 100644 --- a/javascripts/2048.js +++ b/javascripts/2048.js @@ -57,7 +57,7 @@ Game.prototype.availableMoves = function() { Game.prototype.checkMatrix = function(matrix) { - matrix = matrix.map(function(row) {console.log("row to start: ", row); return row.map(function(i) {console.log("x again: ", $(row[i]).text()); return $(row[i]).text()})}); + matrix = matrix.map(function(row) {return row.map(function(i) {return $(row[i]).text()})}); var result = true // available spaces @@ -93,7 +93,6 @@ Game.prototype.unoccupiedSpaces = function() { Game.prototype.createTile = function(move) { $('#points').remove() - // console.log("MOVE NOW? ", this.move) if( this.move > 0){ let availableSpaces = this.unoccupiedSpaces() let tileLocation = availableSpaces[Math.floor(Math.random() * (availableSpaces.length))]; @@ -146,7 +145,6 @@ Game.prototype.moveDirection = function(j, i, i2, i3, matrix, data) { this.score += value $('.score').text(this.score); $('#totalScore').append("
+" + value + "
") - console.log("here") $('#points').animate({'marginTop' : "-=200px"}); // $("#points").queue(function() { // $(this).remove(); @@ -176,7 +174,6 @@ Game.prototype.moveDirection = function(j, i, i2, i3, matrix, data) { if($(matrix[j][i3])[0].attributes["data-row"].nodeValue != i.toString()){ $(matrix[j][i3]).attr({ 'data-row' : i.toString()}); this.move++ - console.log("MEOW") } } else { @@ -196,15 +193,12 @@ Game.prototype.moveTile = function(tile, direction) { this.moveAll(tile, 'data-col', 'data-row', 2, 'false') break; case 40: //down - console.log('down'); this.moveAll(tile, 'data-col', 'data-row', 4, 'true') break; case 37: //left - console.log('left') this.moveAll(tile, 'data-row', 'data-col', 1, 'false') break; case 39: //right - console.log('right'); this.moveAll(tile, 'data-row','data-col', 3, 'true') break; } @@ -213,21 +207,17 @@ Game.prototype.moveTile = function(tile, direction) { $(document).ready(function() { - console.log("ready to go!"); // Any interactive jQuery functionality var game = new Game(); var reset = $('.reset button') $('body').keydown(function(event){ if(game.gameOver() === false){ - console.log("game.over: ", game.gameOver) - console.log("initial game over check") var arrows = [37, 38, 39, 40]; if (arrows.indexOf(event.which) > -1) { var tile = $('.tile'); game.moveTile(tile, event.which); } }else { - console.log("YOU LOST") $('#win').text(""); $('#lose').text("GAME OVER"); $('#gameboard').addClass("lost") @@ -239,6 +229,10 @@ $(document).ready(function() { }); reset.on('click',function(event){ $('#gameboard').removeClass("lost") + $('#gameboard').addClass("game") + $('#win').text(""); + + $('#lose').remove() if(game.bestScore < game.score){ game.bestScore = game.score @@ -248,184 +242,7 @@ $(document).ready(function() { game.score = 0; $('.score').text(game.score); game.createTile(); + game.win = false + }); }); - - - -// -// var Game = function() { -// // Game logic and initialization here -// // this._board = [ -// // [2,2,0,2], -// // [2,0,2,2], -// // [0,2,0,0], -// // [2,0,0,4] -// // ] -// }; -// -// Game.prototype.moveAll = function(tile, dataValue, dataValue2, num, reverse) { -// -// var matrix = [] -// var matrixValues = [] -// -// this.createMatrix(tile, dataValue, dataValue2, matrix, reverse) -// this.moveTiles(tile, matrix, num, dataValue) -// -// } -// -// Game.prototype.createMatrix = function(tile, data1, data2, matrix, reverse) { -// // var col = $(matrix[j][0]).data("col") -// -// for (let i = 0; i < 4; i++){ -// var queryStr = '.tile[' + data1 +'=' + i +']' -// console.log("query ", queryStr) -// let row = $(queryStr).sort(function (a, b) { -// if (reverse == 'true') { -// return +b.getAttribute(data2) - +a.getAttribute(data2); -// } else { -// return +a.getAttribute(data2) - +b.getAttribute(data2); -// } -// }) -// console.log("row ", row) -// if (row.length > 0) { -// matrix.push(row) -// } -// // matrixValues.push(row.text().split("")) -// } -// return matrix; -// } -// -// Game.prototype.moveTiles = function(tile, matrix, direction, data) { -// -// console.log("DATA: ", data) -// var i2 = 0; -// for (let j = 0; j < matrix.length ; j++) { -// var i3 = 0; -// if (direction === 2 || direction === 1 ) { -// for (let i = 0; i < matrix[j].length; i++) { -// i2 = i + 1; -// i3 = i; -// this.moveDirection(j,i, i2, i3, matrix, data) -// } -// } else if (direction === 3 || direction === 4) { -// for (let i = 3; i > (3-matrix[j].length); i--) { -// k = i+1; -// i2 = i -// this.moveDirection(j, i, i2, i3, matrix, data) -// i3 = i3+1; -// } -// // else if (direction === 1) { -// // for (let i = 0; i < matrix[j].length; i++) { -// // i2 = i + 1; -// // i3 = i; -// // this.moveDirection(j,i, i2, i3, matrix, 'data-row') -// // } -// } -// } -// -// // var val1 = 0 -// // var val2 = matrix[j].length -// // var counter = 1 -// // {} else { -// // var val1 = matrix[j].length -// // var val2 = 0 -// // var counter = -1 -// // var work = i+'> 0' -// // } -// // console.log(column) -// // } -// } -// // matrix[j].splice(i+1,1) -// // console.log("HI: ", matrix[j][i]) -// // CHANGE INDEXES -// -// // -// // change matrix[0].attr({ "data-val": "4" }) -// // matrix[0].text(4) -// // -// // matrix[0].remove() -// // -// // matrix[] -// // .delete the div -// Game.prototype.moveDirection = function(j, i, i2, i3, matrix, data) { -// // console.log("[i]: ", i + " [i2]: ", i2 + " [k]: ", k) -// // console.log("COLOR-1 ", i2) -// // console.log("[j][i]: ", $(matrix[j][i]).text().toString() + " [j][i2]: " , $(matrix[j][i2]).text().toString() ) -// if ($(matrix[j][i3]).text().toString() === $(matrix[j][i3+1]).text().toString()) { -// // console.log("ITS A MATCH") -// -// // CHANGES VAL AND DATA -// var value = $(matrix[j][i3]).text()*2; -// $(matrix[j][i3]).attr({ "data-val": value.toString() }); -// $(matrix[j][i3]).text(value); -// -// // DELETES -// if (data === 'data-col') { -// $(matrix[j][i3]).attr({ 'data-row' : i.toString() }); -// } else { -// $(matrix[j][i3]).attr({ 'data-col' : i.toString() }); -// } -// $(matrix[j][i3+1]).remove(); -// matrix[j].splice(i3,1) -// -// } else { -// if (data == 'data-col') { -// $(matrix[j][i3]).attr({ 'data-row' : i.toString()}); -// } else { -// $(matrix[j][i3]).attr({ 'data-col' : i.toString()}); -// } -// } -// } -// -// -// Game.prototype.moveTile = function(tile, direction) { -// // Game method here -// switch(direction) { -// case 38: //up -// -// console.log(tile); -// // for (let i = 0; i < tile.length; i++) -// // tile.attr({ "data-row": "0" }); -// this.moveAll(tile, 'data-col', 'data-row', 2, 'false') -// break; -// -// case 40: //down -// console.log('down'); -// this.moveAll(tile, 'data-col', 'data-row', 4, 'true') -// break; -// -// case 37: //left -// console.log('left') -// this.moveAll(tile, 'data-row', 'data-col', 1, 'false') -// // console.log('left'); -// break; -// -// -// case 39: //right -// console.log('right'); -// this.moveAll(tile, 'data-row','data-col', 3, 'true') -// break; -// } -// }; -// -// -// // $('.tile[data-row=0]') -// -// $(document).ready(function() { -// console.log("ready to go!"); -// // Any interactive jQuery functionality -// var game = new Game(); -// console.log("START000000:", game._board) -// -// // console.log(game.moveAll()) -// -// $('body').keydown(function(event){ -// var arrows = [37, 38, 39, 40]; -// if (arrows.indexOf(event.which) > -1) { -// var tile = $('.tile'); -// console.log(tile) -// game.moveTile(tile, event.which); -// } -// }); -// }); diff --git a/stylesheets/2048.css b/stylesheets/2048.css index 9529616..893cc65 100644 --- a/stylesheets/2048.css +++ b/stylesheets/2048.css @@ -91,6 +91,10 @@ html { opacity: 0.6; } +.game{ + opacity: 1; +} + .reset{ height: 4rem; display: inline-block; From d02a17fd8c09d7be5b49dba79ab0e7c6d070a609 Mon Sep 17 00:00:00 2001 From: Yordanos Date: Fri, 8 Jul 2016 17:26:35 -0700 Subject: [PATCH 28/28] able to display a random tile at the start of a new game and when you click reset --- index.html | 21 --------------------- javascripts/2048.js | 10 ++++++---- 2 files changed, 6 insertions(+), 25 deletions(-) diff --git a/index.html b/index.html index 273ceab..6aa5213 100644 --- a/index.html +++ b/index.html @@ -39,27 +39,6 @@
- -
1024
-
1024
- - - - - - - -
diff --git a/javascripts/2048.js b/javascripts/2048.js index 2620396..0883cc6 100644 --- a/javascripts/2048.js +++ b/javascripts/2048.js @@ -8,6 +8,7 @@ var Game = function() { this.win = false; this.score = 0; this.bestScore = 0; + this.start = true; }; Game.prototype.moveAll = function(tile, dataValue, dataValue2, num, reverse) { @@ -92,8 +93,8 @@ Game.prototype.unoccupiedSpaces = function() { Game.prototype.createTile = function(move) { $('#points').remove() - - if( this.move > 0){ + if( this.move > 0 || this.start === true){ + this.start = false; let availableSpaces = this.unoccupiedSpaces() let tileLocation = availableSpaces[Math.floor(Math.random() * (availableSpaces.length))]; var tileValueArray = ["2","4"] @@ -185,7 +186,6 @@ Game.prototype.moveDirection = function(j, i, i2, i3, matrix, data) { } } - Game.prototype.moveTile = function(tile, direction) { // Game method here switch(direction) { @@ -209,6 +209,7 @@ Game.prototype.moveTile = function(tile, direction) { $(document).ready(function() { // Any interactive jQuery functionality var game = new Game(); + game.createTile(); var reset = $('.reset button') $('body').keydown(function(event){ if(game.gameOver() === false){ @@ -241,8 +242,9 @@ $(document).ready(function() { $('.tile').remove(); game.score = 0; $('.score').text(game.score); - game.createTile(); + game.start = true; game.win = false + {setTimeout(() => game.createTile(), 0.25*1000)} }); });