mirror of
https://codeberg.org/JasterV/MEMORY-CARD-GAME.git
synced 2026-04-26 18:20:03 +00:00
🏃👙 Checkpoint
./script.js:18108132/4948:18108380/585 ./style.css:18108127/14 ./index.html:18108127/28
This commit is contained in:
Glitch (hello-webpage)
parent
e2272d36ac
commit
2b3025c5e6
3 changed files with 53 additions and 13 deletions
|
|
@ -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
57
script.js
|
|
@ -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");
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in a new issue