Thom Page
10 years ago
parent
bf7834d99f
commit
b0e4b43d9f
@ -1,57 +0,0 @@
|
||||
# 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.
|
||||
|
||||
@ -1,67 +0,0 @@
|
||||
@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;
|
||||
}
|
||||
@ -1,21 +0,0 @@
|
||||
<!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>
|
||||
@ -1,70 +0,0 @@
|
||||
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