Skip to content

Instantly share code, notes, and snippets.

@taniarascia taniarascia/memory-0.1.js
Last active Sep 14, 2018

Embed
What would you like to do?
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
You can’t perform that action at this time.