Thom Page
10 years ago
parent
b598185e21
commit
702d406231
@ -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;
|
||||||
|
}
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Memory</title>
|
||||||
|
<link rel="stylesheet" href="css/style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="content">
|
||||||
|
<div id="header">
|
||||||
|
<div id="title">Memory</div>
|
||||||
|
</div>
|
||||||
|
<button>Start Game</button>
|
||||||
|
<div id="game">
|
||||||
|
<!-- append your cards here -->
|
||||||
|
</div>
|
||||||
|
<div id="info">...</div>
|
||||||
|
</div>
|
||||||
|
<script type="text/javascript" src="js/app.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -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<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);
|
||||||
|
}
|
||||||
@ -1,70 +1,11 @@
|
|||||||
window.onload = function() {
|
window.onload = function() {
|
||||||
console.log('loaded');
|
console.log('Loaded, bro');
|
||||||
|
|
||||||
// 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
|
||||||
// USE THIS TO SHUFFLE YOUR ARRAYS
|
//+ Jonas Raoni Soares Silva
|
||||||
//o=array
|
//@ http://jsfromhell.com/array/shuffle [v1.0]
|
||||||
var tiles = ['A', 'A', 'B', 'B', 'C', 'C', 'D', 'D', 'E', 'E'];
|
function shuffle(o){ //v1.0
|
||||||
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);
|
|
||||||
}
|
|
||||||
@ -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.
|
||||||
@ -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 ` <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
|
||||||
|
- 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.
|
||||||
|
|
||||||
@ -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;
|
||||||
|
}
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Memory</title>
|
||||||
|
<link rel="stylesheet" href="css/style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="content">
|
||||||
|
<div id="header">
|
||||||
|
<div id="title">Memory</div>
|
||||||
|
</div>
|
||||||
|
<button>Start Game</button>
|
||||||
|
<div id="game">
|
||||||
|
<!-- append your cards here -->
|
||||||
|
</div>
|
||||||
|
<div id="info">...</div>
|
||||||
|
</div>
|
||||||
|
<script type="text/javascript" src="js/app.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -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<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);
|
||||||
|
}
|
||||||
Loading…
Reference in new issue