Skip to content

answered readme questions #3

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

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

answered readme questions #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
7884f36
answered readme questions
Jul 5, 2016
8ab9022
trying to do fxn. halp.
Jul 5, 2016
4ce8db9
creating functionality for moving.
Jul 5, 2016
eb1dc18
so close
Jul 6, 2016
c3ac8a2
learned about attr to move the tiles
Jul 6, 2016
0dcc300
changed everything to an array logic
Jul 6, 2016
299080e
made arrays work. going to combine yo's div logic
Jul 6, 2016
4d62ccf
holy crap it moves and adds
Jul 6, 2016
205e685
it adds and pushes up. yo's code is in there via slack
Jul 6, 2016
73cc92f
holy effing crap it works.
Jul 6, 2016
de2d8fe
working on up and down
Jul 6, 2016
e9d3a3a
up down functionality works
Jul 7, 2016
a15a76a
right doesn't work yet. left up and down work
Jul 7, 2016
75e8135
up down left right works. to do win lose and rando
Jul 7, 2016
65d060b
created gameOver and createTile function
yordanosd Jul 7, 2016
edb6d28
createTile stuff
yordanosd Jul 7, 2016
d1f59c0
working on creating a tile
yordanosd Jul 7, 2016
6b5c71a
made random functionality work
Jul 7, 2016
0a4f73e
trying to fix adding a new tile
yordanosd Jul 7, 2016
e2ace3a
idk what the changes are
Jul 8, 2016
8ecb502
made changes
Jul 8, 2016
136fb2f
fixed random tiles to not show if there's no movement
Jul 8, 2016
938817a
2048 with score css
Jul 8, 2016
dd30923
can win
Jul 8, 2016
00e24cb
reset and best score works
yordanosd Jul 8, 2016
9512877
opacity changes color when you lose. Fixed a couple of bugs
yordanosd Jul 8, 2016
67c93c5
points value moves up as you earn them
yordanosd Jul 8, 2016
72742c9
changed default value of this.win in reset to false
yordanosd Jul 9, 2016
d02a17f
able to display a random tile at the start of a new game and when you…
yordanosd Jul 9, 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
27 changes: 27 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
<div class="tile" data-row="0", data-col="0" data-val="2">2</div>
<div class="tile" data-row="1", data-col="1" data-val="2">2</div>
<div class="tile" data-row="2", data-col="2" data-val="2">2</div>
<div class="tile" data-row="3", data-col="3" data-val="2">2</div>
19 changes: 18 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,19 @@
<script type="text/javascript" src="javascripts/2048.js"></script>
</head>
<body>
<div id="totalScore">
<div id="score">
<p>Score</p>
<div class="score">0</div>
</div>
<div id="best">
<p>Best</p>
<div class="best">0</div>
</div>
<!-- <div id="points"></div> -->

</div>

<div id="gameboard">
<div class="cells">
<div class="cell"></div>
Expand All @@ -26,7 +39,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="reset">
<button id="reset">RESET</button>
<div id="win"></div>
<div id="lose"></div>

</div>
</body>
</html>
236 changes: 225 additions & 11 deletions javascripts/2048.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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<matrix.length; row++) {
if(matrix[row].length < 4) {result = false}
for (var col=0; col<matrix[row].length; col++) {
if (matrix[row][col] == matrix[row][col+1]) {
result = false
}
}
}
return result
}

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")});
var occupiedSpaces = []

var x = $('.tile')
for (let i = 0; i < x.length; i++) {
occupiedSpaces.push(x[i].dataset.row+x[i].dataset.col)
}

unoccupiedSpaces = allSpaces.diff(occupiedSpaces)
return unoccupiedSpaces
}

Game.prototype.createTile = function(move) {
$('#points').remove()
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"]
var tileValue = tileValueArray[Math.floor(Math.random() * (tileValueArray.length))];
$('#gameboard').append("<div class=tile data-row=" + tileLocation.charAt(0) + " data-col=" + tileLocation.charAt(1) + " data-val=2>" + tileValue +"</div>")
}
}



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("<div id=points>+" + value + "</div>")
$('#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)}

});
});
Loading