diff --git a/unit_01/w02d04/homework/memory_solution/README.md b/unit_01/w02d04/homework/memory_solution/memory.md similarity index 85% rename from unit_01/w02d04/homework/memory_solution/README.md rename to unit_01/w02d04/homework/memory_solution/memory.md index 6e09bd0..89b0ef4 100644 --- a/unit_01/w02d04/homework/memory_solution/README.md +++ b/unit_01/w02d04/homework/memory_solution/memory.md @@ -1,9 +1,7 @@ # 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. - +Today we are going to build the game Memory. Write all your code in app.js, but +look at index.html to get your bearings. ### You will need diff --git a/unit_01/w02d04/homework/memory_starter/css/style.css b/unit_01/w02d04/homework/memory_starter/css/style.css index 4af4d92..a415548 100644 --- a/unit_01/w02d04/homework/memory_starter/css/style.css +++ b/unit_01/w02d04/homework/memory_starter/css/style.css @@ -36,6 +36,7 @@ button { text-align: center; vertical-align: middle; width: 50px; + transition: background-color 2s; } .column:hover { @@ -48,7 +49,7 @@ button { color: #FFFFFF; } -#footer { +#info { 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 3108730..82773f5 100644 --- a/unit_01/w02d04/homework/memory_starter/index.html +++ b/unit_01/w02d04/homework/memory_starter/index.html @@ -1,10 +1,9 @@ - + Memory -
@@ -13,9 +12,10 @@
- +
- +
...
+ \ 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 28fa33a..3163c78 100644 --- a/unit_01/w02d04/homework/memory_starter/js/app.js +++ b/unit_01/w02d04/homework/memory_starter/js/app.js @@ -1,11 +1,70 @@ window.onload = function() { - console.log('Loaded, bro'); + 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 NUMBERS -//+ Jonas Raoni Soares Silva -//@ http://jsfromhell.com/array/shuffle [v1.0] -function shuffle(o){ //v1.0 + +// 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/memory.md b/unit_01/w02d04/homework/memory_starter/memory.md index fd622e5..89b0ef4 100644 --- a/unit_01/w02d04/homework/memory_starter/memory.md +++ b/unit_01/w02d04/homework/memory_starter/memory.md @@ -1,33 +1,31 @@ -# 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. +Today we are going to build the game Memory. Write all your code in app.js, but +look at index.html to get your bearings. -# memoryGame object +### You will need -#### Attributes +#### Data -- tiles - - an array of 'tiles' representing the letter values that will be displayed on each DOM tile. +- 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.] -#### Behaviors +#### Functions - `start()` - - shuffle the gameboard's tiles - - then call a function to build and display the gameboard + - 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 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 + - 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 - - The click event should call the game object's makePlay function passing it the tile that was clicked + - 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 @@ -42,12 +40,16 @@ We're going to create a game object in which we define all of the logic for how - 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 footer + - add a winning message to the info div - 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 +- add a click event to the start button, so that when it is clicked a new game is triggered. +