From 4bb27f761a4fa5670ea7b8616af558813ead4dc9 Mon Sep 17 00:00:00 2001 From: bluemittens505 Date: Mon, 15 Feb 2016 18:59:31 -0500 Subject: [PATCH 01/12] Memory Homework My first revision - still some kinks to work out --- index.html | 15 ++++--- memory.css | 18 +++++++++ memory.js | 112 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 140 insertions(+), 5 deletions(-) create mode 100644 memory.css create mode 100644 memory.js diff --git a/index.html b/index.html index 4d20248..29ebf8e 100644 --- a/index.html +++ b/index.html @@ -1,8 +1,13 @@ - - Memory exercise - - - + + Memory exercise + + + + + +

Memory Game

+
+ diff --git a/memory.css b/memory.css new file mode 100644 index 0000000..0477c5c --- /dev/null +++ b/memory.css @@ -0,0 +1,18 @@ +.tile { + height: 100px; + width: 100px; + border-radius: 100%; + background-color: #F5680A; +} +.tile div { + font-size: 40px; + text-align: center; + color: #F5680A; +} +/*.show { + color: #FFFFFF; +}*/ +.gone { + background-color: #FFFFFF; + color: #FFFFFF; +} diff --git a/memory.js b/memory.js new file mode 100644 index 0000000..9091fbc --- /dev/null +++ b/memory.js @@ -0,0 +1,112 @@ +$(document).ready(function() { + + var Game = function(height,width) { + this.height = height; + this.width = width; + this.takenValues = "#"; + this.clicked1 = null; + this.clicked2 = null; + this.remainingMatches = height*width/2; + }; + + Game.prototype.genValue = function() { + var found = false; + var maxValue = this.height*this.width/2; + while ( !found ) { + var value = Math.floor(Math.random()*maxValue); + var index = this.takenValues.indexOf("#" + value + "#"); + var lastIndex = this.takenValues.lastIndexOf("#" + value + "#"); + if ( index === -1 || index === lastIndex ) { + found = true; + this.takenValues += value + "#"; + } + } + return value; + }; + + // Game.prototype.genValues = function() { + // var values = []; + // for (var i = 0; i < this.height; i++) { + // values[i] = []; + // for (var j = 0; j < this.width; j++) { + // values[i][j] = this.genValue(); + // }; + // } + // return values; + // }; + + Game.prototype.genHtml = function() { +// var values = this.genValues(); + var board = ""; + for (var i = 0; i < this.height; i++) { + board += ""; + for (var j = 0; j < this.width; j++) { +// board += ""; + board += ""; + } + board += ""; + } + board += "
" + values[i][j] + "
" + this.genValue() + "
"; + return board; + }; + + Game.prototype.initBoard = function() { + $('#board').append(this.genHtml()); + }; + + var Tile = function($td) { + this.$td = $td; + this.$div = $td.find('div'); + this.value = $td.find('div').text(); + }; + + Tile.prototype.matches = function(tile) { + var match = false; + if ( this.value === tile.value ) { + match = true; + } + return match; + }; + + Tile.prototype.showTile = function() { + this.$div.css('color','#FFFFFF'); + }; + + Tile.prototype.hideTile = function() { + this.$div.css('color','#F5680A'); + }; + + Tile.prototype.removeTile = function() { + this.$td.fadeOut(1000); + }; + + // Code only works for boards with an even number of tiles + var game = new Game(4,4); + game.initBoard(); + + $('.tile').click(function() { + if ( game.clicked1 === null ) { + game.clicked1 = new Tile($(this)); + game.clicked1.showTile(); + } else if ( game.clicked2 === null) { + game.clicked2 = new Tile($(this)); + game.clicked2.showTile(); + if ( game.clicked2.matches(game.clicked1) ) { + game.remainingMatches--; + game.clicked1.removeTile(); + game.clicked2.removeTile(); + } else { + game.clicked1.hideTile(); + game.clicked2.hideTile(); + } + game.clicked1 = null; + game.clicked2 = null; + game.checkIfWon(); + } + }); + +}); + + + + From e6f786f5998f133eece9d8c2254a771cf5eb9ef7 Mon Sep 17 00:00:00 2001 From: bluemittens505 Date: Mon, 15 Feb 2016 20:45:30 -0500 Subject: [PATCH 02/12] Memory Homework Has a bug. When you click on the same tile twice, the code considers the "tiles matching" and the tile disappears. --- index.html | 2 ++ memory.css | 21 ++++++++++++------ memory.js | 65 ++++++++++++++++++++++++++++++++---------------------- 3 files changed, 55 insertions(+), 33 deletions(-) diff --git a/index.html b/index.html index 29ebf8e..548198a 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,8 @@

Memory Game

+
+ diff --git a/memory.css b/memory.css index 0477c5c..c7c7de9 100644 --- a/memory.css +++ b/memory.css @@ -1,3 +1,10 @@ +h1 { + color: #000066; +} +p { + color: #0000CC; + font-size: 20px; +} .tile { height: 100px; width: 100px; @@ -7,12 +14,12 @@ .tile div { font-size: 40px; text-align: center; - color: #F5680A; -} -/*.show { - color: #FFFFFF; -}*/ -.gone { - background-color: #FFFFFF; color: #FFFFFF; + opacity: 0; +} +button { + margin: 20px; + padding: 10px; + color: #000066; + font-size: 20px; } diff --git a/memory.js b/memory.js index 9091fbc..58deffc 100644 --- a/memory.js +++ b/memory.js @@ -4,6 +4,7 @@ $(document).ready(function() { this.height = height; this.width = width; this.takenValues = "#"; + this.values = null; this.clicked1 = null; this.clicked2 = null; this.remainingMatches = height*width/2; @@ -24,25 +25,23 @@ $(document).ready(function() { return value; }; - // Game.prototype.genValues = function() { - // var values = []; - // for (var i = 0; i < this.height; i++) { - // values[i] = []; - // for (var j = 0; j < this.width; j++) { - // values[i][j] = this.genValue(); - // }; - // } - // return values; - // }; + Game.prototype.genValues = function() { + var values = []; + for (var i = 0; i < this.height; i++) { + values[i] = []; + for (var j = 0; j < this.width; j++) { + values[i][j] = this.genValue(); + }; + } + return values; + }; Game.prototype.genHtml = function() { -// var values = this.genValues(); var board = ""; for (var i = 0; i < this.height; i++) { board += ""; for (var j = 0; j < this.width; j++) { -// board += ""; - board += ""; + board += ""; } board += ""; } @@ -51,9 +50,16 @@ $(document).ready(function() { }; Game.prototype.initBoard = function() { + this.values = this.genValues() $('#board').append(this.genHtml()); }; + Game.prototype.checkWinner = function() { + if ( this.remainingMatches === 0 ) { + $("#msg").append("

***WINNER***

") + } + } + var Tile = function($td) { this.$td = $td; this.$div = $td.find('div'); @@ -62,6 +68,7 @@ $(document).ready(function() { Tile.prototype.matches = function(tile) { var match = false; + // Need to distinguish clicking on same tile somehow if ( this.value === tile.value ) { match = true; } @@ -69,22 +76,18 @@ $(document).ready(function() { }; Tile.prototype.showTile = function() { - this.$div.css('color','#FFFFFF'); + this.$div.css('opacity','1'); }; Tile.prototype.hideTile = function() { - this.$div.css('color','#F5680A'); + this.$div.animate({opacity: 0},750); }; Tile.prototype.removeTile = function() { - this.$td.fadeOut(1000); + this.$td.fadeOut(750); }; - // Code only works for boards with an even number of tiles - var game = new Game(4,4); - game.initBoard(); - - $('.tile').click(function() { + var action = function() { if ( game.clicked1 === null ) { game.clicked1 = new Tile($(this)); game.clicked1.showTile(); @@ -95,18 +98,28 @@ $(document).ready(function() { game.remainingMatches--; game.clicked1.removeTile(); game.clicked2.removeTile(); + game.checkWinner(); } else { game.clicked1.hideTile(); game.clicked2.hideTile(); } game.clicked1 = null; game.clicked2 = null; - game.checkIfWon(); } + }; + + // Code only works for boards with an even number of tiles + var game = new Game(4,4); + game.initBoard(); + $('.tile').click(action); + $('button').click(function() { + $('#msg').empty(); + $('#board').empty(); + $('#board').append(game.genHtml()); + game.clicked1 = null; + game.clicked2 = null; + game.remainingMatches = game.height*game.width/2; + $('.tile').click(action); }); }); - - - - From 2061e869b6ade92164610d8cd25cdd381cc0365a Mon Sep 17 00:00:00 2001 From: bluemittens505 Date: Mon, 15 Feb 2016 21:03:58 -0500 Subject: [PATCH 03/12] Memory Homework Fixed some errors displayed when I created the pull request. --- memory.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/memory.js b/memory.js index 58deffc..3bcaed9 100644 --- a/memory.js +++ b/memory.js @@ -12,9 +12,10 @@ $(document).ready(function() { Game.prototype.genValue = function() { var found = false; + var value = -1; var maxValue = this.height*this.width/2; while ( !found ) { - var value = Math.floor(Math.random()*maxValue); + value = Math.floor(Math.random()*maxValue); var index = this.takenValues.indexOf("#" + value + "#"); var lastIndex = this.takenValues.lastIndexOf("#" + value + "#"); if ( index === -1 || index === lastIndex ) { @@ -31,7 +32,7 @@ $(document).ready(function() { values[i] = []; for (var j = 0; j < this.width; j++) { values[i][j] = this.genValue(); - }; + } } return values; }; @@ -50,15 +51,15 @@ $(document).ready(function() { }; Game.prototype.initBoard = function() { - this.values = this.genValues() + this.values = this.genValues(); $('#board').append(this.genHtml()); }; Game.prototype.checkWinner = function() { if ( this.remainingMatches === 0 ) { - $("#msg").append("

***WINNER***

") + $("#msg").append("

***WINNER***

"); } - } + }; var Tile = function($td) { this.$td = $td; From a8a51dbb22a410b4bb49fb89eeb21f262e70c7d5 Mon Sep 17 00:00:00 2001 From: bluemittens505 Date: Tue, 16 Feb 2016 23:24:44 -0500 Subject: [PATCH 04/12] Memory Homework Fixed bug with the help of Aidan. Thanks. Fixed cursor type on div tags. Re-factored some of the larger functions. Still need to fix the action(). --- memory.css | 1 + memory.js | 40 ++++++++++++++++++++++++++++------------ 2 files changed, 29 insertions(+), 12 deletions(-) diff --git a/memory.css b/memory.css index c7c7de9..1c47687 100644 --- a/memory.css +++ b/memory.css @@ -16,6 +16,7 @@ p { text-align: center; color: #FFFFFF; opacity: 0; + cursor: default; } button { margin: 20px; diff --git a/memory.js b/memory.js index 3bcaed9..033cefa 100644 --- a/memory.js +++ b/memory.js @@ -3,6 +3,7 @@ $(document).ready(function() { var Game = function(height,width) { this.height = height; this.width = width; + this.maxValue = height*width/2; this.takenValues = "#"; this.values = null; this.clicked1 = null; @@ -10,15 +11,22 @@ $(document).ready(function() { this.remainingMatches = height*width/2; }; + Game.prototype.taken = function(value) { + var taken = true; + var index = this.takenValues.indexOf("#" + value + "#"); + var lastIndex = this.takenValues.lastIndexOf("#" + value + "#"); + if ( index === -1 || index === lastIndex ) { + taken = false; + } + return taken; + } + Game.prototype.genValue = function() { var found = false; var value = -1; - var maxValue = this.height*this.width/2; while ( !found ) { - value = Math.floor(Math.random()*maxValue); - var index = this.takenValues.indexOf("#" + value + "#"); - var lastIndex = this.takenValues.lastIndexOf("#" + value + "#"); - if ( index === -1 || index === lastIndex ) { + value = Math.floor(Math.random()*this.maxValue); + if ( !this.taken(value) ) { found = true; this.takenValues += value + "#"; } @@ -69,7 +77,6 @@ $(document).ready(function() { Tile.prototype.matches = function(tile) { var match = false; - // Need to distinguish clicking on same tile somehow if ( this.value === tile.value ) { match = true; } @@ -88,13 +95,22 @@ $(document).ready(function() { this.$td.fadeOut(750); }; + Game.prototype.setClicked1 = function($tile) { + game.clicked1 = new Tile($tile); + game.clicked1.showTile(); + } + + Game.prototype.setClicked2 = function($tile) { + game.clicked2 = new Tile($tile); + game.clicked2.showTile(); + } + var action = function() { + var $tile = $(this); if ( game.clicked1 === null ) { - game.clicked1 = new Tile($(this)); - game.clicked1.showTile(); - } else if ( game.clicked2 === null) { - game.clicked2 = new Tile($(this)); - game.clicked2.showTile(); + game.setClicked1($tile); + } else if ( !game.clicked1.$td.is($tile) ) { + game.setClicked2($tile); if ( game.clicked2.matches(game.clicked1) ) { game.remainingMatches--; game.clicked1.removeTile(); @@ -110,7 +126,7 @@ $(document).ready(function() { }; // Code only works for boards with an even number of tiles - var game = new Game(4,4); + var game = new Game(4,8); game.initBoard(); $('.tile').click(action); $('button').click(function() { From aac101ba091f90c094ade17c91095d75ded4e327 Mon Sep 17 00:00:00 2001 From: bluemittens505 Date: Tue, 16 Feb 2016 23:30:42 -0500 Subject: [PATCH 05/12] Memory Homework Add missing semicolons --- memory.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/memory.js b/memory.js index 033cefa..36bc057 100644 --- a/memory.js +++ b/memory.js @@ -19,7 +19,7 @@ $(document).ready(function() { taken = false; } return taken; - } + }; Game.prototype.genValue = function() { var found = false; @@ -98,12 +98,12 @@ $(document).ready(function() { Game.prototype.setClicked1 = function($tile) { game.clicked1 = new Tile($tile); game.clicked1.showTile(); - } + }; Game.prototype.setClicked2 = function($tile) { game.clicked2 = new Tile($tile); game.clicked2.showTile(); - } + }; var action = function() { var $tile = $(this); From 368fbffe40ab5b448e8ef634008afdc8cd27b1a5 Mon Sep 17 00:00:00 2001 From: bluemittens505 Date: Wed, 17 Feb 2016 21:49:34 -0500 Subject: [PATCH 06/12] Memory Homework Add New Game button. Refactored some more functions. --- index.html | 3 ++- memory.js | 69 ++++++++++++++++++++++++++++++++++-------------------- 2 files changed, 45 insertions(+), 27 deletions(-) diff --git a/index.html b/index.html index 548198a..7e68461 100644 --- a/index.html +++ b/index.html @@ -10,6 +10,7 @@

Memory Game

- + + diff --git a/memory.js b/memory.js index 36bc057..ad63055 100644 --- a/memory.js +++ b/memory.js @@ -58,17 +58,35 @@ $(document).ready(function() { return board; }; - Game.prototype.initBoard = function() { - this.values = this.genValues(); + Game.prototype.initBoard = function(chgvalues) { + if ( chgvalues ) { + this.takenValues = "#"; + this.values = this.genValues(); + } + $('#board').empty(); $('#board').append(this.genHtml()); + $('.tile').click(action); }; Game.prototype.checkWinner = function() { - if ( this.remainingMatches === 0 ) { - $("#msg").append("

***WINNER***

"); + this.clicked1.removeTile(); + this.clicked1 = null; + this.clicked2.removeTile(); + this.clicked2 = null; + if ( --this.remainingMatches === 0 ) { + setTimeout(function () { + $("#msg").append("

***WINNER***

"); + },800); } }; + Game.prototype.unsetClickedTiles = function() { + this.clicked1.hideTile(); + this.clicked1 = null; + this.clicked2.hideTile(); + this.clicked2 = null; + }; + var Tile = function($td) { this.$td = $td; this.$div = $td.find('div'); @@ -95,48 +113,47 @@ $(document).ready(function() { this.$td.fadeOut(750); }; - Game.prototype.setClicked1 = function($tile) { - game.clicked1 = new Tile($tile); - game.clicked1.showTile(); + Tile.prototype.sameTileAs = function($tile) { + return this.$td.is($tile); }; - Game.prototype.setClicked2 = function($tile) { - game.clicked2 = new Tile($tile); - game.clicked2.showTile(); + var setClicked = function($tile) { + var clicked = new Tile($tile); + clicked.showTile(); + return clicked; }; var action = function() { var $tile = $(this); if ( game.clicked1 === null ) { - game.setClicked1($tile); - } else if ( !game.clicked1.$td.is($tile) ) { - game.setClicked2($tile); + game.clicked1 = setClicked($tile); + } else if ( !game.clicked1.sameTileAs($tile) ) { + game.clicked2 = setClicked($tile); if ( game.clicked2.matches(game.clicked1) ) { - game.remainingMatches--; - game.clicked1.removeTile(); - game.clicked2.removeTile(); game.checkWinner(); } else { - game.clicked1.hideTile(); - game.clicked2.hideTile(); + game.unsetClickedTiles(); } - game.clicked1 = null; - game.clicked2 = null; } }; + // ------------------------------------------------------- // Code only works for boards with an even number of tiles var game = new Game(4,8); - game.initBoard(); - $('.tile').click(action); - $('button').click(function() { + game.initBoard(true); + $('#new').click(function() { $('#msg').empty(); - $('#board').empty(); - $('#board').append(game.genHtml()); + game.initBoard(true); + game.clicked1 = null; + game.clicked2 = null; + game.remainingMatches = game.height*game.width/2; + }); + $('#reset').click(function() { + $('#msg').empty(); + game.initBoard(false); game.clicked1 = null; game.clicked2 = null; game.remainingMatches = game.height*game.width/2; - $('.tile').click(action); }); }); From 4d51ede03c1c00e5a9d0694d182250a7d553cc89 Mon Sep 17 00:00:00 2001 From: bluemittens505 Date: Tue, 23 Feb 2016 22:38:40 -0500 Subject: [PATCH 07/12] Memory Homework Moved most of code out of document.ready() --- memory.js | 286 ++++++++++++++++++++++++++++-------------------------- 1 file changed, 151 insertions(+), 135 deletions(-) diff --git a/memory.js b/memory.js index ad63055..9c333d5 100644 --- a/memory.js +++ b/memory.js @@ -1,145 +1,162 @@ -$(document).ready(function() { - - var Game = function(height,width) { - this.height = height; - this.width = width; - this.maxValue = height*width/2; - this.takenValues = "#"; - this.values = null; - this.clicked1 = null; - this.clicked2 = null; - this.remainingMatches = height*width/2; - }; - - Game.prototype.taken = function(value) { - var taken = true; - var index = this.takenValues.indexOf("#" + value + "#"); - var lastIndex = this.takenValues.lastIndexOf("#" + value + "#"); - if ( index === -1 || index === lastIndex ) { - taken = false; - } - return taken; - }; - - Game.prototype.genValue = function() { - var found = false; - var value = -1; - while ( !found ) { - value = Math.floor(Math.random()*this.maxValue); - if ( !this.taken(value) ) { - found = true; - this.takenValues += value + "#"; - } +var Game = function(height,width) { + this.height = height; + this.width = width; + this.maxValue = height*width/2; + this.takenValues = "#"; + this.values = null; + this.clicked1 = null; + this.clicked2 = null; + this.remainingMatches = height*width/2; + this.msgElementId = "#msg"; +}; + +Game.prototype.taken = function(value) { + var taken = true; + var index = this.takenValues.indexOf("#" + value + "#"); + var lastIndex = this.takenValues.lastIndexOf("#" + value + "#"); + if ( index === -1 || index === lastIndex ) { + taken = false; + } + return taken; +}; + +Game.prototype.genValue = function() { + var found = false; + var value = -1; + while ( !found ) { + value = Math.floor(Math.random()*this.maxValue); + if ( !this.taken(value) ) { + found = true; + this.takenValues += value + "#"; } - return value; - }; - - Game.prototype.genValues = function() { - var values = []; - for (var i = 0; i < this.height; i++) { - values[i] = []; - for (var j = 0; j < this.width; j++) { - values[i][j] = this.genValue(); - } + } + return value; +}; + +Game.prototype.genValues = function() { + var values = []; + for (var i = 0; i < this.height; i++) { + values[i] = []; + for (var j = 0; j < this.width; j++) { + values[i][j] = this.genValue(); } - return values; - }; - - Game.prototype.genHtml = function() { - var board = "
" + values[i][j] + "
" + this.genValue() + "
" + this.values[i][j] + "
"; - for (var i = 0; i < this.height; i++) { - board += ""; - for (var j = 0; j < this.width; j++) { - board += ""; - } - board += ""; + } + return values; +}; + +Game.prototype.genHtml = function() { + var board = "
" + this.values[i][j] + "
"; + for (var i = 0; i < this.height; i++) { + board += ""; + for (var j = 0; j < this.width; j++) { + board += ""; } - board += "
" + this.values[i][j] + "
"; - return board; - }; - - Game.prototype.initBoard = function(chgvalues) { - if ( chgvalues ) { - this.takenValues = "#"; - this.values = this.genValues(); - } - $('#board').empty(); - $('#board').append(this.genHtml()); - $('.tile').click(action); - }; - - Game.prototype.checkWinner = function() { - this.clicked1.removeTile(); - this.clicked1 = null; - this.clicked2.removeTile(); - this.clicked2 = null; - if ( --this.remainingMatches === 0 ) { - setTimeout(function () { - $("#msg").append("

***WINNER***

"); - },800); - } - }; - - Game.prototype.unsetClickedTiles = function() { - this.clicked1.hideTile(); - this.clicked1 = null; - this.clicked2.hideTile(); - this.clicked2 = null; - }; - - var Tile = function($td) { - this.$td = $td; - this.$div = $td.find('div'); - this.value = $td.find('div').text(); - }; - - Tile.prototype.matches = function(tile) { - var match = false; - if ( this.value === tile.value ) { - match = true; - } - return match; - }; - - Tile.prototype.showTile = function() { - this.$div.css('opacity','1'); - }; - - Tile.prototype.hideTile = function() { - this.$div.animate({opacity: 0},750); - }; - - Tile.prototype.removeTile = function() { - this.$td.fadeOut(750); - }; - - Tile.prototype.sameTileAs = function($tile) { - return this.$td.is($tile); - }; - - var setClicked = function($tile) { - var clicked = new Tile($tile); - clicked.showTile(); - return clicked; - }; - - var action = function() { + board += ""; + } + board += ""; + return board; +}; + +Game.prototype.unsetClickedTiles = function() { + this.clicked1.hideTile(); + this.clicked1 = null; + this.clicked2.hideTile(); + this.clicked2 = null; +}; + +Game.prototype.removeClickedTiles = function() { + this.clicked1.removeTile(); + this.clicked1 = null; + this.clicked2.removeTile(); + this.clicked2 = null; +}; + +Game.prototype.checkWinner = function() { + if ( --this.remainingMatches === 0 ) { + setTimeout(function () { + $("#msg").append("

***WINNER***

"); + },800); + } +}; + +var Tile = function($td) { + this.$td = $td; + this.$div = $td.find('div'); + this.value = $td.find('div').text(); +}; + +Tile.prototype.matches = function(tile) { + var match = false; + if ( this.value === tile.value ) { + match = true; + } + return match; +}; + +Tile.prototype.showTile = function() { + this.$div.css('opacity','1'); +}; + +Tile.prototype.hideTile = function() { + this.$div.animate({opacity: 0},750); +}; + +Tile.prototype.removeTile = function() { + this.$td.fadeOut(750); +}; + +Tile.prototype.sameTileAs = function($tile) { + return this.$td.is($tile); +}; + +var setClicked = function($tile) { + var clicked = new Tile($tile); + clicked.showTile(); + return clicked; +}; + +Game.prototype.initBoard = function(chgvalues) { + var self = this; + if ( chgvalues ) { + self.takenValues = "#"; + self.values = this.genValues(); + } + $('#board').empty(); + $('#board').append(self.genHtml()); + $('.tile').click(function() { var $tile = $(this); - if ( game.clicked1 === null ) { - game.clicked1 = setClicked($tile); - } else if ( !game.clicked1.sameTileAs($tile) ) { - game.clicked2 = setClicked($tile); - if ( game.clicked2.matches(game.clicked1) ) { - game.checkWinner(); + if ( self.clicked1 === null ) { + self.clicked1 = setClicked($tile); + } else if ( !self.clicked1.sameTileAs($tile) ) { + self.clicked2 = setClicked($tile); + if ( self.clicked2.matches(self.clicked1) ) { + self.removeClickedTiles(); + self.checkWinner(); } else { - game.unsetClickedTiles(); + self.unsetClickedTiles(); } - } - }; + } + }); +}; + + // var action = function() { + // var $tile = $(this); + // if ( game.clicked1 === null ) { + // game.clicked1 = setClicked($tile); + // } else if ( !game.clicked1.sameTileAs($tile) ) { + // game.clicked2 = setClicked($tile); + // if ( game.clicked2.matches(game.clicked1) ) { + // game.removeClickedTiles(); + // game.checkWinner(); + // } else { + // game.unsetClickedTiles(); + // } + // } + // }; - // ------------------------------------------------------- +$(document).ready(function() { // Code only works for boards with an even number of tiles - var game = new Game(4,8); + var game = new Game(2,2); game.initBoard(true); $('#new').click(function() { $('#msg').empty(); @@ -155,5 +172,4 @@ $(document).ready(function() { game.clicked2 = null; game.remainingMatches = game.height*game.width/2; }); - }); From 38eec98a972ab2ebcf51301e11322537b79f0cce Mon Sep 17 00:00:00 2001 From: bluemittens505 Date: Tue, 23 Feb 2016 22:42:59 -0500 Subject: [PATCH 08/12] Memory Homework Re-arrange order of functions --- memory.js | 65 +++++++++++++++++++++---------------------------------- 1 file changed, 25 insertions(+), 40 deletions(-) diff --git a/memory.js b/memory.js index 9c333d5..c4a953a 100644 --- a/memory.js +++ b/memory.js @@ -57,6 +57,30 @@ Game.prototype.genHtml = function() { return board; }; +Game.prototype.initBoard = function(chgvalues) { + var self = this; + if ( chgvalues ) { + self.takenValues = "#"; + self.values = this.genValues(); + } + $('#board').empty(); + $('#board').append(self.genHtml()); + $('.tile').click(function() { + var $tile = $(this); + if ( self.clicked1 === null ) { + self.clicked1 = setClicked($tile); + } else if ( !self.clicked1.sameTileAs($tile) ) { + self.clicked2 = setClicked($tile); + if ( self.clicked2.matches(self.clicked1) ) { + self.removeClickedTiles(); + self.checkWinner(); + } else { + self.unsetClickedTiles(); + } + } + }); +}; + Game.prototype.unsetClickedTiles = function() { this.clicked1.hideTile(); this.clicked1 = null; @@ -115,48 +139,9 @@ var setClicked = function($tile) { return clicked; }; -Game.prototype.initBoard = function(chgvalues) { - var self = this; - if ( chgvalues ) { - self.takenValues = "#"; - self.values = this.genValues(); - } - $('#board').empty(); - $('#board').append(self.genHtml()); - $('.tile').click(function() { - var $tile = $(this); - if ( self.clicked1 === null ) { - self.clicked1 = setClicked($tile); - } else if ( !self.clicked1.sameTileAs($tile) ) { - self.clicked2 = setClicked($tile); - if ( self.clicked2.matches(self.clicked1) ) { - self.removeClickedTiles(); - self.checkWinner(); - } else { - self.unsetClickedTiles(); - } - } - }); -}; - - // var action = function() { - // var $tile = $(this); - // if ( game.clicked1 === null ) { - // game.clicked1 = setClicked($tile); - // } else if ( !game.clicked1.sameTileAs($tile) ) { - // game.clicked2 = setClicked($tile); - // if ( game.clicked2.matches(game.clicked1) ) { - // game.removeClickedTiles(); - // game.checkWinner(); - // } else { - // game.unsetClickedTiles(); - // } - // } - // }; - $(document).ready(function() { // Code only works for boards with an even number of tiles - var game = new Game(2,2); + var game = new Game(4,8); game.initBoard(true); $('#new').click(function() { $('#msg').empty(); From ba4c2457d30693563e48c35c5985cae34bce041e Mon Sep 17 00:00:00 2001 From: bluemittens505 Date: Tue, 23 Feb 2016 22:47:26 -0500 Subject: [PATCH 09/12] Revert "Memory Homework" This reverts commit 38eec98a972ab2ebcf51301e11322537b79f0cce. --- memory.js | 65 ++++++++++++++++++++++++++++++++++--------------------- 1 file changed, 40 insertions(+), 25 deletions(-) diff --git a/memory.js b/memory.js index c4a953a..9c333d5 100644 --- a/memory.js +++ b/memory.js @@ -57,30 +57,6 @@ Game.prototype.genHtml = function() { return board; }; -Game.prototype.initBoard = function(chgvalues) { - var self = this; - if ( chgvalues ) { - self.takenValues = "#"; - self.values = this.genValues(); - } - $('#board').empty(); - $('#board').append(self.genHtml()); - $('.tile').click(function() { - var $tile = $(this); - if ( self.clicked1 === null ) { - self.clicked1 = setClicked($tile); - } else if ( !self.clicked1.sameTileAs($tile) ) { - self.clicked2 = setClicked($tile); - if ( self.clicked2.matches(self.clicked1) ) { - self.removeClickedTiles(); - self.checkWinner(); - } else { - self.unsetClickedTiles(); - } - } - }); -}; - Game.prototype.unsetClickedTiles = function() { this.clicked1.hideTile(); this.clicked1 = null; @@ -139,9 +115,48 @@ var setClicked = function($tile) { return clicked; }; +Game.prototype.initBoard = function(chgvalues) { + var self = this; + if ( chgvalues ) { + self.takenValues = "#"; + self.values = this.genValues(); + } + $('#board').empty(); + $('#board').append(self.genHtml()); + $('.tile').click(function() { + var $tile = $(this); + if ( self.clicked1 === null ) { + self.clicked1 = setClicked($tile); + } else if ( !self.clicked1.sameTileAs($tile) ) { + self.clicked2 = setClicked($tile); + if ( self.clicked2.matches(self.clicked1) ) { + self.removeClickedTiles(); + self.checkWinner(); + } else { + self.unsetClickedTiles(); + } + } + }); +}; + + // var action = function() { + // var $tile = $(this); + // if ( game.clicked1 === null ) { + // game.clicked1 = setClicked($tile); + // } else if ( !game.clicked1.sameTileAs($tile) ) { + // game.clicked2 = setClicked($tile); + // if ( game.clicked2.matches(game.clicked1) ) { + // game.removeClickedTiles(); + // game.checkWinner(); + // } else { + // game.unsetClickedTiles(); + // } + // } + // }; + $(document).ready(function() { // Code only works for boards with an even number of tiles - var game = new Game(4,8); + var game = new Game(2,2); game.initBoard(true); $('#new').click(function() { $('#msg').empty(); From 0ebaf2302a79a3aeb7dd70fb730da6c2fb61286f Mon Sep 17 00:00:00 2001 From: bluemittens505 Date: Tue, 23 Feb 2016 22:51:24 -0500 Subject: [PATCH 10/12] Memory Homework Final version on Tuesday night. Hopefully more can be done tomorrow night. --- memory.js | 17 +---------------- 1 file changed, 1 insertion(+), 16 deletions(-) diff --git a/memory.js b/memory.js index 9c333d5..e7c8f39 100644 --- a/memory.js +++ b/memory.js @@ -139,24 +139,9 @@ Game.prototype.initBoard = function(chgvalues) { }); }; - // var action = function() { - // var $tile = $(this); - // if ( game.clicked1 === null ) { - // game.clicked1 = setClicked($tile); - // } else if ( !game.clicked1.sameTileAs($tile) ) { - // game.clicked2 = setClicked($tile); - // if ( game.clicked2.matches(game.clicked1) ) { - // game.removeClickedTiles(); - // game.checkWinner(); - // } else { - // game.unsetClickedTiles(); - // } - // } - // }; - $(document).ready(function() { // Code only works for boards with an even number of tiles - var game = new Game(2,2); + var game = new Game(4,8); game.initBoard(true); $('#new').click(function() { $('#msg').empty(); From 8810d384bbe0bc7c38b5e9861f27f6a64397af16 Mon Sep 17 00:00:00 2001 From: bluemittens505 Date: Wed, 24 Feb 2016 20:28:26 -0500 Subject: [PATCH 11/12] Memory Homework Added another class for buttons Added another board to make sure all objects operate independently More tweaks --- index.html | 19 +++++++--- memory.css | 12 +++++-- memory.js | 101 +++++++++++++++++++++++++++++++++-------------------- 3 files changed, 88 insertions(+), 44 deletions(-) diff --git a/index.html b/index.html index 7e68461..cc6ac96 100644 --- a/index.html +++ b/index.html @@ -7,10 +7,19 @@ -

Memory Game

-
-
- - +
+

Memory Game #1

+
+
+ + +
+
+

Memory Game #2

+
+
+ + +
diff --git a/memory.css b/memory.css index 1c47687..0f547c0 100644 --- a/memory.css +++ b/memory.css @@ -1,3 +1,11 @@ +#game { + float: left; + width: 50%; +} +#game2 { + float: right; + width: 50% +} h1 { color: #000066; } @@ -5,13 +13,13 @@ p { color: #0000CC; font-size: 20px; } -.tile { +.tile, .tile2 { height: 100px; width: 100px; border-radius: 100%; background-color: #F5680A; } -.tile div { +.tile div, .tile2 div { font-size: 40px; text-align: center; color: #FFFFFF; diff --git a/memory.js b/memory.js index e7c8f39..2642d79 100644 --- a/memory.js +++ b/memory.js @@ -1,13 +1,16 @@ -var Game = function(height,width) { +var Game = function(height,width,boardHtmlElementId,msgHtmlElementId,tileHtmlElementClass) { this.height = height; this.width = width; + this.boardHtmlElementId = boardHtmlElementId; + this.msgHtmlElementId = msgHtmlElementId; + this.tileHtmlElementClass = tileHtmlElementClass; + this.tileClass = tileHtmlElementClass.substr(1); this.maxValue = height*width/2; this.takenValues = "#"; this.values = null; this.clicked1 = null; this.clicked2 = null; this.remainingMatches = height*width/2; - this.msgElementId = "#msg"; }; Game.prototype.taken = function(value) { @@ -49,7 +52,7 @@ Game.prototype.genHtml = function() { for (var i = 0; i < this.height; i++) { board += ""; for (var j = 0; j < this.width; j++) { - board += "
" + this.values[i][j] + "
"; + board += "
" + this.values[i][j] + "
"; } board += ""; } @@ -72,10 +75,11 @@ Game.prototype.removeClickedTiles = function() { }; Game.prototype.checkWinner = function() { - if ( --this.remainingMatches === 0 ) { + var self = this; + if ( --self.remainingMatches === 0 ) { setTimeout(function () { - $("#msg").append("

***WINNER***

"); - },800); + $(self.msgHtmlElementId).append("

***WINNER***

"); + },775); } }; @@ -115,46 +119,69 @@ var setClicked = function($tile) { return clicked; }; +var action = function(event) { + var $tile = $(this); + var game = event.data.game; + if ( game.clicked1 === null ) { + game.clicked1 = setClicked($tile); + } else if ( !game.clicked1.sameTileAs($tile) ) { + game.clicked2 = setClicked($tile); + if ( game.clicked2.matches(game.clicked1) ) { + game.removeClickedTiles(); + game.checkWinner(); + } else { + game.unsetClickedTiles(); + } + } +}; + Game.prototype.initBoard = function(chgvalues) { var self = this; if ( chgvalues ) { self.takenValues = "#"; - self.values = this.genValues(); + self.values = self.genValues(); } - $('#board').empty(); - $('#board').append(self.genHtml()); - $('.tile').click(function() { - var $tile = $(this); - if ( self.clicked1 === null ) { - self.clicked1 = setClicked($tile); - } else if ( !self.clicked1.sameTileAs($tile) ) { - self.clicked2 = setClicked($tile); - if ( self.clicked2.matches(self.clicked1) ) { - self.removeClickedTiles(); - self.checkWinner(); - } else { - self.unsetClickedTiles(); - } - } - }); + $(self.boardHtmlElementId).empty(); + $(self.boardHtmlElementId).append(self.genHtml()); + $(self.tileHtmlElementClass).click({ + game:self + },action); }; -$(document).ready(function() { - // Code only works for boards with an even number of tiles - var game = new Game(4,8); - game.initBoard(true); - $('#new').click(function() { - $('#msg').empty(); - game.initBoard(true); - game.clicked1 = null; - game.clicked2 = null; - game.remainingMatches = game.height*game.width/2; - }); - $('#reset').click(function() { - $('#msg').empty(); - game.initBoard(false); +var Button = function(type,htmlElementId) { + this.type = type; + this.htmlElementId = htmlElementId; +}; + +Button.prototype.initButton = function(game) { + var chgvalues = false; + if ( this.type === "New" ) { + chgvalues = true; + } + $(this.htmlElementId).click(function() { + $(game.msgHtmlElementId).empty(); + game.initBoard(chgvalues); game.clicked1 = null; game.clicked2 = null; game.remainingMatches = game.height*game.width/2; }); +}; + +$(document).ready(function() { + // Code only works for boards with an even number of tiles + // 1st board + var game = new Game(3,6,"#board","#msg",".tile"); + game.initBoard(true); + var newButton = new Button("New","#new"); + newButton.initButton(game); + var resetButton = new Button("Reset","#reset"); + resetButton.initButton(game); + + // 2nd board + var game2 = new Game(4,4,"#board2","#msg2",".tile2"); + game2.initBoard(true); + var newButton2 = new Button("New","#new2"); + newButton2.initButton(game2); + var resetButton2 = new Button("Reset","#reset2"); + resetButton2.initButton(game2); }); From 9e7817ca01d2712d64995210b26009d966935702 Mon Sep 17 00:00:00 2001 From: bluemittens505 Date: Wed, 24 Feb 2016 21:50:05 -0500 Subject: [PATCH 12/12] Memory Homework More tweaks to pass Travis CI tests --- memory.js | 78 ++++++++++++++++++++++++++++++++----------------------- 1 file changed, 46 insertions(+), 32 deletions(-) diff --git a/memory.js b/memory.js index 2642d79..c763aff 100644 --- a/memory.js +++ b/memory.js @@ -1,16 +1,12 @@ -var Game = function(height,width,boardHtmlElementId,msgHtmlElementId,tileHtmlElementClass) { - this.height = height; - this.width = width; - this.boardHtmlElementId = boardHtmlElementId; - this.msgHtmlElementId = msgHtmlElementId; - this.tileHtmlElementClass = tileHtmlElementClass; - this.tileClass = tileHtmlElementClass.substr(1); - this.maxValue = height*width/2; +var Game = function(boardElements) { + this.boardElements = boardElements; + this.tileClass = boardElements.tileHtmlElementClass.substr(1); + this.maxValue = boardElements.height*boardElements.width/2; this.takenValues = "#"; this.values = null; this.clicked1 = null; this.clicked2 = null; - this.remainingMatches = height*width/2; + this.remainingMatches = boardElements.height*boardElements.width/2; }; Game.prototype.taken = function(value) { @@ -38,9 +34,9 @@ Game.prototype.genValue = function() { Game.prototype.genValues = function() { var values = []; - for (var i = 0; i < this.height; i++) { + for (var i = 0; i < this.boardElements.height; i++) { values[i] = []; - for (var j = 0; j < this.width; j++) { + for (var j = 0; j < this.boardElements.width; j++) { values[i][j] = this.genValue(); } } @@ -49,9 +45,9 @@ Game.prototype.genValues = function() { Game.prototype.genHtml = function() { var board = ""; - for (var i = 0; i < this.height; i++) { + for (var i = 0; i < this.boardElements.height; i++) { board += ""; - for (var j = 0; j < this.width; j++) { + for (var j = 0; j < this.boardElements.width; j++) { board += ""; } board += ""; @@ -78,7 +74,7 @@ Game.prototype.checkWinner = function() { var self = this; if ( --self.remainingMatches === 0 ) { setTimeout(function () { - $(self.msgHtmlElementId).append("

***WINNER***

"); + $(self.boardElements.msgHtmlElementId).append("

***WINNER***

"); },775); } }; @@ -141,9 +137,9 @@ Game.prototype.initBoard = function(chgvalues) { self.takenValues = "#"; self.values = self.genValues(); } - $(self.boardHtmlElementId).empty(); - $(self.boardHtmlElementId).append(self.genHtml()); - $(self.tileHtmlElementClass).click({ + $(self.boardElements.boardHtmlElementId).empty(); + $(self.boardElements.boardHtmlElementId).append(self.genHtml()); + $(self.boardElements.tileHtmlElementClass).click({ game:self },action); }; @@ -159,29 +155,47 @@ Button.prototype.initButton = function(game) { chgvalues = true; } $(this.htmlElementId).click(function() { - $(game.msgHtmlElementId).empty(); + $(game.boardElements.msgHtmlElementId).empty(); game.initBoard(chgvalues); game.clicked1 = null; game.clicked2 = null; - game.remainingMatches = game.height*game.width/2; + game.remainingMatches = game.boardElements.height*game.boardElements.width/2; }); }; -$(document).ready(function() { - // Code only works for boards with an even number of tiles - // 1st board - var game = new Game(3,6,"#board","#msg",".tile"); +var gameSetup = function(gameElements) { + var game = new Game({ + height: gameElements.height, + width: gameElements.width, + boardHtmlElementId: gameElements.boardHtmlElementId, + msgHtmlElementId: gameElements.msgHtmlElementId, + tileHtmlElementClass: gameElements.tileHtmlElementClass + }); game.initBoard(true); - var newButton = new Button("New","#new"); + var newButton = new Button("New",gameElements.newButtonHtmlElementId); newButton.initButton(game); - var resetButton = new Button("Reset","#reset"); + var resetButton = new Button("Reset",gameElements.resetButtonHtmlElementId); resetButton.initButton(game); +}; - // 2nd board - var game2 = new Game(4,4,"#board2","#msg2",".tile2"); - game2.initBoard(true); - var newButton2 = new Button("New","#new2"); - newButton2.initButton(game2); - var resetButton2 = new Button("Reset","#reset2"); - resetButton2.initButton(game2); +$(document).ready(function() { + // Code only works for boards with an even number of tiles + gameSetup({ + height: 3, + width: 6, + boardHtmlElementId: "#board", + msgHtmlElementId: "#msg", + tileHtmlElementClass: ".tile", + newButtonHtmlElementId: "#new" , + resetButtonHtmlElementId: "#reset" + }); + gameSetup({ + height: 4, + width: 4, + boardHtmlElementId: "#board2", + msgHtmlElementId: "#msg2", + tileHtmlElementClass: ".tile2", + newButtonHtmlElementId: "#new2" , + resetButtonHtmlElementId: "#reset2" + }); });
" + this.values[i][j] + "