diff --git a/src/assets/Design/Hear0l.png b/src/assets/Design/HeartEmpty.png similarity index 100% rename from src/assets/Design/Hear0l.png rename to src/assets/Design/HeartEmpty.png diff --git a/src/css/game.css b/src/css/game.css index 82c345a..509018d 100644 --- a/src/css/game.css +++ b/src/css/game.css @@ -73,6 +73,57 @@ background-size: cover; } +.container-first .content .boss .dmg { + width: 600px; + position: absolute; + bottom: 100px; + left: 50%; + transform: translateX(-50%); + image-rendering: pixelated; + background-repeat: no-repeat; + background-size: cover; + display: none; +} + +@keyframes shake { + 0% { + transform: translateX(-50%); + } + + 25% { + transform: translateX(calc(-50% - 5px)); + } + + 50% { + transform: translateX(calc(-50% + 5px)); + } + + 75% { + transform: translateX(calc(-50% - 5px)); + } + + 100% { + transform: translateX(-50%); + } +} + +.animate-shake { + animation: shake 0.3s ease-in-out; +} + +.container-first .hearts { + position: absolute; + bottom: 42%; + left: 50%; + transform: translateX(-50%); + image-rendering: pixelated; + z-index: 999; +} + +.container-first .hearts img { + width: 50px; +} + .container-first .content .quiz { width: 1000px; height: 200px; diff --git a/src/game/firstperson.html b/src/game/firstperson.html index 89ad2ae..19f750e 100644 --- a/src/game/firstperson.html +++ b/src/game/firstperson.html @@ -1,29 +1,40 @@ + firstperson + + +
-
+
+ +
+
+ + +
-

Question Goes Here ......... !!

+

- - - - + + + +
+ \ No newline at end of file diff --git a/src/js/firstperson.js b/src/js/firstperson.js index 551dd26..f40c0ae 100644 --- a/src/js/firstperson.js +++ b/src/js/firstperson.js @@ -6,12 +6,25 @@ const answerBtn = document.getElementById("btn-answer") let currentQuestionIndex = 0; let score = 0; +let wrongCount = 0; +let maxWrong = 3; + +function shuffle(array) { + for (let i = array.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [array[i], array[j]] = [array[j], array[i]]; + } + return array; +} + function startQuiz(){ currentQuestionIndex = 0; score = 0; + shuffle(questions); showQuestion(); } + function showQuestion(){ resetState(); let currentQuestion = questions[currentQuestionIndex] @@ -33,21 +46,71 @@ function resetState(){ } } +function updateHearts(){ + const hearts = [ + document.getElementById("h1"), + document.getElementById("h2"), + document.getElementById("h3") + ]; + + hearts.forEach((h, i) => { + if(i < wrongCount){ + h.src = "/assets/Design/HeartEmpty.png"; + } else { + h.src = "/assets/Design/Heartfull.png"; + } + }); + +} + +function dmg(){ + const dmg = document.getElementById("dmg"); + + dmg.style.display = "block"; + + setTimeout(() => { + dmg.style.display = "none"; + }, 450); +} + +function shake(el){ + el.classList.remove("animate-shake"); + void el.offsetWidth; + el.classList.add("animate-shake"); + + el.addEventListener("animationend", () => { + el.classList.remove("animate-shake"); + }, { once: true }); +} + + function selectAnswer(e){ const selectedBtn = e.target; const isCorrect = selectedBtn.dataset.correct === "true"; if(isCorrect){ selectedBtn.classList.add("correct"); score += 10; + shake(document.getElementById("boss")) + dmg(); } else { selectedBtn.classList.add("Incorrect"); + wrongCount ++; + shake(document.getElementById("hrt")) + updateHearts(); + + if(wrongCount >= maxWrong){ + setTimeout(()=>{ + showScore(); + }, 500); + return; + } } Array.from(answerBtn.children).forEach(button => { if(button.dataset.correct === "true") button.classList.add("correct"); button.disabled = true; }, - setTimeout(nextQuestion, 1000) + setTimeout(nextQuestion, 500) ); } @@ -87,7 +150,7 @@ function postScore(score){ if(data.success || data.message === "Score accumulated") { window.location.href = "../leaderboard.php"; } else { - window.location.href = "../leaderboard.php"; + window.location.href = "../leaderboard.php"; } }) .catch(err => {