mirror of
https://codeberg.org/JasterV/MEMORY-CARD-GAME.git
synced 2026-04-26 18:20:03 +00:00
🎸🌶 Checkpoint
./script.js:18108132/1315:18108380/1129 ./index.html:18108127/19:18108132/4994:18108380/519 ./style.css:18108132/45
This commit is contained in:
Glitch (hello-webpage)
parent
76f2bea73f
commit
0463edd0f0
3 changed files with 94 additions and 58 deletions
74
index.html
74
index.html
|
|
@ -4,57 +4,81 @@
|
|||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<script src="https://kit.fontawesome.com/56942480bb.js" crossorigin="anonymous"></script>
|
||||
|
||||
<script
|
||||
src="https://kit.fontawesome.com/56942480bb.js"
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
|
||||
<title>Memory Game!</title>
|
||||
|
||||
<!-- import the webpage's stylesheet -->
|
||||
<link rel="stylesheet" href="/style.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="cards-row">
|
||||
<div class="left-card card">
|
||||
<div class="cards-row">
|
||||
<div class="left-card card">
|
||||
<div class="choose-username">
|
||||
<h1>Choose a username</h1>
|
||||
<div class="username-container">
|
||||
<input type="text" id="username" name="username" autocomplete="off" spellcheck="false">
|
||||
<input
|
||||
type="text"
|
||||
id="username"
|
||||
name="username"
|
||||
autocomplete="off"
|
||||
spellcheck="false"
|
||||
/>
|
||||
<p class="placeholder" id="placeholder">Username</p>
|
||||
</div>
|
||||
<button id="play" class="game-button"><i class="fas fa-gamepad"></i></button>
|
||||
</div>
|
||||
<button id="play" class="game-button">
|
||||
<i class="fas fa-gamepad"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="images-grid" class="hide images-grid">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="congrats-container hide">
|
||||
|
||||
<div id="images-grid" class="hide images-grid"></div>
|
||||
|
||||
<div id="congrats-container" class="final-container hide">
|
||||
<h1>
|
||||
You win! 🎉
|
||||
</h1>
|
||||
<h3>
|
||||
You won in <strong id="user-seconds"></strong>
|
||||
</h3>
|
||||
<button id="play-again-btn" class="game-button"><i class="fas fa-undo-alt"></i></button>
|
||||
<h3>You won in <strong id="user-seconds"></strong></h3>
|
||||
<button id="play-again-btn" class="game-button">
|
||||
<i class="fas fa-undo-alt"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="loose-container" class="final-container hide">
|
||||
<h1>
|
||||
You loose! 😵
|
||||
</h1>
|
||||
<h3>You did <strong id="tries-span"></strong> tries in a row </h3>
|
||||
<button id="play-again-btn" class="game-button">
|
||||
<i class="fas fa-undo-alt"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="score-container" class="card score-container">
|
||||
<i class="fas fa-trophy" id="scores-trophy"></i>
|
||||
<h2 class="user-scores score-title">
|
||||
Leaderboard
|
||||
</h2>
|
||||
<div class="ribbon-wrapper">
|
||||
<img class="ribbon-tail" src="https://cdn.glitch.com/56d96ce9-5171-477f-8560-558ec3af0051%2Fribbon-tail.svg?v=1596043434209" alt="">
|
||||
<img class="ribbon-score" src="https://cdn.glitch.com/56d96ce9-5171-477f-8560-558ec3af0051%2Fribbon-score.svg?v=1596046610666" alt="">
|
||||
<img
|
||||
class="ribbon-tail"
|
||||
src="https://cdn.glitch.com/56d96ce9-5171-477f-8560-558ec3af0051%2Fribbon-tail.svg?v=1596043434209"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
class="ribbon-score"
|
||||
src="https://cdn.glitch.com/56d96ce9-5171-477f-8560-558ec3af0051%2Fribbon-score.svg?v=1596046610666"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="user-scores" class="user-scores">
|
||||
|
||||
</div>
|
||||
<div id="user-scores" class="user-scores"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="/script.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
72
script.js
72
script.js
|
|
@ -48,6 +48,7 @@ let congratsDiv = document.querySelector(".congrats-container");
|
|||
let playAgainBtn = document.getElementById("play-again-btn");
|
||||
|
||||
let tries = 0;
|
||||
let hardMode = false;
|
||||
|
||||
let imgDivArray = createGridContentArray(imgSrc);
|
||||
let discoveredCards = [];
|
||||
|
|
@ -71,48 +72,35 @@ imgDivArray.forEach(targetCard => {
|
|||
|
||||
if (isGameEnd(discoveredCards, imgDivArray)) {
|
||||
setTimeout(() => {
|
||||
finishGame(currentUser);
|
||||
winGame(currentUser);
|
||||
}, 300);
|
||||
}
|
||||
} else {
|
||||
discoveredCards.pop();
|
||||
if(hardMode) {
|
||||
// looseGame(currentUser);
|
||||
} else {
|
||||
discoveredCards.pop();
|
||||
|
||||
setTimeout(() => {
|
||||
lastCard.classList.add("flipped-cell");
|
||||
targetCard.classList.add("flipped-cell");
|
||||
}, 500);
|
||||
setTimeout(() => {
|
||||
lastCard.classList.add("flipped-cell");
|
||||
targetCard.classList.add("flipped-cell");
|
||||
}, 500);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
playBtn.addEventListener("click", () => {
|
||||
let username = document.getElementById("username").value;
|
||||
if (isValidUsername(username)) {
|
||||
currentUser = username;
|
||||
startTime = Date.now();
|
||||
playBtn.addEventListener("click", playGameListener);
|
||||
|
||||
scoresController.createPlayingUser(username);
|
||||
|
||||
shuffle(imgDivArray);
|
||||
|
||||
imgsGrid.innerHTML = "";
|
||||
imgDivArray.forEach(img => {
|
||||
imgsGrid.appendChild(img);
|
||||
});
|
||||
|
||||
chooseUserDiv.classList.add("hide");
|
||||
imgsGrid.classList.remove("hide");
|
||||
|
||||
setTimeout(() => {
|
||||
flipCards(imgDivArray);
|
||||
}, 3000);
|
||||
document.addEventListener("keydown", (event) => {
|
||||
if(!chooseUserDiv.classList.contains("hide") && event.which === 13){
|
||||
playGameListener();
|
||||
}
|
||||
});
|
||||
window.addEventListener("keydown", (event) => {
|
||||
if(!chooseUserDiv.classList.contains("hide")&& event.target.key ===) &&
|
||||
})
|
||||
|
||||
playAgainBtn.addEventListener("click", () => {
|
||||
currentUser = "";
|
||||
discoveredCards = [];
|
||||
|
|
@ -175,11 +163,35 @@ function createUserScoreDiv(username) {
|
|||
/*----------------- USEFULL FUNCTIONS --------------*/
|
||||
/*--------------------------------------------------*/
|
||||
|
||||
function playGameListener() {
|
||||
let username = document.getElementById("username").value;
|
||||
if (isValidUsername(username)) {
|
||||
currentUser = username;
|
||||
startTime = Date.now();
|
||||
|
||||
scoresController.createPlayingUser(username);
|
||||
|
||||
shuffle(imgDivArray);
|
||||
|
||||
imgsGrid.innerHTML = "";
|
||||
imgDivArray.forEach(img => {
|
||||
imgsGrid.appendChild(img);
|
||||
});
|
||||
|
||||
chooseUserDiv.classList.add("hide");
|
||||
imgsGrid.classList.remove("hide");
|
||||
|
||||
setTimeout(() => {
|
||||
flipCards(imgDivArray);
|
||||
}, 3000);
|
||||
}
|
||||
}
|
||||
|
||||
function isGameEnd(discoveredCards, cards) {
|
||||
return discoveredCards.length === cards.length;
|
||||
}
|
||||
|
||||
function finishGame(username) {
|
||||
function winGame(username) {
|
||||
let finalTimeSpan = document.getElementById("user-seconds");
|
||||
let totalSeconds = (Date.now() - startTime) / 1000;
|
||||
finalTimeSpan.textContent = `${Math.floor(totalSeconds)} seconds`;
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ h2 {
|
|||
align-content: center;
|
||||
}
|
||||
|
||||
.congrats-container {
|
||||
.final-container {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
|
|
@ -64,7 +64,7 @@ h2 {
|
|||
justify-content: center;
|
||||
}
|
||||
|
||||
.congrats-container h3 {
|
||||
.final-container h3 {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
|
|
@ -106,7 +106,7 @@ h2 {
|
|||
justify-content: center;
|
||||
}
|
||||
|
||||
.choose-username h1, .congrats-container h1 {
|
||||
.choose-username h1, .final-container h1 {
|
||||
margin: 0;
|
||||
padding-bottom: 1rem;
|
||||
color: hsla(208, 80%, 50%, 0.8);
|
||||
|
|
|
|||
Loading…
Reference in a new issue