From 6b6b9f9cfaea025467c4997309c3df80fcf5dbe5 Mon Sep 17 00:00:00 2001 From: Sarah Date: Tue, 5 Jul 2016 14:20:44 -0700 Subject: [PATCH 1/9] got a new tile on the board --- javascripts/2048.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/javascripts/2048.js b/javascripts/2048.js index 4b2746c..dfeaff7 100644 --- a/javascripts/2048.js +++ b/javascripts/2048.js @@ -29,8 +29,11 @@ $(document).ready(function() { var arrows = [37, 38, 39, 40]; if (arrows.indexOf(event.which) > -1) { var tile = $('.tile'); - - game.moveTile(tile, event.which); + + game.moveTile(tile, event.which);// event.which means which key } }); + $('body').keyup(function(event){ + var tile_div = $('#gameboard').append("
2
") + }) }); From 31ce4e2a2613a604bfcc6fb6b725566a56f28fd3 Mon Sep 17 00:00:00 2001 From: Sarah Date: Tue, 5 Jul 2016 15:16:19 -0700 Subject: [PATCH 2/9] we can move tiles up down left and right --- javascripts/2048.js | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/javascripts/2048.js b/javascripts/2048.js index dfeaff7..c328920 100644 --- a/javascripts/2048.js +++ b/javascripts/2048.js @@ -1,21 +1,34 @@ var Game = function() { // Game logic and initialization here + }; + +Game.prototype.newTile = function(newTile){ + +return $('#gameboard').append("
2
") +} + + + Game.prototype.moveTile = function(tile, direction) { // Game method here switch(direction) { case 38: //up console.log('up'); + $('.tile').attr("data-row", "r0") break; case 40: //down console.log('down'); + $('.tile').attr("data-row", "r3") break; case 37: //left console.log('left'); + $('.tile').attr("data-col", "c0") break; case 39: //right console.log('right'); + $('.tile').attr("data-col", "c3") break; } }; @@ -34,6 +47,7 @@ $(document).ready(function() { } }); $('body').keyup(function(event){ - var tile_div = $('#gameboard').append("
2
") + game.newTile() }) + }); From 35f2a142d4bb56fab289523ebce3735569c87a26 Mon Sep 17 00:00:00 2001 From: Sarah Date: Wed, 6 Jul 2016 13:12:19 -0700 Subject: [PATCH 3/9] working on blocking --- index.html | 32 ++++++++++++++++---------------- javascripts/2048.js | 39 +++++++++++++++++++++++++++++++++++++-- 2 files changed, 53 insertions(+), 18 deletions(-) diff --git a/index.html b/index.html index 4740408..ae19a6c 100644 --- a/index.html +++ b/index.html @@ -9,22 +9,22 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
2
diff --git a/javascripts/2048.js b/javascripts/2048.js index c328920..2ef19ec 100644 --- a/javascripts/2048.js +++ b/javascripts/2048.js @@ -4,9 +4,43 @@ var Game = function() { }; +gameBoard = [ +"r0 c0", + "r0 c1", + "r0 c2", + "r0 c3", + "r1 c0", + "r1 c1", + "r1 c2", + "r1 c3", + "r2 c0", + "r2 c1", + "r2 c2", + "r2 c3", + "r3 c0", + "r3 c1", + "r3 c2", + "r3 c4"] + + tiles = [ + + ] + + + + + Game.prototype.newTile = function(newTile){ -return $('#gameboard').append("
2
") +return $('#gameboard').append("
2
") +} + + + +Game.prototype.spotAlreadytaken = function(tile){ + + + } @@ -16,7 +50,8 @@ Game.prototype.moveTile = function(tile, direction) { switch(direction) { case 38: //up console.log('up'); - $('.tile').attr("data-row", "r0") + $('.tile').attr("data-row", "r0") + break; case 40: //down console.log('down'); From f02d7b88dfd38e3bfceb6068ae9fbb38a6246758 Mon Sep 17 00:00:00 2001 From: Sarah Date: Thu, 7 Jul 2016 10:37:52 -0700 Subject: [PATCH 4/9] comminting some changes --- javascripts/2048.js | 84 ++++++++++++++++++++++++++++++--------------- 1 file changed, 57 insertions(+), 27 deletions(-) diff --git a/javascripts/2048.js b/javascripts/2048.js index 2ef19ec..6f54cec 100644 --- a/javascripts/2048.js +++ b/javascripts/2048.js @@ -4,30 +4,13 @@ var Game = function() { }; -gameBoard = [ -"r0 c0", - "r0 c1", - "r0 c2", - "r0 c3", - "r1 c0", - "r1 c1", - "r1 c2", - "r1 c3", - "r2 c0", - "r2 c1", - "r2 c2", - "r2 c3", - "r3 c0", - "r3 c1", - "r3 c2", - "r3 c4"] - tiles = [ - ] +var board = { +} Game.prototype.newTile = function(newTile){ @@ -37,20 +20,67 @@ return $('#gameboard').append("
Date: Thu, 7 Jul 2016 12:42:42 -0700 Subject: [PATCH 5/9] working on loops --- index.html | 1 + javascripts/2048.js | 90 +++++++++++++++++++++------------------------ 2 files changed, 43 insertions(+), 48 deletions(-) diff --git a/index.html b/index.html index ae19a6c..2774dcd 100644 --- a/index.html +++ b/index.html @@ -26,6 +26,7 @@
+
2
2
diff --git a/javascripts/2048.js b/javascripts/2048.js index 6f54cec..2a7ef9b 100644 --- a/javascripts/2048.js +++ b/javascripts/2048.js @@ -15,77 +15,71 @@ var board = { Game.prototype.newTile = function(newTile){ -return $('#gameboard').append("
2
") +//return $('#gameboard').append("
2
") } +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++) { -Game.prototype.moveTile = function(tile, direction) { - // Game method here - switch(direction) { - case 38: //up - - $('.tile[data-row="r3"]').each(function(index){ - var col = $(this).attr("data-col") - var row = $(this).attr("data-row") - var colnum = parseInt(col[1]) - var rownum = parseInt(row[1])-1 - var previousRow = $('.tile[data-row="r'+rownum+'"][data-col="'+col+'"]') - if(previousRow.length == 0){ - $(this).attr("data-row", 'r' + rownum) - - } - - }) + $(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 + }) - var col03 = $('.tile[data-row="r3"][data-col="c0"]') - col03.attr('data-row', 'r2') + for (var i = 0; i < tilesArray.length; i++) { + $(tilesArray[i]).attr('data-row', 'r' + (3-i)) + } +} - // $('.tile[data-row="r3"]').each(function(index){ - // $(this).attr("data-row", "r2") - // }) - // - // $('.tile[data-row="r2"]').each(function(index){ - // $(this).attr("data-row", "r1") - // - // $('.tile[data-row="r1"]').each(function(index){ - // $(this).attr("data-row", "r0") - // }) +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 + switch(direction) { + case 38: //up - // var row3 = $('.tile[data-row="r3"]')//selected all the tiles on row three - // row3.attr("data-row", "r2") - // var row2 = $('.tile[data-row="r2"]') - // console.log(row2) - // row2.attr("data-row", "r1") - // var row1 = $('.tile[data-row="r1"]') - // row1.attr("data-row","r0") + this.sortUpMoveTiles(tilesc0) + this.sortUpMoveTiles(tilesc1) + this.sortUpMoveTiles(tilesc2) + this.sortUpMoveTiles(tilesc3) - // console.log('up'); - // var data = $('.tile[data-row="r3"]') - // var row2 = data[0].dataset.row = "r2" - // - // - //$('.tile').attr("data-row", "r0") - // - // console.log(data[0].dataset.row) break; case 40: //down console.log('down'); - $('.tile').attr("data-row", "r3") + this.sortDownMoveTiles(tilesc0) + this.sortDownMoveTiles(tilesc1) + this.sortDownMoveTiles(tilesc2) + this.sortDownMoveTiles(tilesc3) + + + break; case 37: //left console.log('left'); @@ -106,9 +100,9 @@ $(document).ready(function() { $('body').keydown(function(event){ var arrows = [37, 38, 39, 40]; if (arrows.indexOf(event.which) > -1) { - var tile = $('.tile'); + var tiles = $('.tile'); - game.moveTile(tile, event.which);// event.which means which key + game.moveTile(tiles, event.which);// event.which means which key } }); $('body').keyup(function(event){ From d4a314ee67761c2a29ad8709f924dec0a26415e0 Mon Sep 17 00:00:00 2001 From: Sarah Date: Thu, 7 Jul 2016 16:36:56 -0700 Subject: [PATCH 6/9] adding tiles --- index.html | 7 ++++- javascripts/2048.js | 63 ++++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 66 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 2774dcd..351d6fe 100644 --- a/index.html +++ b/index.html @@ -26,8 +26,13 @@
-
2
+
4
2
+
4
+
2
+
4
+
2
+
2
diff --git a/javascripts/2048.js b/javascripts/2048.js index 2a7ef9b..4455ed0 100644 --- a/javascripts/2048.js +++ b/javascripts/2048.js @@ -42,9 +42,34 @@ Game.prototype.sortDownMoveTiles = function(tilesArray){ return bRowNumber - aRowNumber }) + for (var i = 0; i < tilesArray.length; i++) { + + $(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++) { - $(tilesArray[i]).attr('data-row', 'r' + (3-i)) + console.log(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[i]).attr('data-val', Number($(tilesArray[i]).attr('data-val')) * 2) + $(tilesArray[i]).text( Number($(tilesArray[i]).attr('data-val'))) + + //$(selector).attr(attribute,value) + + } + + $(tilesArray[i]).attr('data-col', 'c' + i) } } @@ -52,12 +77,36 @@ Game.prototype.sortDownMoveTiles = function(tilesArray){ +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++) { + + $(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 @@ -83,11 +132,19 @@ Game.prototype.moveTile = function(tiles, direction) { break; case 37: //left console.log('left'); - $('.tile').attr("data-col", "c0") + this.sortMoveLeftTiles(tilesr0) + this.sortMoveLeftTiles(tilesr1) + this.sortMoveLeftTiles(tilesr2) + this.sortMoveLeftTiles(tilesr3) break; case 39: //right console.log('right'); - $('.tile').attr("data-col", "c3") + this.sortMoveRightTiles(tilesr0) + this.sortMoveRightTiles(tilesr1) + this.sortMoveRightTiles(tilesr2) + this.sortMoveRightTiles(tilesr3) + + break; } }; From 87867884389c93fe717808df2b02f6ffb5fa4568 Mon Sep 17 00:00:00 2001 From: Sarah Date: Fri, 8 Jul 2016 13:16:04 -0700 Subject: [PATCH 7/9] you won function done --- index.html | 19 +++++++++++++----- javascripts/2048.js | 47 +++++++++++++++++++++++++++++++++++++------- stylesheets/2048.css | 4 ++++ 3 files changed, 58 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index 351d6fe..4d200f2 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,14 @@ +
+

Your score is :0

+ +

+ +

+ +
@@ -26,13 +34,14 @@
-
4
-
2
-
4
-
2
-
4
+
1024
+
1024
+
1024
+
1024
+
1024
2
2
+
diff --git a/javascripts/2048.js b/javascripts/2048.js index 4455ed0..2f42d02 100644 --- a/javascripts/2048.js +++ b/javascripts/2048.js @@ -1,15 +1,22 @@ var Game = function() { // Game logic and initialization here +this.score = 0 }; +Game.prototype.won = function(tilesArray){ + if(tilesArray === 2048){ + $('p.won').text("You Won") + } +} -var board = { - +Game.prototype.addScore = function(sumScore){ + this.score += sumScore + $('p.score').text('Your Score is:' + this.score) } @@ -28,6 +35,15 @@ Game.prototype.sortUpMoveTiles = function(tilesArray){ 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' + i) } @@ -43,6 +59,14 @@ Game.prototype.sortDownMoveTiles = function(tilesArray){ }) 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.addScore( Number($(tilesArray[i]).attr('data-val')) ) + } $(tilesArray[i]).attr('data-row', 'r' + (3 - i)) } @@ -57,16 +81,15 @@ Game.prototype.sortMoveLeftTiles = function(tilesArray){ var combineTiles = Number((tilesArray[i]).attr('data-val')) * Number((tilesArray[i]).attr('data-val')) }) for (var i = 0; i < tilesArray.length; i++) { - console.log(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'))) - - //$(selector).attr(attribute,value) - + this.addScore( Number($(tilesArray[i]).attr('data-val')) ) } $(tilesArray[i]).attr('data-col', 'c' + i) @@ -82,10 +105,20 @@ Game.prototype.sortMoveRightTiles = function(tilesArray){ var aColNumber = parseInt($(a).attr('data-col').substring(1)) var bColNumber = parseInt($(b).attr('data-col').substring(1)) - return aColNumber - bColNumber + 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.addScore( Number($(tilesArray[i]).attr('data-val')) ) + } + $(tilesArray[i]).attr('data-col', 'c' + (3 - i)) } } diff --git a/stylesheets/2048.css b/stylesheets/2048.css index 2a46a94..631ba3e 100644 --- a/stylesheets/2048.css +++ b/stylesheets/2048.css @@ -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; } From a19d5433ad047fd3190448192f1de3f02b9a04c2 Mon Sep 17 00:00:00 2001 From: Sarah Date: Fri, 8 Jul 2016 14:50:43 -0700 Subject: [PATCH 8/9] adding random tiles is working --- index.html | 11 +++++----- javascripts/2048.js | 51 ++++++++++++++++++++++++++++++++++++++++----- 2 files changed, 52 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index 4d200f2..2966d30 100644 --- a/index.html +++ b/index.html @@ -34,13 +34,14 @@
-
1024
+
2
+ diff --git a/javascripts/2048.js b/javascripts/2048.js index 2f42d02..4d3ab73 100644 --- a/javascripts/2048.js +++ b/javascripts/2048.js @@ -20,11 +20,45 @@ Game.prototype.addScore = function(sumScore){ } -Game.prototype.newTile = function(newTile){ +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) + } + + + + + } + var tileLocation = coordinates[Math.floor(Math.random()*coordinates.length)] + $('#gameboard').append("
2
") -//return $('#gameboard').append("
2
") } + + + Game.prototype.sortUpMoveTiles = function(tilesArray){ tilesArray = tilesArray.sort(function (a, b) { @@ -65,6 +99,7 @@ Game.prototype.sortDownMoveTiles = function(tilesArray){ 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')) ) } @@ -89,6 +124,7 @@ Game.prototype.sortMoveLeftTiles = function(tilesArray){ 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')) ) } @@ -116,6 +152,7 @@ for (var i = 0; i < tilesArray.length; i++) { 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')) ) } @@ -193,10 +230,14 @@ $(document).ready(function() { var tiles = $('.tile'); game.moveTile(tiles, event.which);// event.which means which key + setTimeout(function(){ + game.newTile() + + }, 1000) } }); - $('body').keyup(function(event){ - game.newTile() - }) + // $('body').keyup(function(event){ + // game.newTile() + // }) }); From 031468cc3484359d30b683d1c7a7c775fb8b3a0c Mon Sep 17 00:00:00 2001 From: Sarah Date: Fri, 8 Jul 2016 15:55:02 -0700 Subject: [PATCH 9/9] last commit --- index.html | 5 ++--- javascripts/2048.js | 24 +++++++++++++++++++----- 2 files changed, 21 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 2966d30..d86740f 100644 --- a/index.html +++ b/index.html @@ -10,9 +10,8 @@

Your score is :0

-

- -

+

+

diff --git a/javascripts/2048.js b/javascripts/2048.js index 4d3ab73..0c8a8f6 100644 --- a/javascripts/2048.js +++ b/javascripts/2048.js @@ -2,6 +2,7 @@ var Game = function() { // Game logic and initialization here this.score = 0 + }; @@ -12,6 +13,14 @@ Game.prototype.won = function(tilesArray){ } } +Game.prototype.lost = function(){ + if (this.newTile() === false){ + + $('p.lost').text("You Lost") + + } +} + Game.prototype.addScore = function(sumScore){ @@ -50,10 +59,18 @@ for(var index = coordinates.length -1; index >= 0; index --){ + + } + if(coordinates.length > 0){ + var tileLocation = coordinates[Math.floor(Math.random()*coordinates.length)] $('#gameboard').append("
2
") + +} + + } @@ -72,6 +89,7 @@ Game.prototype.sortUpMoveTiles = function(tilesArray){ 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'))) @@ -233,11 +251,7 @@ $(document).ready(function() { setTimeout(function(){ game.newTile() - }, 1000) + }, 100) } }); - // $('body').keyup(function(event){ - // game.newTile() - // }) - });