diff --git a/README.md b/README.md index 40920f6..3a48e22 100644 --- a/README.md +++ b/README.md @@ -28,3 +28,30 @@ 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. + +EDGE CASES +diag +
2
+
2
+
2
+
2
diff --git a/index.html b/index.html index 4740408..6aa5213 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,19 @@ +
+
+

Score

+
0
+
+
+

Best

+
0
+
+ + +
+
@@ -26,7 +39,11 @@
-
2
+
+ +
+
+
diff --git a/javascripts/2048.js b/javascripts/2048.js index 4b2746c..0883cc6 100644 --- a/javascripts/2048.js +++ b/javascripts/2048.js @@ -1,36 +1,250 @@ +Array.prototype.diff = function(a) { + return this.filter(function(i) {return a.indexOf(i) < 0;}); +}; + var Game = function() { // Game logic and initialization here + this.move = 0; + this.win = false; + this.score = 0; + this.bestScore = 0; + this.start = true; }; +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) + + {setTimeout(() => this.createTile(), 0.25*1000)} + + if (this.win) { + $('#win').text('YOU WON!') + } + +} + +Game.prototype.createMatrix = function(tile, data1, data2, matrix, reverse) { + for (let i = 0; i < 4; i++){ + var queryStr = '.tile[' + data1 +'=' + i +']' + 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); + } + }) + if (row.length > 0) { + matrix.push(row) + } + } + return matrix; +} + +Game.prototype.availableMoves = function() { + //check up and right. + var matrixUp = [] + var matrixLeft = [] + + var tile = $('.tile') + this.createMatrix(tile, 'data-col', 'data-row', matrixUp, "false") + this.createMatrix(tile, 'data-row', 'data-col', matrixLeft, "false") + + return (this.checkMatrix(matrixUp) && this.checkMatrix(matrixLeft)) +} + +Game.prototype.checkMatrix = function(matrix) { + + matrix = matrix.map(function(row) {return row.map(function(i) {return $(row[i]).text()})}); + + var result = true + // available spaces + if (matrix.length < 4){result = false} + + // else check mataches + for (var row=0; row 0 || this.start === true){ + this.start = false; + let availableSpaces = this.unoccupiedSpaces() + let tileLocation = availableSpaces[Math.floor(Math.random() * (availableSpaces.length))]; + 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 { + return false + } +} + + + +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; + 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, 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, move) + i3 = i3+1; + } + } + } +} + +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); + this.score += value + $('.score').text(this.score); + $('#totalScore').append("
+" + value + "
") + $('#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; + } + + // 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') { + + if($(matrix[j][i3])[0].attributes["data-row"].nodeValue != i.toString()){ + $(matrix[j][i3]).attr({ 'data-row' : i.toString()}); + this.move++ + } + } else { + + if($(matrix[j][i3])[0].attributes["data-col"].nodeValue != i.toString()) { + $(matrix[j][i3]).attr({ 'data-col' : i.toString()}); + this.move++ + } + } + } +} + Game.prototype.moveTile = function(tile, direction) { // Game method here switch(direction) { case 38: //up - console.log('up'); + 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; } }; + + $(document).ready(function() { - console.log("ready to go!"); // Any interactive jQuery functionality var game = new Game(); + game.createTile(); + var reset = $('.reset button') + $('body').keydown(function(event){ + if(game.gameOver() === false){ + var arrows = [37, 38, 39, 40]; + if (arrows.indexOf(event.which) > -1) { + var tile = $('.tile'); + game.moveTile(tile, event.which); + } + }else { + $('#win').text(""); + $('#lose').text("GAME OVER"); + $('#gameboard').addClass("lost") + if(game.bestScore < game.score){ + game.bestScore = game.score + $('.best').text(game.bestScore); + } + } + }); + reset.on('click',function(event){ + $('#gameboard').removeClass("lost") + $('#gameboard').addClass("game") + $('#win').text(""); + + $('#lose').remove() - $('body').keydown(function(event){ - var arrows = [37, 38, 39, 40]; - if (arrows.indexOf(event.which) > -1) { - var tile = $('.tile'); - - game.moveTile(tile, event.which); + if(game.bestScore < game.score){ + game.bestScore = game.score + $('.best').text(game.bestScore); } + $('.tile').remove(); + game.score = 0; + $('.score').text(game.score); + game.start = true; + game.win = false + {setTimeout(() => game.createTile(), 0.25*1000)} + }); }); diff --git a/stylesheets/2048.css b/stylesheets/2048.css index 2a46a94..893cc65 100644 --- a/stylesheets/2048.css +++ b/stylesheets/2048.css @@ -2,15 +2,119 @@ 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.5rem; - height: 18.5rem; + border-radius: 0.3rem; + height: 25.5rem; margin: 1rem auto; position: relative; width: 18.5rem; } +#score, #best { + margin: auto; + top: 10; + background: #FF9839; + border-radius: 0.5rem; + width: 9rem; + height: 4.5rem; + font-size: 1.1rem; + font-weight: bold; + line-height: 2rem; + color: #f9f6f2; + text-align: center; + display: inline-block; + margin: auto; +} + +#score p, #best p { + margin: 0; + padding: 0; + margin-top: 0; + letter-spacing: 2.8px; +} + +.score .best { + margin: auto; + top: 10; + background: #FF9839; + border-radius: 0.5rem; + width: 9rem; + height: 4.5rem; + font-size: 1.1rem; + font-weight: bold; + line-height: 2rem; + color: #f9f6f2; + text-align: center; + display: inline-block; + margin: auto; + +} + +#totalScore{ + margin-top: 58px; + width: 100%; + text-align: center; +} + +#win{ + font-size: 1.5rem; + font-weight: 600; + color: #f9f6f2; + margin: 0; + padding: 0; + margin-top: 20px; +} + +#lose{ + font-size: 1.5rem; + font-weight: 600; + color: black; + margin: 0; + padding: 0; + margin-top: 20px; +} + +.lost{ + opacity: 0.6; +} + +.game{ + opacity: 1; +} + +.reset{ + height: 4rem; + display: inline-block; + width: 100%; + margin-top: 0.5rem; + text-align: center; + font-size: 1rem; + +} + +#reset{ + background: rgba(128, 94, 49, 0.56); + border-radius: 0.5rem; + width: 9rem; + height: 4rem; + color: #f9f6f2; + font-size: 1rem; + +} + .cell { background: rgba(238, 228, 218, 0.35); border-radius: 0.5rem; @@ -18,16 +122,16 @@ 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; - border-radius: 0.5rem; font-size: 1.5rem; font-weight: bold; @@ -38,18 +142,19 @@ 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; } +.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; }