Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Baseline #7

Open
wants to merge 28 commits into
base: master
Choose a base branch
from
Open

Baseline #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
7f9c742
notes on discussion questions.
jlikesplants Jul 5, 2016
916361a
taking notes on our thought process
jlikesplants Jul 5, 2016
bdcf730
changed the row attribute of the tiles on down arrow keypress so they…
Lisa-Sano Jul 5, 2016
c9e13ec
trying to get tile positions out of DOM in desired order.
jlikesplants Jul 5, 2016
a173984
got row/col sorting to work
Lisa-Sano Jul 6, 2016
abe606e
row 0 can move over 1 space
Lisa-Sano Jul 6, 2016
9661a22
tile combining functionality
Lisa-Sano Jul 6, 2016
742f315
added available count array to the left arrow functionality
Lisa-Sano Jul 6, 2016
c2c1e55
stil debugging rude jquery slide issue. dry or die!
jlikesplants Jul 6, 2016
d9cc319
all rows can move at the same time. all keystrokes utilize the slide_…
Lisa-Sano Jul 7, 2016
c7bdebc
finding available tiles after a turn appears to be working
jlikesplants Jul 7, 2016
cacad2c
trying to fix animations
jlikesplants Jul 7, 2016
040c80c
timeout for tile combining and removal functioning
Lisa-Sano Jul 7, 2016
64b43e9
new tile appears with a timeout.
jlikesplants Jul 7, 2016
955f19c
just a little styling for the button
jlikesplants Jul 7, 2016
ad9e42d
10% chance of the new tile being a 4 instead of a 2
Lisa-Sano Jul 7, 2016
53e85a1
loss functionality which is checked after every turn before a new til…
Lisa-Sano Jul 7, 2016
a947d48
new game button working with new tiles appearing.
jlikesplants Jul 7, 2016
314423b
now randomly selecting value of 2 and sometimes 4 with new game.
jlikesplants Jul 7, 2016
f82f258
refactored lost functionality works
Lisa-Sano Jul 7, 2016
13c689d
fixed merge conflicts
Lisa-Sano Jul 7, 2016
575d8f7
fixed bug that was adding new tiles even if the existing tiles couldn…
Lisa-Sano Jul 7, 2016
6bcabbc
fixed bug that wasn't displaying losses properly
Lisa-Sano Jul 7, 2016
d8d9579
simple win statement added
jlikesplants Jul 7, 2016
4232274
mergin
jlikesplants Jul 7, 2016
d851f10
shows You Win on the screen when you get a 2048 tile. Win/Lose text d…
Lisa-Sano Jul 8, 2016
ecacf3a
score functionality
Lisa-Sano Jul 8, 2016
06f64de
cleaning up comments, a bit more styling
jlikesplants Jul 8, 2016
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
38 changes: 38 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,52 @@ 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?
When tiles collide and combine, their combined tile value is added to the player's score.

1. When do tiles enter the game?
Every move initiated by the arrow keys randomly generates one tile.

1. How do you know if you've won?
You get a tile with the value 2048.

1. How do you know if you've lost?
The board is filled with tiles and no room remains to move.

1. What makes tiles move?
The four arrow keys move the tiles.

1. What happens when they move?
If two same-valued tiles are adjacent on the axis of the move, they combine into one tile with the original value doubled. If two tiles are adjacent but do not share a value, they move as far as they can in the move direction without combining.

1. How would you know how far a tile should move?
The tile moves according to the direction of the arrow chosen and whether or not it will come into contact with another same-valued tile.

1. How would you know if tiles would collide?
If the tiles are directly adjacent and on the move axis they will collide.

1. What happens when tiles collide?
Either the two tiles combine to form one new tile with their original value doubled, or they remain adjacent to one another with no value change.

- 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.


tile movement
wait for click event
determine direction
start comparing tiles with the tiles that are furthest in the direction of the arrow


1. get the direction of the arrow
2. use direction to pick which square to start looking at
3. determine which in the first row/column have values
4. pull all values from first row/column and push in order to array

.tile
(have to index array here)
dataset
val (tile value)
textContent (display)

after pulling dataset from DOM
26 changes: 25 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,15 @@
<script type="text/javascript" src="javascripts/2048.js"></script>
</head>
<body>
<div class="banner">
<h1 class="title">2048</h1>
<div class="btn">
<button class="new_game_button" type="button">New Game</button>
</div>
<div class="btn">
<p class="score">Score</p>
</div>
</div>
<div id="gameboard">
<div class="cells">
<div class="cell"></div>
Expand All @@ -26,7 +35,22 @@
<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" data-row="r0", data-col="c1" data-val="4">4</div>
<div class="tile" data-row="r0", data-col="c0" data-val="2">2</div>
<div class="tile" data-row="r0", data-col="c2" data-val="16">16</div> -->
<div class="tile" data-row="r2", data-col="c0" data-val="1024">1024</div>
<div class="tile" data-row="r3", data-col="c0" data-val="1024">1024</div>
<!-- <div class="tile" data-row="r1", data-col="c0" data-val="2">2</div>
<div class="tile" data-row="r2", data-col="c1" data-val="2">2</div>
<div class="tile" data-row="r2", data-col="c2" data-val="4">4</div>

<div class="tile" data-row="r0", data-col="c3" data-val="16">16</div>
<div class="tile" data-row="r1", data-col="c1" data-val="sq">squirrel</div>
<div class="tile" data-row="r2", data-col="c3" data-val="64">64</div>
<div class="tile" data-row="r1", data-col="c2" data-val="64">64</div>
<div class="tile" data-row="r3", data-col="c1" data-val="dog">dog</div>
<div class="tile" data-row="r3", data-col="c2" data-val="cat">cat</div> -->
</div>
<p class="outcome"></p>
</body>
</html>
Loading