Create a javascript version of the game of memory (concentration). There should
ID: 3716391 • Letter: C
Question
Create a javascript version of the game of memory (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 don’t, 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, and if two revealed cards do not match, return them to face down. A ‘replay game’ option when the game is over and use setTimeout to keep both face up cards visible for two seconds before hiding / removing them.
The following is a guide regarding the way that the program should be implemented :
1) Divs
2) Attributes (Card or tile value)
Add events (click) to cards and change innerHTML
3)Use a function with setTimeout that determines the result (match or no match)
4) Create element and use appendChild
Any help on this would be greatly appreciated!
Explanation / Answer
<html>
<head>
<script type="text/javascript"></script>
</head>
<body>
<section align="center">
<!--onclick this and numeric parameter is passed to check memory function -->
<div class="outer-grid"><div class="grid" id="grid-1"></div></div>
<div class="outer-grid"><div class="grid" id="grid-2"></div></div>
<div class="outer-grid"><div class="grid" id="grid-3"></div></div>
<div class="outer-grid"><div class="grid" id="grid-4"></div></div>
<div class="outer-grid"><div class="grid" id="grid-5"></div></div>
<div class="outer-grid"><div class="grid" id="grid-6"></div></div>
<div class="outer-grid"><div class="grid" id="grid-7"></div></div>
<div class="outer-grid"><div class="grid" id="grid-8"></div></div>
<div class="outer-grid"><div class="grid" id="grid-9"></div></div>
<div class="outer-grid"><div class="grid" id="grid-10"></div></div>
<div class="outer-grid"><div class="grid" id="grid-11"></div></div>
<div class="outer-grid"><div class="grid" id="grid-12"></div></div>
<div class="outer-grid"><div class="grid" id="grid-13"></div></div>
<div class="outer-grid"><div class="grid" id="grid-14"></div></div>
<div class="outer-grid"><div class="grid" id="grid-15"></div></div>
<div class="outer-grid"><div class="grid" id="grid-16"></div></div>
</section>
</body>
<style>
section{
width: 400px;
height:400px;
display:block;
text-align:center;
margin: auto;
}
.outer-grid{
width:23%;
height:23%;
margin:1%;
float:left;
}
.grid{
background:red;
width: 100%;
height:100%;
font-size: 80px;
font-weight: bold;
color: #fff;
}
</style>
<script>
// check memory function accepts two parameters which is passed as this is nothing but complete element on which
// the action is applied it is passed for reffrence. as you can see in the code this i am using as element and to that i am appending span element
// using innerHTML as alll the elements have same class this span will be added to only clicked element
// numeric value what we are passing is the value which we are going display when the grid is clicked
// this will be appended to the span and that span will be displayed on top the grid when clicked
function checkMemory(element, value){
if(value){
element.innerHTML = '<span class="display-grid-value" value='+value+'>'+value+'<span>';
var grids = document.getElementsByClassName('display-grid-value');
if(grids.length == 2){
if(parseInt(grids[0].innerText) == parseInt(grids[1].innerText)){
setTimeout(function(){
while(grids.length > 0) {
grids[0].parentNode.remove();
}
}, 1000);
}else{
setTimeout(function(){
while(grids.length > 0) {
grids[0].parentNode.removeChild(grids[0]);
}
}, 1000);
}
}
}
}
</script>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.