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!
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

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

@ -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;
}

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

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

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

@ -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<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);
}

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

@ -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 ` <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
- `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.
- add a click event to the start button, so that when it is clicked a new game is triggered.

Write Preview
Loading…
Cancel
Save