diff --git a/README.md b/README.md index 40920f6..e5365f8 100644 --- a/README.md +++ b/README.md @@ -16,15 +16,24 @@ Recreate as much of the original game as is reasonable in the one week we have a ### Project Baseline - Play a couple games of [2048](http://gabrielecirulli.github.io/2048/). Think about everything that's likely happening in the code to support what's happening on the screen. Once you've got a feel for the game, talk with your pair and answer the following questions: - 1. How does scoring work? - 1. When do tiles enter the game? - 1. How do you know if you've won? - 1. How do you know if you've lost? - 1. What makes tiles move? - 1. What happens when they move? - 1. How would you know how far a tile should move? - 1. How would you know if tiles would collide? - 1. What happens when tiles collide? + + How does scoring work? + - When numbers are able to combine, the sum is added to the total score. + + When do tiles enter the game? + - If movement is possible, when moved a new "2" or "4" tile enters the game. (noted: this is usually on the edge of the game board) + + How do you know if you've won? + - The score of 2048 is reached on any ONE tile. Not combined score. + + How do you know if you've lost? + - You are unable to combine any more tilesand when the squares are full. + + What makes tiles move? + - the arrow keys on the keyboard + + What happens when they move? + - They slide in the direction that the arrow key was pressed. They also slide across the entire board until they encounter a tile they cannot combine with. + + How would you know how far a tile should move? + - They can slide across the board to the furthest empty cell. If the cell adjacent to the sliding tile contains a tile of equal value, they will combine. + + How would you know if tiles would collide? + - See above. If the tile sliding is of equal value to the adjacent tile, they will combine. + + What happens when tiles collide? + - The previous tile that slid is replaced with an empty cell. The adjacent tile it slid into has a new score. Also, a new "2" or "4" tile appears randomly on the board. - 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. diff --git a/index.html b/index.html index 4740408..ca3c2fc 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,12 @@ + 2048 - - +
@@ -26,7 +26,29 @@
-
2
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- + + + + \ No newline at end of file diff --git a/index2.html b/index2.html new file mode 100644 index 0000000..3fec108 --- /dev/null +++ b/index2.html @@ -0,0 +1,21 @@ + + + + 2048 + + + + + +
+
+
+
+
+
+
+
2
+
2
+
+ + diff --git a/javascripts/2048.js b/javascripts/2048.js index 4b2746c..84f0270 100644 --- a/javascripts/2048.js +++ b/javascripts/2048.js @@ -1,36 +1,126 @@ -var Game = function() { - // Game logic and initialization here -}; +function Game() { + var self = this; -Game.prototype.moveTile = function(tile, direction) { - // Game method here + this.gameOver = null; + this.container = null; + + this.initialize = function(selector) { + self.container = $(selector); + self.gameOver = false; + self.newTile(); + $('body').keydown(function(event){ + var arrows = [37, 38, 39, 40] + if (arrows.indexOf(event.which) > -1) { + var tile = $('.tile') + self.moveTile(tile, event.which) + } + }) + } + + // generates a new tile anywhere on the board + this.newTile = function() { + var randoCol = Math.floor((Math.random() * (4 - 0) + 0)); + var randoRow = Math.floor((Math.random() * (4 - 0) + 0)); + + // get a random 2 or 4, 2s are more common than 4s + var newVal = [2, 2, 2, 2, 4]; + var randoVal = newVal[Math.floor(Math.random() * newVal.length)] + var id = (randoRow * 4) + randoCol + var randoTile = $('#' + id) + var emptyList = $('div.tile[data-val=""]') + + // if id is in empty list, assign it to the board + // this loop needs to happen AFTER emptyList gets assigned + $.each(emptyList, function(index, value) { + if ($(value).attr('#id') === $(randoTile).attr('#id')) { + randoTile.attr('data-row', "r" + randoRow); + randoTile.attr('data-col', "c" + randoCol); + randoTile.attr('data-val', randoVal); + randoTile.text(randoVal); + emptyList.splice(index, 1) + } + }) + } + + // Thinking in vectors + // R0, C0 is top left (start) + // Up is 1, 0 + // down is -1, 0 + // left is 0, -1 + // right is 0, 1 + + this.moveTile = function(tile, direction) { + var row = 0 + var column = 0 switch(direction) { case 38: //up console.log('up'); + var row = 1 + var column = 0 + self.moveAll(row, column) + self.newTile(); break; case 40: //down console.log('down'); + var row = -1 + var column = 0 + self.moveAll(row, column) + self.newTile(); break; case 37: //left console.log('left'); + var row = 0 + var column = -1 + self.moveAll(row, column) + self.newTile(); break; case 39: //right console.log('right'); + var row = 0 + var column = 1 + self.moveAll(row, column) + self.newTile(); break; - } -}; - -$(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'); - - game.moveTile(tile, event.which); } - }); -}); + } + + this.moveAll = function(row, column) { + // get all of the tiles on the board + var allFilledTiles = $('div.tile[data-val !=""]') + // maybe do some comparison with this + var allEmptyTiles = $('div.tile[data-val=""]') + + $.each(allTiles, function(index, value) { + //coordinates omg + console.log($(value).attr('data-col')[1]) + console.log($(value).attr('data-row')[1]) + if (row === 1 && column === 0) { + console.log('I am up') + } else if (row === -1 && column === 0) { + console.log('I am down') + } else if (row === 0 && column === -1) { + console.log('I am left') + } else { + console.log('I am right') + } + + // if up + // check to see if the adjacent cell is empty or not + // subtract off of the row, do nothing to the column + // worry about collisions later + // if down + // check to see if the adjacent cell is empty or not + // add to the row, do nothing to the column + // worry about collisions later + // if left + // check to see if the adjacent cell is empty or not + // do nothing to the row, subtract off of the column + // worry about collisions later + // if right + // check to see if the adjacent cell is empty or not + // do nothing to the row, add to the column + // worry about collisions later + }) + } +} +