From 702d40623135b75248c294cb126b74dd56470881 Mon Sep 17 00:00:00 2001 From: Thom Page Date: Wed, 25 May 2016 17:15:46 -0400 Subject: [PATCH] memory games --- .../README.md | 0 .../homework/memory_solution/css/style.css | 67 ++++++++++++++++++ .../homework/memory_solution/index.html | 21 ++++++ .../w02d04/homework/memory_solution/js/app.js | 70 +++++++++++++++++++ .../homework/memory_starter/css/style.css | 3 +- .../w02d04/homework/memory_starter/index.html | 8 +-- .../w02d04/homework/memory_starter/js/app.js | 69 ++---------------- .../w02d04/homework/memory_starter/memory.md | 53 ++++++++++++++ .../w02d04/homework/memory_starter2/README.md | 57 +++++++++++++++ .../homework/memory_starter2/css/style.css | 67 ++++++++++++++++++ .../homework/memory_starter2/index.html | 21 ++++++ .../w02d04/homework/memory_starter2/js/app.js | 70 +++++++++++++++++++ 12 files changed, 436 insertions(+), 70 deletions(-) rename unit_01/w02d04/homework/{memory_starter => memory_solution}/README.md (100%) create mode 100644 unit_01/w02d04/homework/memory_solution/css/style.css create mode 100644 unit_01/w02d04/homework/memory_solution/index.html create mode 100644 unit_01/w02d04/homework/memory_solution/js/app.js create mode 100644 unit_01/w02d04/homework/memory_starter/memory.md create mode 100644 unit_01/w02d04/homework/memory_starter2/README.md create mode 100644 unit_01/w02d04/homework/memory_starter2/css/style.css create mode 100644 unit_01/w02d04/homework/memory_starter2/index.html create mode 100644 unit_01/w02d04/homework/memory_starter2/js/app.js diff --git a/unit_01/w02d04/homework/memory_starter/README.md b/unit_01/w02d04/homework/memory_solution/README.md similarity index 100% rename from unit_01/w02d04/homework/memory_starter/README.md rename to unit_01/w02d04/homework/memory_solution/README.md diff --git a/unit_01/w02d04/homework/memory_solution/css/style.css b/unit_01/w02d04/homework/memory_solution/css/style.css new file mode 100644 index 0000000..a415548 --- /dev/null +++ b/unit_01/w02d04/homework/memory_solution/css/style.css @@ -0,0 +1,67 @@ +@import url(http://fonts.googleapis.com/css?family=Londrina+Shadow); +@import url(http://fonts.googleapis.com/css?family=Mystery+Quest); + +body { + background: url(http://subtlepatterns.com/images/transp_bg.png); +} +#content { + margin: 0 auto; + width: 360px; +} + +#header { + margin-bottom: 20px; +} + +#title { + font-family: 'Londrina Shadow', cursive; + font-size: 100px; +} + +button { + margin-bottom: 20px; +} + +.row { + clear: both; +} + +.column { + border: 1px solid #595139; + float: left; + font-family: 'Londrina Shadow', cursive; + font-size: 50px; + height: 65px; + margin: 5px; + text-align: center; + vertical-align: middle; + width: 50px; + transition: background-color 2s; +} + +.column:hover { + background-color: #A6977B; +} + +/* when two cards match apply this class to them*/ +.found { + background-color: #595139; + color: #FFFFFF; +} + +#info { + font-family: 'Londrina Shadow', cursive; + font-size: 50px; +} + +/* apply to every card when the user wins */ +.won { + background-color: #F2F0CE; + border: 1px solid #83A603; + color: #83A603; +} + +#timer { + font-family: 'Mystery Quest', cursive; + font-size: 20px; +} \ No newline at end of file diff --git a/unit_01/w02d04/homework/memory_solution/index.html b/unit_01/w02d04/homework/memory_solution/index.html new file mode 100644 index 0000000..82773f5 --- /dev/null +++ b/unit_01/w02d04/homework/memory_solution/index.html @@ -0,0 +1,21 @@ + + + + + Memory + + + +
+ + +
+ +
+
...
+
+ + + \ No newline at end of file diff --git a/unit_01/w02d04/homework/memory_solution/js/app.js b/unit_01/w02d04/homework/memory_solution/js/app.js new file mode 100644 index 0000000..3163c78 --- /dev/null +++ b/unit_01/w02d04/homework/memory_solution/js/app.js @@ -0,0 +1,70 @@ +window.onload = function() { + console.log('loaded'); + + // Invoke your chain of functions and listeners within window.onload + // var button = document.getElementsByTagName('button'); + // button.onclick(function(){ + // start(); + // }) +start(); +} + + +// USE THIS TO SHUFFLE YOUR ARRAYS +//o=array +var tiles = ['A', 'A', 'B', 'B', 'C', 'C', 'D', 'D', 'E', 'E']; +function shuffle(o) { + for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x); + return o; +}; + +function start(){ + + shuffle(tiles); + makeAndDisplayTiles(); +} + +function makeAndDisplayTiles(){ + document.getElementById('game').innerHTML = ""; + document.getElementById('info').innerHTML = ""; + for(var i = 0; i 0){ + result+='#'; + stairs--; + } + result+='\n' + } + console.log(result); +} \ No newline at end of file diff --git a/unit_01/w02d04/homework/memory_starter/css/style.css b/unit_01/w02d04/homework/memory_starter/css/style.css index a415548..4af4d92 100644 --- a/unit_01/w02d04/homework/memory_starter/css/style.css +++ b/unit_01/w02d04/homework/memory_starter/css/style.css @@ -36,7 +36,6 @@ button { text-align: center; vertical-align: middle; width: 50px; - transition: background-color 2s; } .column:hover { @@ -49,7 +48,7 @@ button { color: #FFFFFF; } -#info { +#footer { font-family: 'Londrina Shadow', cursive; font-size: 50px; } diff --git a/unit_01/w02d04/homework/memory_starter/index.html b/unit_01/w02d04/homework/memory_starter/index.html index 82773f5..3108730 100644 --- a/unit_01/w02d04/homework/memory_starter/index.html +++ b/unit_01/w02d04/homework/memory_starter/index.html @@ -1,9 +1,10 @@ - + Memory +
@@ -12,10 +13,9 @@
- +
-
...
+ - \ No newline at end of file diff --git a/unit_01/w02d04/homework/memory_starter/js/app.js b/unit_01/w02d04/homework/memory_starter/js/app.js index 3163c78..28fa33a 100644 --- a/unit_01/w02d04/homework/memory_starter/js/app.js +++ b/unit_01/w02d04/homework/memory_starter/js/app.js @@ -1,70 +1,11 @@ window.onload = function() { - console.log('loaded'); - - // Invoke your chain of functions and listeners within window.onload - // var button = document.getElementsByTagName('button'); - // button.onclick(function(){ - // start(); - // }) -start(); + console.log('Loaded, bro'); } - -// USE THIS TO SHUFFLE YOUR ARRAYS -//o=array -var tiles = ['A', 'A', 'B', 'B', 'C', 'C', 'D', 'D', 'E', 'E']; -function shuffle(o) { +// USE THIS TO SHUFFLE YOUR NUMBERS +//+ Jonas Raoni Soares Silva +//@ http://jsfromhell.com/array/shuffle [v1.0] +function shuffle(o){ //v1.0 for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x); return o; }; - -function start(){ - - shuffle(tiles); - makeAndDisplayTiles(); -} - -function makeAndDisplayTiles(){ - document.getElementById('game').innerHTML = ""; - document.getElementById('info').innerHTML = ""; - for(var i = 0; i 0){ - result+='#'; - stairs--; - } - result+='\n' - } - console.log(result); -} \ No newline at end of file diff --git a/unit_01/w02d04/homework/memory_starter/memory.md b/unit_01/w02d04/homework/memory_starter/memory.md new file mode 100644 index 0000000..fd622e5 --- /dev/null +++ b/unit_01/w02d04/homework/memory_starter/memory.md @@ -0,0 +1,53 @@ +# CODE ALONG 02-04 + +# Memory! + +Today we are going to build the game memory. + +We're going to create a game object in which we define all of the logic for how our game should work. Then we will add click events to make the game functional. + +# memoryGame object + +#### Attributes + +- tiles + - an array of 'tiles' representing the letter values that will be displayed on each DOM tile. + +#### Behaviors + +- `start()` + - shuffle the gameboard's tiles + - then call a function to build and display the gameboard +- `makeAndDisplayTiles()` + - this function should empty the container that will hold the gameboard tiles + - it should reset the footer's text + - it should create 10 new game tiles + - add a data-attribute + - 'data-value' set equal to the one of the shuffled game tiles + - then call a function that will add click events to each tile +- `addEventsToTiles()` + - should add click events to each of the gameboard tiles + - The click event should call the game object's makePlay function passing it the tile that was clicked +- `makePlay(tile)` + - this function should set the text of the current clicked tile to the value stored in the data attribute + - it should add a class of found to the tile + - it should add a class of clicked to the tile + - if the number of clicked tiles is 2, then it should check for a match +- `checkForMatch()` + - this should retrieve the data-value of the two clicked tiles + - if they are a match + - the 'clicked' class should be removed from the tiles + - the click event should be turned off for those tiles + - should check for a win + - if no match is found + - the text of the clicked cards should be set back to empty + - the found and clicked classes should both be removed +- `checkForWin()` + - if the number of found tiles is 10 + - add a winning message to the footer + - remove the found class + - add a won class + +## START + +- add a click event to the button, so that when it is clicked a new game is triggered. \ No newline at end of file diff --git a/unit_01/w02d04/homework/memory_starter2/README.md b/unit_01/w02d04/homework/memory_starter2/README.md new file mode 100644 index 0000000..6e09bd0 --- /dev/null +++ b/unit_01/w02d04/homework/memory_starter2/README.md @@ -0,0 +1,57 @@ +# Memory! + +Tonight you are going to build the game called: [Memory](https://en.wikipedia.org/wiki/Concentration_(game)). We have provided you with a few starter files. You will look at the `index.html` to set up your physical board and cards, but write the code in your `app.js` file to get your game to work. + +Take it one step at a time. Follow these instructions to help get you going. + + +### You will need + +#### Data + +- an array of ten tiles + - your ten 'tiles' will represent the letter values that will be displayed on each DOM tile. eg. ['A', 'A', 'B', 'B', etc.] + +#### Functions + +- `start()` + - shuffle the tiles array + - then call makeAndDisplayTiles to build and display the gameboard +- `makeAndDisplayTiles()` + - this function should empty the container that will hold the gameboard tiles + - it should clear the text in the info div + - it should create 10 new game tiles + - give them the class 'column' + - give them a 'data-value' attribute from each element of your tiles array. The output for an 'A' tile will look like `
` + - add the game tiles to the board + - then call a function that will add click events to each tile +- `addEventsToTiles()` + - should add click events to each of the gameboard tiles + - Each click event should call the makePlay function passing it the tile that was clicked. Strong hint: the tile that was clicked is `this` tile . . . Can you pass `this` as a parameter to the makePlay function? Test it out. +- `makePlay(tile)` + - this function should set the text of the current clicked tile to the value stored in the data attribute + - it should add a class of found to the tile + - it should add a class of clicked to the tile + - if the number of clicked tiles is 2, then it should check for a match +- `checkForMatch()` + - this should retrieve the data-value of the two clicked tiles + - if they are a match + - the 'clicked' class should be removed from the tiles + - the click event should be turned off for those tiles + - should check for a win + - if no match is found + - the text of the clicked cards should be set back to empty + - the found and clicked classes should both be removed + - BONUS: use setTimeout to keep your cards showing for a hot + moment. +*After you have the preceding functions working:* +- `checkForWin()` + - if the number of found tiles is 10 + - add a winning message to the info div + - remove the found class + - add a won class + +## START + +- add a click event to the start button, so that when it is clicked a new game is triggered. + diff --git a/unit_01/w02d04/homework/memory_starter2/css/style.css b/unit_01/w02d04/homework/memory_starter2/css/style.css new file mode 100644 index 0000000..a415548 --- /dev/null +++ b/unit_01/w02d04/homework/memory_starter2/css/style.css @@ -0,0 +1,67 @@ +@import url(http://fonts.googleapis.com/css?family=Londrina+Shadow); +@import url(http://fonts.googleapis.com/css?family=Mystery+Quest); + +body { + background: url(http://subtlepatterns.com/images/transp_bg.png); +} +#content { + margin: 0 auto; + width: 360px; +} + +#header { + margin-bottom: 20px; +} + +#title { + font-family: 'Londrina Shadow', cursive; + font-size: 100px; +} + +button { + margin-bottom: 20px; +} + +.row { + clear: both; +} + +.column { + border: 1px solid #595139; + float: left; + font-family: 'Londrina Shadow', cursive; + font-size: 50px; + height: 65px; + margin: 5px; + text-align: center; + vertical-align: middle; + width: 50px; + transition: background-color 2s; +} + +.column:hover { + background-color: #A6977B; +} + +/* when two cards match apply this class to them*/ +.found { + background-color: #595139; + color: #FFFFFF; +} + +#info { + font-family: 'Londrina Shadow', cursive; + font-size: 50px; +} + +/* apply to every card when the user wins */ +.won { + background-color: #F2F0CE; + border: 1px solid #83A603; + color: #83A603; +} + +#timer { + font-family: 'Mystery Quest', cursive; + font-size: 20px; +} \ No newline at end of file diff --git a/unit_01/w02d04/homework/memory_starter2/index.html b/unit_01/w02d04/homework/memory_starter2/index.html new file mode 100644 index 0000000..82773f5 --- /dev/null +++ b/unit_01/w02d04/homework/memory_starter2/index.html @@ -0,0 +1,21 @@ + + + + + Memory + + + +
+ + +
+ +
+
...
+
+ + + \ No newline at end of file diff --git a/unit_01/w02d04/homework/memory_starter2/js/app.js b/unit_01/w02d04/homework/memory_starter2/js/app.js new file mode 100644 index 0000000..3163c78 --- /dev/null +++ b/unit_01/w02d04/homework/memory_starter2/js/app.js @@ -0,0 +1,70 @@ +window.onload = function() { + console.log('loaded'); + + // Invoke your chain of functions and listeners within window.onload + // var button = document.getElementsByTagName('button'); + // button.onclick(function(){ + // start(); + // }) +start(); +} + + +// USE THIS TO SHUFFLE YOUR ARRAYS +//o=array +var tiles = ['A', 'A', 'B', 'B', 'C', 'C', 'D', 'D', 'E', 'E']; +function shuffle(o) { + for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x); + return o; +}; + +function start(){ + + shuffle(tiles); + makeAndDisplayTiles(); +} + +function makeAndDisplayTiles(){ + document.getElementById('game').innerHTML = ""; + document.getElementById('info').innerHTML = ""; + for(var i = 0; i 0){ + result+='#'; + stairs--; + } + result+='\n' + } + console.log(result); +} \ No newline at end of file