jasterv/MEMORY-CARD-GAME
1
0
Fork 0
mirror of https://codeberg.org/JasterV/MEMORY-CARD-GAME.git synced 2026-04-26 18:20:03 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

🏃👙 Checkpoint

Browse source 
./script.js:18108132/4948:18108380/585
./style.css:18108127/14
./index.html:18108127/28
This commit is contained in:
Glitch (hello-webpage) 2020-07-30 07:44:22 +00:00
commit 2b3025c5e6
3 changed files with 53 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

4
index.html
View file

@ -17,7 +17,7 @@
<body>
<div class="cards-row">
<div class="left-card card">
<div class="choose-username hide">
<div class="choose-username">
<h1>Choose a username</h1>
<div class="username-container">
<input
@ -36,7 +36,7 @@
<div id="images-grid" class="hide images-grid"></div>
<div id="mode-container">
<div id="mode-container" class="hide">
<h1>Choose the difficulty</h1>
<div class="mode-btns">
<button id="easy-btn" class="game-button">

57
script.js
View file

@ -45,7 +45,11 @@ let playBtn = document.getElementById("play");
let chooseUserDiv = document.querySelector(".choose-username");
let imgsGrid = document.getElementById("images-grid");
let congratsDiv = document.getElementById("congrats-container");
let looseDiv = document.getElementById("loose-container");
let playAgainBtns = document.querySelectorAll(".play-again-btn");
let modeContainer = document.getElementById("mode-container");
let hardBtn = document.getElementById("hard-btn");
let easyBtn = document.getElementById("easy-btn");
let tries = 0;
let hardMode = false;
@ -77,7 +81,7 @@ imgDivArray.forEach(targetCard => {
}
} else {
if(hardMode) {
// looseGame(currentUser);
looseGame(currentUser);
} else {
discoveredCards.pop();
@ -93,11 +97,11 @@ imgDivArray.forEach(targetCard => {
});
});
playBtn.addEventListener("click", playGameListener);
playBtn.addEventListener("click", goToModePage);
document.addEventListener("keydown", (event) => {
if(!chooseUserDiv.classList.contains("hide") && event.which === 13){
playGameListener();
goToModePage();
}
});
@ -108,9 +112,18 @@ for (let btn of playAgainBtns){
e.target.parentElement.classList.add("hide");
chooseUserDiv.classList.remove("hide");
document.getElementById("username").value = "";
});
});
}
easyBtn.addEventListener("click", () => {
hardMode = false;
startGame(currentUser);
});
hardBtn.addEventListener("click", () => {
hardMode = true;
startGame(currentUser);
});
/*--------------------------------------------------*/
/*-------------------- OBJECTS ---------------------*/
@ -147,8 +160,14 @@ function scoreBarController(barId) {
setUserTime(username, seconds) {
if (this.hasUser(username)) {
let userContainer = this.getUser(username);
userContainer.lastElementChild.innerHTML = `<i class="fas fa-stopwatch"></i> ${Math.floor(seconds)} seconds`
if(!hardMode) {
userContainer.lastElementChild.innerHTML = `<i class="fas fa-stopwatch"></i> ${Math.floor(seconds)} seconds`
+ ` <i class="fas fa-mouse-pointer"></i> ${tries} tries`;
} else {
userContainer.lastElementChild.innerHTML = `<i class="fas fa-stopwatch"></i> ${Math.floor(seconds)} seconds`
+ `(Hard Mode)`;
}
}
}
@ -166,15 +185,33 @@ function createUserScoreDiv(username) {
/*----------------- USEFULL FUNCTIONS --------------*/
/*--------------------------------------------------*/
function playGameListener() {
function goToModePage() {
let username = document.getElementById("username").value;
if (isValidUsername(username)) {
currentUser = username;
modeContainer.classList.remove("hide");
chooseUserDiv.classList.add("hide");
}
}
function startGame()
function startGame(username) {
startTime = Date.now();
scoresController.createPlayingUser(username);
shuffle(imgDivArray);
imgsGrid.innerHTML = "";
imgDivArray.forEach(img => {
imgsGrid.appendChild(img);
});
modeContainer.classList.add("hide");
imgsGrid.classList.remove("hide");
setTimeout(() => {
flipCards(imgDivArray);
}, 3000);
}
function isGameEnd(discoveredCards, cards) {
return discoveredCards.length === cards.length;
@ -193,8 +230,12 @@ function winGame(username) {
congratsDiv.classList.remove("hide");
}
function looseGame(){
let triesSpan = document.getElementById("tries-span");
let triesInARow = tries -1;
triesSpan.textContent = triesInARow;
imgsGrid.classList.add("hide");
looseDiv.classList.remove("hide");
}
function areEqualCards(card1, card2) {
return card1.getAttribute("data-pair") === card2.getAttribute("data-pair");

5
style.css
View file

@ -164,7 +164,7 @@ input[type="text"]:focus ~ .placeholder {
padding: 1rem 3rem;
font-size: 1rem;
background: hsla(208, 80%, 60%, 1);
color: rgba(255,255,255,.9);
color: rgba(255,255,255,.95);
border-radius: 5px;
border: 1px solid hsla(208, 80%, 45%, 1);
box-shadow: 0 3px 0 hsla(208, 80%, 45%, 1);
@ -172,7 +172,6 @@ input[type="text"]:focus ~ .placeholder {
transition: 150ms ease-out;
cursor: pointer;
font-weight: bold;
}
.game-button:active {
@ -213,7 +212,7 @@ strong {
width: 90%;
position: relative;
z-index: 2;
filter: drop-shadow(6px 9px 6px rgba(12, 64, 110, 0.2));
filter: drop-shadow(0 9px 0 rgba(12, 64, 110, 0.1));
}
.score-title {