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

2048 #10

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

2048 #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
6b6b9f9
got a new tile on the board
pottery123 Jul 5, 2016
31ce4e2
we can move tiles up down left and right
pottery123 Jul 5, 2016
35f2a14
working on blocking
pottery123 Jul 6, 2016
f02d7b8
comminting some changes
pottery123 Jul 7, 2016
f0dfeb1
working on loops
pottery123 Jul 7, 2016
d4a314e
adding tiles
pottery123 Jul 7, 2016
8786788
you won function done
pottery123 Jul 8, 2016
a19d543
adding random tiles is working
pottery123 Jul 8, 2016
031468c
last commit
pottery123 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
49 changes: 32 additions & 17 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,26 +7,41 @@
<script type="text/javascript" src="javascripts/2048.js"></script>
</head>
<body>
<div>
<p class="score">Your score is :0</p>

<p class="won"></p>
<p class="lost"></p>

</div>
<div id="gameboard">
<div class="cells">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell r0 c0"></div>
<div class="cell r0 c1"></div>
<div class="cell r0 c2"></div>
<div class="cell r0 c3"></div>
<div class="cell r1 c0"></div>
<div class="cell r1 c1"></div>
<div class="cell r1 c2"></div>
<div class="cell r1 c3"></div>
<div class="cell r2 c0"></div>
<div class="cell r2 c1"></div>
<div class="cell r2 c2"></div>
<div class="cell r2 c3"></div>
<div class="cell r3 c0 "></div>
<div class="cell r3 c1"></div>
<div class="cell r3 c2"></div>
<div class="cell r3 c4"></div>
</div>
<div class="tile" data-row="r1", data-col="c1" data-val="2">2</div>
<div class="tile" data-row="r3", data-col="c1" data-val="2">2</div>
<!-- <div class="tile" data-row="r0", data-col="c0" data-val="1024">1024</div>
<div class="tile" data-row="r1", data-col="c0" data-val="1024">1024</div>
<div class="tile" data-row="r2", data-col="c0" data-val="4">4</div>
<div class="tile" data-row="r3", data-col="c0" data-val="4">4</div>
<div class="tile" data-row="r0", data-col="c1" data-val="4">4</div>
<div class="tile" data-row="r3", data-col="c1" data-val="2">2</div>
<div class="tile" data-row="r6", data-col="c1" data-val="2">2</div> -->

</div>
</body>
</html>
231 changes: 226 additions & 5 deletions javascripts/2048.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,238 @@
var Game = function() {
// Game logic and initialization here
this.score = 0


};

