Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Memory pair game #42

Merged
merged 8 commits into from
Aug 15, 2022
Merged

Memory pair game #42

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
86fb28d
added files
Jul 31, 2022
f0dbcf0
added amended files
Aug 2, 2022
ab931ea
fixed matching and winning
Aug 5, 2022
d50168d
fixed media queries
Aug 5, 2022
1e2a0eb
small fix
Aug 5, 2022
afd4783
changed data-attr to ids, destructured variables
Aug 5, 2022
43e52b8
improved naming
Aug 5, 2022
cc077c1
fixed border styling
Aug 5, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 36 additions & 0 deletions submissions/kovalov/memory-pair-game/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<link rel="stylesheet" href="./styles.css" />
<title>Memory Pair Game</title>
</head>
<body>
<div class="page-wrapper">
<main class="game" id="game" data-is-active="false">
<div class="game__flipper">
<div class="game__front">
<div class="game__menu" id="game-menu">
<h1 class="game__menu-title">Memory Pair Game</h1>
<p class="game__menu-description">
Turn any two cards picture-side-up and find the pair.
</p>
<button class="game__menu-button" data-button="start">
Start
</button>
</div>
</div>
<div class="game__back">
<div class="game__grid" id="game-grid"></div>
</div>
</div>
</main>
</div>
<script src="./main.js"></script>
</body>
</html>
144 changes: 144 additions & 0 deletions submissions/kovalov/memory-pair-game/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,144 @@
const imageNames = [
'img-1.png',
'img-2.png',
'img-3.png',
'img-4.png',
'img-5.png',
'img-6.png',
'img-7.png',
'img-8.png',
];

let currentCard = '';
let previousCard = '';
let isActive = true;
let timesClicked = 0;
let timesMatched = 0;

const gameContainer = document.getElementById('game');
const gameMenu = document.getElementById('game-menu');
const cardGrid = document.getElementById('game-grid');

function getShuffledImages(imageNames, filePath) {
return [...imageNames, ...imageNames]
.sort(() => 0.5 - Math.random())
.map((imageName) => ({
imageName,
src: `${filePath}/${imageName}`,
}));
}

function createCardElement(cardDetails) {
const cardElement = document.createElement('div');
cardElement.innerHTML = `
<div class="game__card" data-is-opened="false" data-name="${cardDetails.imageName}">
<div class="game__card-flipper">
<div class="game__card-front">
<span class="game__card-icon">?</span>
</div>
<div class="game__card-back">
<img src="${cardDetails.src}" alt="" class="game__card-image"/>
</div>
</div>
</div>`;
return cardElement;
}

function initGame(imageNames, filePath, container) {
const shuffledImages = getShuffledImages(imageNames, filePath);
shuffledImages
.map(createCardElement)
.forEach((card) => addCardElement(card, container));
}

function addCardElement(cardElement, container) {
container.appendChild(cardElement);
}

gameMenu.addEventListener('click', (event) => {
if (event.target.dataset.button !== 'start') return;

cardGrid.innerHTML = '';

currentCard = '';
previousCard = '';

timesClicked = 0;
timesMatched = 0;

gameContainer.dataset.isActive = true;
initGame(imageNames, './assets/images', cardGrid);
});

function checkWinCombination() {
if (timesMatched !== 8) return;

isActive = false;
gameContainer.dataset.isActive = false;

gameMenu.innerHTML = '';
const successMessage = `
<h1 class="game__menu-title">You win!</h1>
<p class="game__menu-description">
You have made ${timesClicked} clicks.
</p>
<button class="game__menu-button" data-button="start">
Play Again
</button>
`;

gameMenu.innerHTML = successMessage;
}

function resetGameMove() {
currentCard = '';
previousCard = '';
isActive = true;
}

function handleMatchedCards() {
timesMatched++;
checkWinCombination();
resetGameMove();
return;
}

function handleNotMatchedCards() {
setTimeout(() => {
currentCard.dataset.isOpened = false;
previousCard.dataset.isOpened = false;
resetGameMove();
return;
}, 1000);
}

function checkMatchingCards(currentCardName, previousCardName) {
if (currentCardName === previousCardName) handleMatchedCards();
if (currentCardName !== previousCardName) handleNotMatchedCards();
}

function handleClick({ target }) {
if (isActive) {
if (!target.closest('.game__card')) return;

if (!currentCard) {
timesClicked++;
currentCard = target.closest('.game__card');
currentCard.dataset.isOpened = true;
return;
}

if (currentCard) {
previousCard = target.closest('.game__card');
previousCard.dataset.isOpened = true;
isActive = false;

const { name: currentCardName } = currentCard.dataset;
const { name: previousCardName } = previousCard.dataset;

checkMatchingCards(currentCardName, previousCardName);
}
}
}

cardGrid.addEventListener('click', handleClick);
Loading