From 1e5d37aeb11fe8f16d7beacac597323ddbafc8e9 Mon Sep 17 00:00:00 2001 From: Thom Page Date: Thu, 19 May 2016 16:12:46 -0400 Subject: [PATCH] stuff --- unit_01/w01d05/homework/solutions.js | 2 + .../homework/memory_starter/css/style.css | 67 ++++++++++++++++++ .../w02d04/homework/memory_starter/index.html | 21 ++++++ .../w02d04/homework/memory_starter/js/app.js | 70 +++++++++++++++++++ .../w02d04/homework/memory_starter/memory.md | 55 +++++++++++++++ 5 files changed, 215 insertions(+) create mode 100644 unit_01/w02d04/homework/memory_starter/css/style.css create mode 100644 unit_01/w02d04/homework/memory_starter/index.html create mode 100644 unit_01/w02d04/homework/memory_starter/js/app.js create mode 100644 unit_01/w02d04/homework/memory_starter/memory.md diff --git a/unit_01/w01d05/homework/solutions.js b/unit_01/w01d05/homework/solutions.js index 9d90ee4..b775227 100644 --- a/unit_01/w01d05/homework/solutions.js +++ b/unit_01/w01d05/homework/solutions.js @@ -349,3 +349,5 @@ console.log(oddBonds); + + diff --git a/unit_01/w02d04/homework/memory_starter/css/style.css b/unit_01/w02d04/homework/memory_starter/css/style.css new file mode 100644 index 0000000..a415548 --- /dev/null +++ b/unit_01/w02d04/homework/memory_starter/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_starter/index.html b/unit_01/w02d04/homework/memory_starter/index.html new file mode 100644 index 0000000..82773f5 --- /dev/null +++ b/unit_01/w02d04/homework/memory_starter/index.html @@ -0,0 +1,21 @@ + + + + + Memory + + + +
+ + +
+ +
+
...
+
+ + + \ 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 new file mode 100644 index 0000000..3163c78 --- /dev/null +++ b/unit_01/w02d04/homework/memory_starter/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/memory.md b/unit_01/w02d04/homework/memory_starter/memory.md new file mode 100644 index 0000000..89b0ef4 --- /dev/null +++ b/unit_01/w02d04/homework/memory_starter/memory.md @@ -0,0 +1,55 @@ +# Memory! + +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 + +#### 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. +