2526-web/kelompok12-codebeater
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Finished feature heart, randomize questions, blood effect, shake effect

Browse Source
This commit is contained in:
Matthew Florentino 2025-12-03 10:47:02 +07:00
parent dddb927c24
commit 76bf80f502
4 changed files with 133 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
src/assets/Design/Hear0l.png → src/assets/Design/HeartEmpty.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 216 B

After

Width:  |  Height:  |  Size: 216 B

51
src/css/game.css
View File

@ -73,6 +73,57 @@
background-size: cover; 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 { .container-first .content .quiz {
width: 1000px; width: 1000px;
height: 200px; height: 200px;

23
src/game/firstperson.html
View File

@ -1,29 +1,40 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>firstperson</title> <title>firstperson</title>
<link rel="stylesheet" href="/css/global.css"> <link rel="stylesheet" href="/css/global.css">
<link rel="stylesheet" href="/css/game.css"> <link rel="stylesheet" href="/css/game.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
</head> </head>
<body> <body>
<div class="container-first"> <div class="container-first">
<div class="content"> <div class="content"">
<div class="boss"> <div class="boss">
<img id="boss" src="/assets/Design/PYTHON-BOSSFIGHTMODEFINALt.gif" alt=""> <img id="boss" src="/assets/Design/PYTHON-BOSSFIGHTMODEFINALt.gif" alt="">
<img id="dmg" class="dmg" src="/assets/Design/damageeffect.gif"/>
</div>
<div class="hearts" id="hrt">
<img id="h1" src="/assets/Design/Heartfull.png">
<img id="h2" src="/assets/Design/Heartfull.png">
<img id="h3" src="/assets/Design/Heartfull.png">
</div> </div>
<div class="quiz"> <div class="quiz">
<h2 id="question">Question Goes Here ......... !!</h2> <h2 id="question"></h2>
<div id="btn-answer"> <div id="btn-answer">
<button class="btn">text</button> <button class="btn"></button>
<button class="btn">text</button> <button class="btn"></button>
<button class="btn">text</button> <button class="btn"></button>
<button class="btn">text</button> <button class="btn"></button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<script type="module" src="/js/firstperson.js"></script> <script type="module" src="/js/firstperson.js"></script>
</body> </body>
</html> </html>

67
src/js/firstperson.js
View File

@ -6,12 +6,25 @@ const answerBtn = document.getElementById("btn-answer")
let currentQuestionIndex = 0; let currentQuestionIndex = 0;
let score = 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(){ function startQuiz(){
currentQuestionIndex = 0; currentQuestionIndex = 0;
score = 0; score = 0;
shuffle(questions);
showQuestion(); showQuestion();
} }
function showQuestion(){ function showQuestion(){
resetState(); resetState();
let currentQuestion = questions[currentQuestionIndex] 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){ function selectAnswer(e){
const selectedBtn = e.target; const selectedBtn = e.target;
const isCorrect = selectedBtn.dataset.correct === "true"; const isCorrect = selectedBtn.dataset.correct === "true";
if(isCorrect){ if(isCorrect){
selectedBtn.classList.add("correct"); selectedBtn.classList.add("correct");
score += 10; score += 10;
shake(document.getElementById("boss"))
dmg();
} else { } else {
selectedBtn.classList.add("Incorrect"); selectedBtn.classList.add("Incorrect");
wrongCount ++;
shake(document.getElementById("hrt"))
updateHearts();
if(wrongCount >= maxWrong){
setTimeout(()=>{
showScore();
}, 500);
return;
}
} }
Array.from(answerBtn.children).forEach(button => { Array.from(answerBtn.children).forEach(button => {
if(button.dataset.correct === "true") button.classList.add("correct"); if(button.dataset.correct === "true") button.classList.add("correct");
button.disabled = true; button.disabled = true;
}, },
setTimeout(nextQuestion, 1000) setTimeout(nextQuestion, 500)
); );
} }
@ -87,7 +150,7 @@ function postScore(score){
if(data.success || data.message === "Score accumulated") { if(data.success || data.message === "Score accumulated") {
window.location.href = "../leaderboard.php"; window.location.href = "../leaderboard.php";
} else { } else {
window.location.href = "../leaderboard.php"; window.location.href = "../leaderboard.php";
} }
}) })
.catch(err => { .catch(err => {