Game.prototype.moveTile = function(tile, direction) {

Game.prototype.won = function(tilesArray){
if(tilesArray === 2048){

$('p.won').text("You Won")
}
}

Game.prototype.lost = function(){
if (this.newTile() === false){

$('p.lost').text("You Lost")

}
}



Game.prototype.addScore = function(sumScore){
this.score += sumScore
$('p.score').text('Your Score is:' + this.score)
}


Game.prototype.newTile = function(){
var coordinates = [
[0,0],
[0,1],
[0,2],
[0,3],
[1,0],
[1,1],
[1,2],
[1,3],
[2,0],
[2,1],
[2,2],
[2,3],
[3,0],
[3,1],
[3,2],
[3,3]
]

for(var index = coordinates.length -1; index >= 0; index --){
var coordinatesIndividual = coordinates[index]

if($('.tile[data-row=r' + coordinatesIndividual[0] + '][ data-col=c' + coordinatesIndividual[1] + ']').length > 0){
coordinates.splice(index,1)
}






}
if(coordinates.length > 0){

var tileLocation = coordinates[Math.floor(Math.random()*coordinates.length)]
$('#gameboard').append("<div class='tile' data-row='r" + tileLocation[0] + "' data-col='c" + tileLocation[1] + "' data-val='2'>2</div>")


}


}




Game.prototype.sortUpMoveTiles = function(tilesArray){

tilesArray = tilesArray.sort(function (a, b) {
var aRowNumber = parseInt($(a).attr('data-row').substring(1))
var bRowNumber = parseInt($(b).attr('data-row').substring(1))
return aRowNumber - bRowNumber
})


for (var i = 0; i < tilesArray.length; i++) {
if($(tilesArray[i]).attr('data-val') === $(tilesArray[i + 1]).attr('data-val')){
console.log('trying to remove', $(tilesArray[i + 1]))
$(tilesArray[i + 1]).remove()
//coordinates.push( [Number$(tilesArray[i + 1]).attr('data-row'), $(tilesArray[i + 1]).attr('data-col')])
tilesArray.splice(i + 1, 1)
$(tilesArray[i]).attr('data-val', Number($(tilesArray[i]).attr('data-val')) * 2)
$(tilesArray[i]).text( Number($(tilesArray[i]).attr('data-val')))
this.won(Number($(tilesArray[i]).attr('data-val')))
this.addScore( Number($(tilesArray[i]).attr('data-val')) )
}

$(tilesArray[i]).attr('data-row', 'r' + i)
}
}



Game.prototype.sortDownMoveTiles = function(tilesArray){
tilesArray = tilesArray.sort(function (a, b) {
var aRowNumber = parseInt($(a).attr('data-row').substring(1))
var bRowNumber = parseInt($(b).attr('data-row').substring(1))
return bRowNumber - aRowNumber
})

for (var i = 0; i < tilesArray.length; i++) {
if($(tilesArray[i]).attr('data-val') === $(tilesArray[i + 1]).attr('data-val')){
console.log('trying to remove', $(tilesArray[i + 1]))
$(tilesArray[i + 1]).remove()
tilesArray.splice(i + 1, 1)
$(tilesArray[i]).attr('data-val', Number($(tilesArray[i]).attr('data-val')) * 2)
$(tilesArray[i]).text( Number($(tilesArray[i]).attr('data-val')))
this.won(Number($(tilesArray[i]).attr('data-val')))
this.addScore( Number($(tilesArray[i]).attr('data-val')) )
}

$(tilesArray[i]).attr('data-row', 'r' + (3 - i))
}
}


Game.prototype.sortMoveLeftTiles = function(tilesArray){
tilesArray = tilesArray.sort(function(a,b){
var aColNumber = parseInt($(a).attr('data-col').substring(1))
var bColNumber = parseInt($(b).attr('data-col').substring(1))
return aColNumber - bColNumber
var combineTiles = Number((tilesArray[i]).attr('data-val')) * Number((tilesArray[i]).attr('data-val'))
})
for (var i = 0; i < tilesArray.length; i++) {


if($(tilesArray[i]).attr('data-val') === $(tilesArray[i + 1]).attr('data-val')){
console.log('trying to remove', $(tilesArray[i + 1]))
$(tilesArray[i + 1]).remove()
tilesArray.splice(i + 1, 1)
$(tilesArray[i]).attr('data-val', Number($(tilesArray[i]).attr('data-val')) * 2)
$(tilesArray[i]).text( Number($(tilesArray[i]).attr('data-val')))
this.won(Number($(tilesArray[i]).attr('data-val')))
this.addScore( Number($(tilesArray[i]).attr('data-val')) )
}

$(tilesArray[i]).attr('data-col', 'c' + i)
}
}





Game.prototype.sortMoveRightTiles = function(tilesArray){
tilesArray = tilesArray.sort(function(a,b){

var aColNumber = parseInt($(a).attr('data-col').substring(1))
var bColNumber = parseInt($(b).attr('data-col').substring(1))
return aColNumber + bColNumber
})
for (var i = 0; i < tilesArray.length; i++) {


if($(tilesArray[i]).attr('data-val') === $(tilesArray[i + 1]).attr('data-val')){
console.log('trying to remove', $(tilesArray[i + 1]))
$(tilesArray[i + 1]).remove()
tilesArray.splice(i + 1, 1)
$(tilesArray[i]).attr('data-val', Number($(tilesArray[i]).attr('data-val')) * 2)
$(tilesArray[i]).text( Number($(tilesArray[i]).attr('data-val')))
this.won(Number($(tilesArray[i]).attr('data-val')))
this.addScore( Number($(tilesArray[i]).attr('data-val')) )
}

$(tilesArray[i]).attr('data-col', 'c' + (3 - i))
}
}








Game.prototype.moveTile = function(tiles, direction) {
var tilesc0 = tiles.filter('[data-col=c0]').toArray()
var tilesc1 = tiles.filter('[data-col=c1]').toArray()
var tilesc2 = tiles.filter('[data-col=c2]').toArray()
var tilesc3 = tiles.filter('[data-col=c3]').toArray()
// Game method here
var tilesr0 = tiles.filter('[data-row=r0]').toArray()
var tilesr1 = tiles.filter('[data-row=r1]').toArray()
var tilesr2 = tiles.filter('[data-row=r2]').toArray()
var tilesr3 = tiles.filter('[data-row=r3]').toArray()
switch(direction) {
case 38: //up
console.log('up');

this.sortUpMoveTiles(tilesc0)
this.sortUpMoveTiles(tilesc1)
this.sortUpMoveTiles(tilesc2)
this.sortUpMoveTiles(tilesc3)





break;
case 40: //down
console.log('down');
this.sortDownMoveTiles(tilesc0)
this.sortDownMoveTiles(tilesc1)
this.sortDownMoveTiles(tilesc2)
this.sortDownMoveTiles(tilesc3)



break;
case 37: //left
console.log('left');
this.sortMoveLeftTiles(tilesr0)
this.sortMoveLeftTiles(tilesr1)
this.sortMoveLeftTiles(tilesr2)
this.sortMoveLeftTiles(tilesr3)
break;
case 39: //right
console.log('right');
this.sortMoveRightTiles(tilesr0)
this.sortMoveRightTiles(tilesr1)
this.sortMoveRightTiles(tilesr2)
this.sortMoveRightTiles(tilesr3)


break;
}
};
Expand All @@ -28,9 +245,13 @@ $(document).ready(function() {
$('body').keydown(function(event){
var arrows = [37, 38, 39, 40];
if (arrows.indexOf(event.which) > -1) {
var tile = $('.tile');

game.moveTile(tile, event.which);
var tiles = $('.tile');

game.moveTile(tiles, event.which);// event.which means which key
setTimeout(function(){
game.newTile()

}, 100)
}
});
});
4 changes: 4 additions & 0 deletions stylesheets/2048.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,10 @@ html {
width: 4rem;
}

.score[data-score=xyz]{
font-size: 3rm;
font-family: cursive;}

.tile[data-row=r0] { top: 0; }
.tile[data-row=r1] { top: 4.5rem; }
.tile[data-row=r2] { top: 9rem; }
Expand Down