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