Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 32 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,38 @@ 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?
A player starts with a total score of 0. When a tile-match is made, the total score is updated with the value of that tile-match's new tile. For example, when a "2" tile matches with another "2" tile, the new tile is a "4". Then 4 points are added to the player's total score. The total score does not change if no matches are made.

2. When do tiles enter the game?
* Keypress event happens
* All tiles move to the side of the board indicated by the keypress
* Tile matches occur (if there are any)
* A new "2" or "4" tile is added to the board in a random space

3. How do you know if you've won?
If you match two tiles and the resulting tile's value is "2048", you have won the game.

4. How do you know if you've lost?
If all board spaces are filled with tiles and no more tile matches can be made, you have lost the game.

5. What makes tiles move?
* Tiles are moved based on a key press of up-arrow, right-arrow, down-arrow or left-arrow.
* If no tile movement/collisions would occur on a direction, that direction cannot be chosen.

6. What happens when they move?
* All tiles move to the side of the board indicated by the keypress, filling in all available empty space.
* Tile matches occur (if there are any). If there is a tile match, the tiles "combine" their values into the directioniest-most tile and the other tile disappears.
* A new "2" or "4" tile is added to the board in a random space.

7. How would you know how far a tile should move?
A tile should move in the indicated direction as far as it can go without overlapping another tile. E.G. If three tiles in one row are moving right, they will each move one space right, filling in the only empty space on the board (the board is 4 x 4). If a row contains one tile, and move right command is placed, the one tile will move three spaces to the right. All available space must be filled.

8. How would you know if tiles would collide?
If tiles have the same value, and when moving they would normally share a side, they will combine when they collide.

9. What happens when tiles collide?
If they have the same value, they combine. If they do not, they do nothing.

- 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.
12 changes: 11 additions & 1 deletion index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,15 @@
<title>2048</title>
<link rel="stylesheet" media="all" href="stylesheets/2048.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="javascripts/2048.js"></script>
</head>
<body>
<h1>2048</h1>
<div id="scoreboard">
<h2>Score:</h2>
<div class="score"></div>
</div>
<div id="gameboard">
<div class="cells">
<div class="cell"></div>
Expand All @@ -26,7 +32,11 @@
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="tile" data-row="r1", data-col="c1" data-val="2">2</div>

<div class="tile_box">
<div class="tile" data-row="r1" data-col="c2" data-val="1024">1024</div>
<div class="tile" data-row="r2" data-col="c2" data-val="1024">1024</div>
</div>
</div>
</body>
</html>
Loading