Memory Game Tutorial
const cardsArray = [ /* ... */ ]; | |
const game = document.getElementById('game'); | |
const grid = document.createElement('section'); | |
grid.setAttribute('class', 'grid'); | |
game.appendChild(grid); | |
cardsArray.forEach(item => { | |
const card = document.createElement('div'); | |
card.classList.add('card'); | |
card.dataset.name = item.name; | |
card.style.backgroundImage = `url(${item.img})`; | |
grid.appendChild(card); | |
}); |
const cardsArray = [ /* ... */ ]; | |
let gameGrid = cardsArray.concat(cardsArray); | |
const game = document.getElementById('game'); | |
const grid = document.createElement('section'); | |
grid.setAttribute('class', 'grid'); | |
game.appendChild(grid); | |
gameGrid.forEach(item => { | |
const card = document.createElement('div'); | |
card.classList.add('card'); | |
card.dataset.name = item.name; | |
card.style.backgroundImage = `url(${item.img})`; | |
grid.appendChild(card); | |
}); |
const cardsArray = [ /* ... */ ]; | |
let gameGrid = cardsArray.concat(cardsArray); | |
gameGrid.sort(() => 0.5 - Math.random()); | |
const game = document.getElementById('game'); | |
const grid = document.createElement('section'); | |
grid.setAttribute('class', 'grid'); | |
game.appendChild(grid); | |
gameGrid.forEach(item => { | |
const card = document.createElement('div'); | |
card.classList.add('card'); | |
card.dataset.name = item.name; | |
card.style.backgroundImage = `url(${item.img})`; | |
grid.appendChild(card); | |
}); |
const cardsArray = [ /* ... */ ]; | |
let gameGrid = cardsArray.concat(cardsArray); | |
gameGrid.sort(() => 0.5 - Math.random()); | |
let count = 0; | |
const game = document.getElementById('game'); | |
const grid = document.createElement('section'); | |
grid.setAttribute('class', 'grid'); | |
game.appendChild(grid); | |
gameGrid.forEach(item => { | |
const card = document.createElement('div'); | |
card.classList.add('card'); | |
card.dataset.name = item.name; | |
card.style.backgroundImage = `url(${item.img})`; | |
grid.appendChild(card); | |
}); | |
grid.addEventListener('click', function (event) { | |
let clicked = event.target; | |
if (clicked.nodeName === 'SECTION') { return; } | |
clicked.classList.add('selected'); | |
}); |
const cardsArray = [ /* ... */ ]; | |
let gameGrid = cardsArray.concat(cardsArray); | |
gameGrid.sort(() => 0.5 - Math.random()); | |
let count = 0; | |
const game = document.getElementById('game'); | |
const grid = document.createElement('section'); | |
grid.setAttribute('class', 'grid'); | |
game.appendChild(grid); | |
gameGrid.forEach(item => { | |
const card = document.createElement('div'); | |
card.classList.add('card'); | |
card.dataset.name = item.name; | |
card.style.backgroundImage = `url(${item.img})`; | |
grid.appendChild(card); | |
}); | |
grid.addEventListener('click', function (event) { | |
let clicked = event.target; | |
if (clicked.nodeName === 'SECTION') { return; } | |
if (count < 2) { | |
count++; | |
clicked.classList.add('selected'); | |
} | |
}); |
const cardsArray = [ /* ... */ ]; | |
let gameGrid = cardsArray.concat(cardsArray); | |
gameGrid.sort(() => 0.5 - Math.random()); | |
let firstGuess = ''; | |
let secondGuess = ''; | |
let count = 0; | |
let previousTarget = null; | |
const game = document.getElementById('game'); | |
const grid = document.createElement('section'); | |
grid.setAttribute('class', 'grid'); | |
game.appendChild(grid); | |
gameGrid.forEach(item => { | |
const card = document.createElement('div'); | |
card.classList.add('card'); | |
card.dataset.name = item.name; | |
card.style.backgroundImage = `url(${item.img})`; | |
grid.appendChild(card); | |
}); | |
// Add match CSS | |
const match = () => { | |
let selected = document.querySelectorAll('.selected'); | |
selected.forEach(card => { | |
card.classList.add('match'); | |
}); | |
} | |
grid.addEventListener('click', function (event) { | |
let clicked = event.target; | |
if (clicked.nodeName === 'SECTION' || clicked === previousTarget) { | |
return; | |
} | |
if (count < 2) { | |
count++; | |
if (count === 1) { | |
firstGuess = clicked.dataset.name; | |
console.log(firstGuess); | |
clicked.classList.add('selected'); | |
} else { | |
secondGuess = clicked.dataset.name; | |
console.log(secondGuess); | |
clicked.classList.add('selected'); | |
} | |
if (firstGuess !== '' && secondGuess !== '') { | |
if (firstGuess === secondGuess) { | |
match(); | |
} | |
previousTarget = clicked; | |
} | |
}); |
const cardsArray = [ /* ... */ ]; | |
let gameGrid = cardsArray.concat(cardsArray); | |
gameGrid.sort(() => 0.5 - Math.random()); | |
let firstGuess = ''; | |
let secondGuess = ''; | |
let count = 0; | |
let previousTarget = null; | |
const game = document.getElementById('game'); | |
const grid = document.createElement('section'); | |
grid.setAttribute('class', 'grid'); | |
game.appendChild(grid); | |
gameGrid.forEach(item => { | |
const card = document.createElement('div'); | |
card.classList.add('card'); | |
card.dataset.name = item.name; | |
card.style.backgroundImage = `url(${item.img})`; | |
grid.appendChild(card); | |
}); | |
const match = () => { | |
let selected = document.querySelectorAll('.selected'); | |
selected.forEach(card => { | |
card.classList.add('match'); | |
}); | |
} | |
const resetGuesses = () => { | |
firstGuess = ''; | |
secondGuess = ''; | |
count = 0; | |
var selected = document.querySelectorAll('.selected'); | |
selected.forEach(card => { | |
card.classList.remove('selected'); | |
}); | |
}; | |
grid.addEventListener('click', function (event) { | |
let clicked = event.target; | |
if (clicked.nodeName === 'SECTION' || clicked === previousTarget) { | |
return; | |
} | |
if (count < 2) { | |
count++; | |
if (count === 1) { | |
firstGuess = clicked.dataset.name; | |
console.log(firstGuess); | |
clicked.classList.add('selected'); | |
} else { | |
secondGuess = clicked.dataset.name; | |
console.log(secondGuess); | |
clicked.classList.add('selected'); | |
} | |
if (firstGuess !== '' && secondGuess !== '') { | |
if (firstGuess === secondGuess) { | |
match(); | |
resetGuesses(); | |
} else { | |
resetGuesses(); | |
} | |
} | |
previousTarget = clicked; | |
} | |
}); |
const cardsArray = [ /* ... */ ]; | |
let gameGrid = cardsArray.concat(cardsArray); | |
gameGrid.sort(() => 0.5 - Math.random()); | |
let firstGuess = ''; | |
let secondGuess = ''; | |
let count = 0; | |
let previousTarget = null; | |
let delay = 1200; | |
const game = document.getElementById('game'); | |
const grid = document.createElement('section'); | |
grid.setAttribute('class', 'grid'); | |
game.appendChild(grid); | |
gameGrid.forEach(item => { | |
const card = document.createElement('div'); | |
card.classList.add('card'); | |
card.dataset.name = item.name; | |
card.style.backgroundImage = `url(${item.img})`; | |
grid.appendChild(card); | |
}); | |
const match = () => { | |
let selected = document.querySelectorAll('.selected'); | |
selected.forEach(card => { | |
card.classList.add('match'); | |
}); | |
} | |
const resetGuesses = () => { | |
firstGuess = ''; | |
secondGuess = ''; | |
count = 0; | |
var selected = document.querySelectorAll('.selected'); | |
selected.forEach(card => { | |
card.classList.remove('selected'); | |
}); | |
}; | |
grid.addEventListener('click', function (event) { | |
let clicked = event.target; | |
if (clicked.nodeName === 'SECTION' || clicked === previousTarget) { | |
return; | |
} | |
if (count < 2) { | |
count++; | |
if (count === 1) { | |
firstGuess = clicked.dataset.name; | |
console.log(firstGuess); | |
clicked.classList.add('selected'); | |
} else { | |
secondGuess = clicked.dataset.name; | |
console.log(secondGuess); | |
clicked.classList.add('selected'); | |
} | |
if (firstGuess !== '' && secondGuess !== '') { | |
if (firstGuess === secondGuess) { | |
setTimeout(match, delay); | |
setTimeout(resetGuesses, delay); | |
} else { | |
setTimeout(resetGuesses, delay); | |
} | |
} | |
previousTarget = clicked; | |
} | |
}); |
const cardsArray = [ /* ... */ ]; | |
let gameGrid = cardsArray.concat(cardsArray); | |
gameGrid.sort(() => 0.5 - Math.random()); | |
let firstGuess = ''; | |
let secondGuess = ''; | |
let count = 0; | |
let previousTarget = null; | |
let delay = 1200; | |
const game = document.getElementById('game'); | |
const grid = document.createElement('section'); | |
grid.setAttribute('class', 'grid'); | |
game.appendChild(grid); | |
gameGrid.forEach(item => { | |
const card = document.createElement('div'); | |
card.classList.add('card'); | |
card.dataset.name = item.name; | |
const front = document.createElement('div'); | |
front.classList.add('front'); | |
const back = document.createElement('div'); | |
back.classList.add('back'); | |
back.style.backgroundImage = `url(${item.img})`; | |
grid.appendChild(card); | |
card.appendChild(front); | |
card.appendChild(back); | |
}); | |
const match = () => { | |
let selected = document.querySelectorAll('.selected'); | |
selected.forEach(card => { | |
card.classList.add('match'); | |
}); | |
} | |
const resetGuesses = () => { | |
firstGuess = ''; | |
secondGuess = ''; | |
count = 0; | |
var selected = document.querySelectorAll('.selected'); | |
selected.forEach(card => { | |
card.classList.remove('selected'); | |
}); | |
}; | |
grid.addEventListener('click', function (event) { | |
let clicked = event.target; | |
if (clicked.nodeName === 'SECTION' || clicked === previousTarget || clicked.parentNode.classList.contains('selected')) { | |
return; | |
} | |
if (count < 2) { | |
count++; | |
if (count === 1) { | |
firstGuess = clicked.parentNode.dataset.name; | |
console.log(firstGuess); | |
clicked.parentNode.classList.add('selected'); | |
} else { | |
secondGuess = clicked.parentNode.dataset.name; | |
console.log(secondGuess); | |
clicked.parentNode.classList.add('selected'); | |
} | |
if (firstGuess !== '' && secondGuess !== '') { | |
if (firstGuess === secondGuess) { | |
setTimeout(match, delay); | |
setTimeout(resetGuesses, delay); | |
} else { | |
setTimeout(resetGuesses, delay); | |
} | |
} | |
previousTarget = clicked; | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment