mahuntington
/
panpsychism
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

replacing folders

Browse Source
master
Thom Page 10 years ago
parent b0e4b43d9f
commit fe1a7cf3a9
5 changed files with 93 additions and 33 deletions
Show Stats Download Patch File Download Diff File

6
unit_01/w02d04/homework/memory_solution/README.md → unit_01/w02d04/homework/memory_solution/memory.md
Unescape View File

@ -1,9 +1,7 @@
# Memory! # 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. 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.
Take it one step at a time. Follow these instructions to help get you going.
### You will need ### You will need

3
unit_01/w02d04/homework/memory_starter/css/style.css
Unescape View File

@ -36,6 +36,7 @@ button {
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
width: 50px; width: 50px;
transition: background-color 2s;
} }
.column:hover { .column:hover {
@ -48,7 +49,7 @@ button {
color: #FFFFFF; color: #FFFFFF;
} }
#footer { #info {
font-family: 'Londrina Shadow', cursive; font-family: 'Londrina Shadow', cursive;
font-size: 50px; font-size: 50px;
} }

8
unit_01/w02d04/homework/memory_starter/index.html
Unescape View File

@ -1,10 +1,9 @@
<!doctype html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Memory</title> <title>Memory</title>
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/app.js"></script>
</head> </head>
<body> <body>
<div id="content"> <div id="content">
@ -13,9 +12,10 @@
</div> </div>
<button>Start Game</button> <button>Start Game</button>
<div id="game"> <div id="game">
<!-- append you cards here --> <!-- append your cards here -->
</div> </div>
<div id="footer"></div> <div id="info">...</div>
</div> </div>
<script type="text/javascript" src="js/app.js"></script>
</body> </body>
</html> </html>

69
unit_01/w02d04/homework/memory_starter/js/app.js
Unescape View File

@ -1,11 +1,70 @@
window.onload = function() { 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 // USE THIS TO SHUFFLE YOUR ARRAYS
//@ http://jsfromhell.com/array/shuffle [v1.0] //o=array
function shuffle(o){ //v1.0 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); 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; return o;
}; };
function start(){
shuffle(tiles);
makeAndDisplayTiles();
}
function makeAndDisplayTiles(){
document.getElementById('game').innerHTML = "";
document.getElementById('info').innerHTML = "";
for(var i = 0; i<tiles.length;i++){
var tile = document.createElement('div');
tile.setAttribute('class', 'column');
tile.setAttribute('data-value',tiles[i]);
document.getElementById('game').appendChild(tile);
tile.onclick = function(){
makePlay(this);
};
}
// addEventsToTiles();
}
// function addEventsToTiles(){
// var tile = document.getElementsByClassName('column');
// tile.onclick = makePlay(this);
// }
function makePlay(tile){
tile.innerHTML = tile.dataset.value;
tile.className += " found";
}
function processData(n) {
var result="";
for(var i = 1; i<=n; i++){
var spaces = i;
while(spaces <= n-1){
result+=" ";
spaces++;
}
var stairs = i;
while(stairs > 0){
result+='#';
stairs--;
}
result+='\n'
}
console.log(result);
}

38
unit_01/w02d04/homework/memory_starter/memory.md
Unescape View File

@ -1,33 +1,31 @@
# CODE ALONG 02-04
# Memory! # Memory!
Today we are going to build the game 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.
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 ### You will need
#### Attributes #### Data
- tiles - an array of ten tiles
- an array of 'tiles' representing the letter values that will be displayed on each DOM tile. - 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()` - `start()`
- shuffle the gameboard's tiles - shuffle the tiles array
- then call a function to build and display the gameboard - then call makeAndDisplayTiles to build and display the gameboard
- `makeAndDisplayTiles()` - `makeAndDisplayTiles()`
- this function should empty the container that will hold the gameboard tiles - this function should empty the container that will hold the gameboard tiles
- it should reset the footer's text - it should clear the text in the info div
- it should create 10 new game tiles - it should create 10 new game tiles
- add a data-attribute - give them the class 'column'
- 'data-value' set equal to the one of the shuffled game tiles - give them a 'data-value' attribute from each element of your tiles array. The output for an 'A' tile will look like ` <div class="column" data-value="A"></div> `
- add the game tiles to the board
- then call a function that will add click events to each tile - then call a function that will add click events to each tile
- `addEventsToTiles()` - `addEventsToTiles()`
- should add click events to each of the gameboard tiles - 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)` - `makePlay(tile)`
- this function should set the text of the current clicked tile to the value stored in the data attribute - 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 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 - if no match is found
- the text of the clicked cards should be set back to empty - the text of the clicked cards should be set back to empty
- the found and clicked classes should both be removed - 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()` - `checkForWin()`
- if the number of found tiles is 10 - 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 - remove the found class
- add a won class - add a won class
## START ## START
- add a click event to the button, so that when it is clicked a new game is triggered. - add a click event to the start button, so that when it is clicked a new game is triggered.

Write Preview
Loading…
Cancel
Save