Question: Create a javascript version of the 'classic' game of memory (aka concentration). There should be a 4 x 4 grid of cards laid out face-down

Create a javascript version of the 'classic' game of memory (aka concentration). There should be a 4 x 4 grid of cards laid out face-down in front of the user. When clicked, reveal the face of a card. When a second card is tapped, reveal the face of that card as well. If the two cards match, remove them from the game. If they dont, return them to face-down and allow the user to choose two more.

Requirements

A 4x4 grid of facedown cards

Reveal the value of a facedown card on click

If two revealed cards match, remove them

If two revealed cards do not match, return them to face down

A replay game option when the game is over

Use setTimeout to keep both face up cards visible for two seconds before hiding / removing them.

The code below is what I have thus far for this assignment. Any help would be appreciated.

JavaScript Code:

var card = document.querySelectorAll(".card");

//loop through cards put same listener on e

for(var i = 0; i < card.length; i++) { card[i].addEventListener('click', flipCard); }

//remove card function flipCard(event){ var select1 = document.getElementsByTagName("DIV")[0].className; var select2 = "";

}

Html code:

Memory

Flip
Flip
Flip
Flip
Flip
Flip
Flip
Flip
Flip
Flip
Flip
Flip
Flip
Flip
Flip
Flip

Css:

.card{ float: left; width: 100px; height; 150px; text-align: center; background-color: rebeccapurple; padding: 10px; color: #fff; cursor: pointer; }

Step by Step Solution

There are 3 Steps involved in it

1 Expert Approved Answer
Step: 1 Unlock blur-text-image
Question Has Been Solved by an Expert!

Get step-by-step solutions from verified subject matter experts

Step: 2 Unlock
Step: 3 Unlock

Students Have Also Explored These Related Databases Questions!