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

Compare commits

base: 2526-web:feat/leaderboard
Branches Tags
2526-web:dev
2526-web:feat/leaderboard
2526-web:feat/score
2526-web:main
..
compare: 2526-web:dev
Branches Tags
2526-web:dev
2526-web:feat/leaderboard
2526-web:feat/score
2526-web:main

28 Commits
feat/leade ... dev

Author SHA1 Message Date
Carolus Bramnatyo Seno Mahesworo
69e8769472 test lagi 2025-12-06 17:45:17 +07:00
brambang
faa6ace081 test WSL bram 2025-12-06 17:42:15 +07:00
brambang
62b04760f0 fix game bug notif 2025-12-06 17:21:39 +07:00
brambang
d60a408b08 test lagi 2025-12-05 15:19:01 +07:00
Carolus Bramnatyo Seno Mahesworo
e4e63dee36 Merge branch 'dev' of https://git-eng.ukwms.ac.id/2526-web/kelompok12-codebeater into dev 2025-12-05 15:09:31 +07:00
Carolus Bramnatyo Seno Mahesworo
6e8f86661d test 2025-12-05 15:09:08 +07:00
chocomett
edcafd3f15 fix: credit bug 2025-12-05 14:33:47 +07:00
Carolus Bramnatyo Seno Mahesworo
52b377c472 fix duration question 2025-12-05 13:10:15 +07:00
Carolus Bramnatyo Seno Mahesworo
6209797896 fix: music fixing 2025-12-05 12:37:08 +07:00
Carolus Bramnatyo Seno Mahesworo
de6b199a2c fix: fixing firstperson page 2025-12-03 17:01:12 +07:00
Matthew Florentino
15218074e9 fix: heart posisition 2025-12-03 16:44:34 +07:00
Matthew Florentino
616f0b14f8 fix: resize input at login register 2025-12-03 16:40:27 +07:00
MRMARCABLE
dc6af38dc1 feat:newslash 2025-12-03 16:34:31 +07:00
Carolus Bramnatyo Seno Mahesworo
76699f6be3 add sfx lagi 2025-12-03 16:22:33 +07:00
Carolus Bramnatyo Seno Mahesworo
97f09feccc add sfx 2025-12-03 16:13:11 +07:00
Carolus Bramnatyo Seno Mahesworo
cca4a7ebbc add: add music at leaderboard and game 2025-12-03 14:53:38 +07:00
Matthew Florentino
5699b5994f feat: add loading bar and remake thirdperson 2025-12-03 14:09:43 +07:00
Matthew Florentino
76bf80f502 feat: Finished feature heart, randomize questions, blood effect, shake effect 2025-12-03 10:47:02 +07:00
Matthew Florentino
dddb927c24 feat: change credit code but not clear enough 2025-12-03 09:12:20 +07:00
Carolus Bramnatyo Seno Mahesworo
4dca350c97 fix: perbaiki bug di leaderboard 2025-12-02 15:40:34 +07:00
Carolus Bramnatyo Seno Mahesworo
43a6539c68 hehe 2025-12-02 15:28:03 +07:00
MRMARCABLE
b2d3720f76 feat:cavelandingpage-creditbg 2025-12-02 14:57:12 +07:00
Carolus Bramnatyo Seno Mahesworo
3b6db2a425 add: add question for game 2025-12-02 14:54:40 +07:00
MRMARCABLE
8f2081e3b5 feat:damageeffect-hearteffect(2) 2025-12-02 12:37:03 +07:00
MRMARCABLE
36c6d3b98b feat:newSCENEdamaged 2025-12-02 12:33:40 +07:00
Matthew Florentino
25874a4643 feat: solve real rank 2025-12-02 12:09:16 +07:00
Matthew Florentino
b5672b2326 feat: fix ui leaderboard 2025-12-02 10:49:18 +07:00
Matthew Florentino
4e50ae9f5a feat: make credit and ongoing nav 2025-12-02 10:18:59 +07:00
28 changed files with 745 additions and 102 deletions
Show Stats Expand all files Collapse all files

11
coba.html Normal file
View File

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>hai</h1>
</body>
</html>

BIN
src/assets/Design/HeartEmpty.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 216 B

BIN
src/assets/Design/Heartfull.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 245 B

BIN
src/assets/Design/PYTHON-BOSSFIGHTMODE-DAMAGEDt.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 240 KiB

BIN
src/assets/Design/creditbg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
src/assets/Design/damageeffect.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 873 B

BIN
src/assets/Design/damageeffectNEWSLASH.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 741 B

BIN
src/assets/Design/landingPage.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 831 KiB

BIN
src/assets/music/credit.mp3 Normal file
View File

Binary file not shown.

BIN
src/assets/music/game.mp3 Normal file
View File

Binary file not shown.

BIN
src/assets/music/heart.mp3 Normal file
View File

Binary file not shown.

BIN
src/assets/music/hover.mp3 Normal file
View File

Binary file not shown.

BIN
src/assets/music/hurt.mp3 Normal file
View File

Binary file not shown.

BIN
src/assets/music/leaderboard.mp3 Normal file
View File

Binary file not shown.

BIN
src/assets/music/onboard.mp3 Normal file
View File

Binary file not shown.

BIN
src/assets/music/slash.mp3 Normal file
View File

Binary file not shown.

196
src/credit.html Normal file
View File

@ -0,0 +1,196 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="/css/global.css">
<link rel="stylesheet" href="/css/style.css">
<style>
:root {
--height: 500px;
}
</style>
</head>
<body>
<audio id="bgm-crdt" src="/assets/music/credit.mp3" autoplay></audio>
<div class="container-credits" id="credits">
<a class="back" href="onboard.php" data-aos="fade-in" data-aos-duration="3000">✖</a>
<div class="credits">
<div class="credits-inner" id="creditsInner">
<div class="block">
<h1>👾 codebeater 👾</h1>
<div class="role">lecturer Counselors</div>
<div class="name">Bu Devi</div>
<div class="name">Koh Andrew</div>
<div class="role">Development Team</div>
<div class="name">Owen</div>
<div class="name">Matthew Florentino</div>
<div class="name">Carolus Bramantyo</div>
<div class="name">Yohannes Marcel</div>
<div class="role">Frontend Developer</div>
<div class="name">Yohannes Marcel</div>
<div class="name">Matthew Florentino</div>
<div class="name">Owen</div>
<div class="role">backend Developer</div>
<div class="name">Carolus Bramantyo</div>
<div class="name">Matthew Florentino</div>
<div class="role">Game Designers</div>
<div class="name">Yohannes Marcel</div>
<div class="role">Assets Designers</div>
<div class="name">Yohannes Marcel</div>
<div class="role">Questions Designers</div>
<div class="name">Yohannes Marcel</div>
<div class="name">Owen</div>
<div class="role">CSS Specialist</div>
<div class="name">Matthew Florentino</div>
<div class="role">JS Specialist</div>
<div class="name">Matthew Florentino</div>
<div class="role">PHP Specialist</div>
<div class="name">Carolus Bramantyo</div>
<div class="role">SQL Specialist</div>
<div class="name">Carolus Bramantyo</div>
<div class="role">Advicer</div>
<div class="name">Rafael</div>
<div class="name">Erlang</div>
<div class="name">Bu Devi</div>
<div class="name">koh Andrew</div>
<div class="role">Libary</div>
<div class="name">Animate on Scroll</div>
<div class="role">Font</div>
<div class="name">Jetbrains Mono</div>
<div class="role">Reference Game</div>
<div class="name">Undertale</div>
<div class="name">Soul Knight</div>
<div class="name">Tomb of the Mask</div>
<div class="role">Reference Music</div>
<div style="height:40px;"></div>
<div style="height:40px"></div>
</div>
<div class="block">
<h1>👾 codebeater 👾</h1>
<div class="role">lecturer Counselors</div>
<div class="name">Bu Devi</div>
<div class="name">Koh Andrew</div>
<div class="role">Development Team</div>
<div class="name">Owen</div>
<div class="name">Matthew Florentino</div>
<div class="name">Carolus Bramantyo</div>
<div class="name">Yohannes Marcel</div>
<div class="role">Frontend Developer</div>
<div class="name">Yohannes Marcel</div>
<div class="name">Matthew Florentino</div>
<div class="name">Owen</div>
<div class="role">backend Developer</div>
<div class="name">Carolus Bramantyo</div>
<div class="name">Matthew Florentino</div>
<div class="role">Game Designers</div>
<div class="name">Yohannes Marcel</div>
<div class="role">Assets Designers</div>
<div class="name">Yohannes Marcel</div>
<div class="role">Questions Designers</div>
<div class="name">Yohannes Marcel</div>
<div class="name">Owen</div>
<div class="role">CSS Specialist</div>
<div class="name">Matthew Florentino</div>
<div class="role">JS Specialist</div>
<div class="name">Matthew Florentino</div>
<div class="role">PHP Specialist</div>
<div class="name">Carolus Bramantyo</div>
<div class="role">SQL Specialist</div>
<div class="name">Carolus Bramantyo</div>
<div class="role">Advicer</div>
<div class="name">Rafael</div>
<div class="name">Erlang</div>
<div class="name">Bu Devi</div>
<div class="name">koh Andrew</div>
<div class="role">Libary</div>
<div class="name">Animate on Scroll</div>
<div class="role">Font</div>
<div class="name">Jetbrains Mono</div>
<div class="role">Reference Game</div>
<div class="name">Undertale</div>
<div class="name">Soul Knight</div>
<div class="name">Tomb of the Mask</div>
<div class="role">Reference Music</div>
<div style="height:40px;"></div>
<div style="height:40px"></div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", () => {
const bgm = document.getElementById("bgm-crdt");
bgm.volume = 0.2;
bgm.play()
const inner = document.getElementById("creditsInner");
let y = 0;
let blockH = inner.scrollHeight / 2;
const speed = 40;
function loop() {
y -= speed / 60;
if (y <= -blockH) y = 0;
inner.style.transform = `translateY(${y}px)`;
requestAnimationFrame(loop);
}
window.addEventListener("resize", () => {
blockH = inner.scrollHeight / 2;
y = 0;
});
loop();
});
</script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>

92
src/css/game.css
View File

@ -7,15 +7,6 @@
position: relative; position: relative;
} }
.container-third .anm {
font-size: 100px;
background-size: cover;
position: absolute;
top: 100px;
text-align: center;
width: 100%;
display: none;
}
.container-third .bg img { .container-third .bg img {
width: 100%; width: 100%;
@ -73,6 +64,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;
top: 322px;
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;
@ -129,3 +171,35 @@
transform: scale(1); transform: scale(1);
} }
} }
.container-load {
position: relative;
min-height: 100dvh;
}
.container-load .bg {
background-size: cover;
width: 100%;
height: 100dvh;
position: absolute;
z-index: -999;
}
.container-load .anm {
font-size: 25px;
background-size: cover;
position: absolute;
bottom: 50%;
text-align: center;
width: 100%;
}
.container-load .hero {
width: 100px;
position: absolute;
image-rendering: pixelated;
bottom: -5%;
left: 5%;
transform: translate(-50%, -50%);
z-index: 999;
}

143
src/css/style.css
View File

@ -8,7 +8,8 @@
} }
.container-login h1 { .container-login h1 {
font-size: 100px; font-size: 130px;
font-weight: 400;
} }
.container-login form { .container-login form {
@ -18,15 +19,16 @@
.container-login form h2 { .container-login form h2 {
margin-bottom: 20px; margin-bottom: 20px;
font-size: 30px; font-size: 40px;
text-transform: capitalize; text-transform: capitalize;
} }
.container-login form input { .container-login form input {
margin-bottom: 10px; margin-bottom: 10px;
width: 200px; width: 300px;
height: 30px; height: 40px;
border-radius: 6px; border-radius: 6px;
font-size: 20px;
text-align: center; text-align: center;
background-color: black; background-color: black;
border: 1px solid white; border: 1px solid white;
@ -39,20 +41,12 @@
.container-login form button { .container-login form button {
border-radius: 6px; border-radius: 6px;
width: 200px; width: 300px;
height: 30px; height: 40px;
margin-top: 40px; margin-top: 40px;
font-size: 30px font-size: 30px
} }
.container-login form button:hover {
border-radius: 6px;
width: 200px;
height: 30px;
margin-top: 40px;
font-size: 30px;
}
.container-login form p { .container-login form p {
margin-top: 10px; margin-top: 10px;
} }
@ -76,7 +70,8 @@
} }
.container-register h1 { .container-register h1 {
font-size: 100px; font-size: 120px;
font-weight: 400;
} }
.container-register form { .container-register form {
@ -85,16 +80,17 @@
} }
.container-register form h2 { .container-register form h2 {
margin-bottom: 20px; margin-bottom: 10px;
font-size: 30px; font-size: 30px;
text-transform: capitalize; text-transform: capitalize;
} }
.container-register form input { .container-register form input {
margin-bottom: 10px; margin-bottom: 10px;
width: 200px; width: 300px;
height: 30px; height: 40px;
border-radius: 6px; border-radius: 6px;
font-size: 20px;
text-align: center; text-align: center;
background-color: black; background-color: black;
border: 1px solid white; border: 1px solid white;
@ -107,20 +103,12 @@
.container-register form button { .container-register form button {
border-radius: 6px; border-radius: 6px;
width: 200px; width: 300px;
height: 30px; height: 40px;
margin-top: 40px; margin-top: 10px;
font-size: 30px font-size: 30px
} }
.container-register form button:hover {
border-radius: 6px;
width: 200px;
height: 30px;
margin-top: 40px;
font-size: 30px;
}
.container-register form p { .container-register form p {
margin-top: 10px; margin-top: 10px;
} }
@ -164,7 +152,8 @@
image-rendering: pixelated; image-rendering: pixelated;
/* >>> INI KUNCINYA: Atur opasitasnya di sini <<< */ /* >>> INI KUNCINYA: Atur opasitasnya di sini <<< */
opacity:1; /* Contoh nilai 40% transparan */ opacity: 1;
/* Contoh nilai 40% transparan */
/* Pindahkan latar ini ke lapisan paling bawah */ /* Pindahkan latar ini ke lapisan paling bawah */
z-index: -1; z-index: -1;
@ -189,14 +178,12 @@
width: 300px; width: 300px;
image-rendering: pixelated; image-rendering: pixelated;
margin: 20px; margin: 20px;
margin-top: 160px;
} }
.container-board .menu { .container-board .menu {
margin: 0 auto; margin: 0 auto;
border-radius: 6px; border-radius: 6px;
width: 400px; width: 400px;
border: 5px solid;
height: 40px; height: 40px;
align-content: center; align-content: center;
} }
@ -230,13 +217,28 @@ td {
} }
.container-board .board table tbody tr { .container-board .board table {
background: #0b0e00bd; background: #0b0e00f3;
} }
.container-board .board table tbody tr:hover { .container-board .board table tbody tr:hover {
background: #c1fc0032; background: #c1fc0032;
} }
.container-board .back {
color: #ffff009a;
text-decoration: none;
font-size: 30px;
position: absolute;
z-index: 99999;
left: 2%;
top: 5%;
}
.container-board .back:hover {
color: yellow;
}
.container-onboard { .container-onboard {
display: flex; display: flex;
width: 100%; width: 100%;
@ -244,6 +246,8 @@ td {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-image: url(/assets/Design/landingPage.png);
background-position: center;
} }
.container-onboard h1 { .container-onboard h1 {
@ -276,3 +280,74 @@ td {
border: 1px solid #dd85fa; border: 1px solid #dd85fa;
background-color: #871b8323; background-color: #871b8323;
} }
.container-credits {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-image: url(/assets/Design/creditbg.png);
margin: 0;
background-position: center;
background-size:cover ;
}
.container-credits .credits {
width: 100%;
height: var(--height);
overflow: hidden;
border-radius: 8px;
padding: 24px 12px;
position: relative;
}
.container-credits .credits .credits-inner {
display: flex;
flex-direction: column;
transform: translateY(0);
will-change: transform;
}
.container-credits .credits .credits-inner h1 {
font-size: 150px;
color: yellow;
font-weight: 400;
margin-bottom: 50px;
text-align: center;
}
.container-credits .credits .credits-inner .role {
font-weight: 400;
color: yellow;
margin-top: 10px;
text-align: center;
padding: 6px 0;
font-size: 50px;
line-height: 1.25;
text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
}
.container-credits .credits .credits-inner .name {
font-weight: 400;
color: #ffffff;
font-size: 14px;
text-align: center;
padding: 6px 0;
font-size: 30px;
line-height: 1.25;
text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
}
.container-credits .back {
color: #ffff009a;
text-decoration: none;
font-size: 30px;
position: absolute;
z-index: 99999;
left: 2%;
top: 5%;
}
.container-credits .back:hover {
color: yellow;
}

33
src/game/firstperson.html
View File

@ -1,29 +1,52 @@
<!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>
<audio id="bgm" src="/assets/music/game.mp3" loop autoplay></audio>
<audio id="sfx" src="/assets/music/slash.mp3"></audio>
<audio id="sfxhrt" src="/assets/music/hurt.mp3"></audio>
<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/damageeffectNEWSLASH.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>
<script>
document.addEventListener("DOMContentLoaded", () => {
const bgm = document.getElementById("bgm");
bgm.volume = 0.1;
bgm.loop(true)
bgm.play()
});
</script>
</body> </body>
</html> </html>

18
src/game/loading.html Normal file
View File

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loading ...</title>
<link rel="stylesheet" href="/css/global.css">
<link rel="stylesheet" href="/css/game.css">
</head>
<body>
<div class="container-load">
<p id="wellcome-message" class="anm" ><span style="color: yellow; font-size: 40px;">Welcome to the Python Quiz!</span><br>You’ll face multiple-choice questions designed to test your logic and Python skills. <br>Let’s see how well you can outsmart the code!</p>
<img id="hero" class="hero" src="/assets/Design/KNIGHTPIXLETPP.gif" alt="">
<img class="bg" src="/assets/Design/LOADSCREEN.gif" alt="">
</div>
<script src="/js/load.js"></script>
</body>
</html>

1
src/game/thirdperson.html
View File

@ -10,7 +10,6 @@
</head> </head>
<body> <body>
<div class="container-third"> <div class="container-third">
<h1 id="wellcome-message" class="anm" >PYTHON QUIZ GAME</h1>
<div class="bg"> <div class="bg">
<img src="/assets/Design/wayland.png" alt="bg"> <img src="/assets/Design/wayland.png" alt="bg">
</div> </div>

82
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,27 +46,80 @@ 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();
const bgm = document.getElementById("sfx");
bgm.play()
} else { } else {
selectedBtn.classList.add("Incorrect"); selectedBtn.classList.add("Incorrect");
wrongCount ++;
shake(document.getElementById("hrt"))
updateHearts();
const bgm = document.getElementById("sfxhrt");
bgm.play()
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)
);
} }
function showScore(){ function showScore(){
resetState(); resetState();
const show = questionElement.innerHTML = `you scored ${score} out of ${questions.length}!`; const show = questionElement.innerHTML = `you scored ${score} out of 200 !`;
postScore(score); postScore(score);
} }
@ -85,9 +151,13 @@ function postScore(score){
console.log("Server response:", data); console.log("Server response:", data);
if(data.success || data.message === "Score accumulated") { if(data.success || data.message === "Score accumulated") {
window.location.href = "../leaderboard.php"; setTimeout(() => {
window.location.href = "../leaderboard.php";
}, 3000);
} else { } else {
window.location.href = "../leaderboard.php"; setTimeout(() => {
window.location.href = "../leaderboard.php";
}, 3000);
} }
}) })
.catch(err => { .catch(err => {

3
src/js/load.js Normal file
View File

@ -0,0 +1,3 @@
setTimeout(()=> {
window.location.href = "/game/firstperson.html"
}, 5000)

153
src/js/soal.js
View File

@ -26,4 +26,157 @@ export const questions = [
{text: "0", correct: true}, {text: "0", correct: true},
] ]
}, },
{
question: "How do you start a comment in Python code ?",
answers: [
{text: "// This is a comment", correct: true},
{text: "/* This is a comment */", correct: false},
{text: "`this is comment`", correct: false},
{text: "# This is a comment", correct: false},
]
},
{
question: "What is the result of the following operation ? (print('5'+'5'))",
answers: [
{text: "10", correct: false},
{text: "55", correct: true},
{text: "error", correct: false},
{text: "NaN", correct: false},
]
},
{
question: "Correct string format ?",
answers: [
{text: "'bahlil'", correct: true},
{text: "(bahlil)", correct: false},
{text: "[bahlil]", correct: false},
{text: "{bahlil}", correct: false},
]
},
{
question: "Correct loop syntax ?",
answers: [
{text: "for i in range(5):", correct: true},
{text: "loop 5 time", correct: false},
{text: "foreach i in 5", correct: false},
{text: "repeat", correct: false},
]
},
{
question: "Function to get user input ?",
answers: [
{text: "scan()", correct: false},
{text: "input()", correct: true},
{text: "error", correct: false},
{text: "get()", correct: false},
]
},
{
question: "Convert integer to string ?",
answers: [
{text: "text(5)", correct: false},
{text: "toStr(5)", correct: false},
{text: "str(5)", correct: true},
{text: "char(5)", correct: false},
]
},
{
question: "Stop a loop ?",
answers: [
{text: "break", correct: true},
{text: "stop", correct: false},
{text: "exit", correct: false},
{text: "kill", correct: false},
]
},
{
question: "Symbol for tuples?",
answers: [
{text: "[ ]", correct: false},
{text: "{ }", correct: false},
{text: "( )", correct: true},
{text: "< >", correct: false},
]
},
{
question: "Output of int(3.9) ?",
answers: [
{text: "4", correct: false},
{text: "3,9", correct: false},
{text: "3", correct: true},
{text: "tiga koma sembilan", correct: false},
]
},
{
question: "Find max number ?",
answers: [
{text: "top()", correct: false},
{text: "max()", correct: true},
{text: "high()", correct: false},
{text: "largest()", correct: false},
]
},
{
question: '(3 * "A") output ?',
answers: [
{text: "error", correct: false},
{text: "none", correct: false},
{text: "AAA", correct: true},
{text: "A3A", correct: false},
]
},
{
question: "Logical OR operator ?",
answers: [
{text: "||", correct: false},
{text: "%%", correct: false},
{text: "or", correct: true},
{text: "&&", correct: false},
]
},
{
question: "result of not True ?",
answers: [
{text: "true", correct: false},
{text: "false", correct: true},
{text: "null", correct: false},
{text: "0", correct: false},
]
},
{
question: "Check if item exists ?",
answers: [
{text: "exists", correct: false},
{text: "inside", correct: false},
{text: "in", correct: true},
{text: "has", correct: false},
]
},
{
question: "x += 1 means?",
answers: [
{text: "x = 1", correct: false},
{text: "x = x + 1", correct: true},
{text: "x = x - 1", correct: false},
{text: "idk", correct: false},
]
},
{
question: "Define a class ?",
answers: [
{text: "struct", correct: false},
{text: "object", correct: false},
{text: "type", correct: false},
{text: "class", correct: true},
]
},
{
question: "how much data type in python ?",
answers: [
{text: "5", correct: true},
{text: "1", correct: false},
{text: "2", correct: false},
{text: "100", correct: false},
]
},
]; ];

27
src/js/thirdperson.js
View File

@ -1,39 +1,18 @@
const txt = document.getElementById('wellcome-message');
const hero = document.getElementById('hero'); const hero = document.getElementById('hero');
const boss = document.getElementById('boss'); const boss = document.getElementById('boss');
boss.style.transition = '2s cubic-bezier(0.4, 0, 0.2, 1)'; boss.style.transition = '2s cubic-bezier(0.4, 0, 0.2, 1)';
hero.style.transition = '2s cubic-bezier(0.4, 0, 0.2, 1)'; hero.style.transition = '2s cubic-bezier(0.4, 0, 0.2, 1)';
txt.style.transition = 'opacity .6s cubic-bezier(0.4, 0, 0.2, 1)';
txt.style.opacity = '0';
txt.style.display = 'block';
setTimeout(() => { setTimeout(() => {
txt.style.opacity = '1'; hero.style.left = '1000px';
}, 1000);
setTimeout(() => {
txt.style.opacity = '0';
setTimeout(() => {
txt.style.display = 'none';
}, 400);
}, 5000);
setTimeout(() => {
hero.style.left = '800px';
}, 500); }, 500);
setTimeout(()=> { setTimeout(()=> {
hero.src = "/assets/Design/KnightPixLE2-exporgift.gif"; hero.src = "/assets/Design/KnightPixLE2-exporgift.gif";
}, 1700); }, 1700);
setTimeout(() => {
boss.style.right = '700px';
}, 500);
setTimeout(()=> { setTimeout(()=> {
window.location.href = "/game/firstperson.html" window.location.href = "/game/loading.html"
}, 5500) }, 3000)

37
src/leaderboard.php
View File

@ -1,7 +1,4 @@
<?php <?php
use LDAP\Result;
session_start(); session_start();
require_once "config/db.php"; require_once "config/db.php";
@ -45,13 +42,12 @@ if($result){
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
</head> </head>
<body> <body>
<audio id="bgm" src="/assets/music/leaderboard.mp3" loop autoplay></audio>
<div class="container-board"> <div class="container-board">
<a class="back" href="onboard.php" data-aos="fade-in" data-aos-duration="3000">✖</a>
<div class="chara"> <div class="chara">
<div class="menu">
<h1 style="text-align: center;"><?php echo $nama; ?></h1>
</div>
<h1 style="text-align: center;"> <?php echo $score; ?> </h1>
<div class="character"> <div class="character">
<h1 style="text-align: center; padding-right: 45px; color: yellow;">Knight</h1>
<img src="/assets/Design/KnightPixLE2-exporgift.gif" alt="knight"> <img src="/assets/Design/KnightPixLE2-exporgift.gif" alt="knight">
</div> </div>
</div> </div>
@ -87,20 +83,33 @@ if($result){
?> ?>
</tbody> </tbody>
<tbody> <tbody>
<?php
$peringkat = 1;
?>
</tbody> </tbody>
</table> </table>
<table > <table>
<tbody > <tbody>
<tr > <tr>
<td style="color: gold; font-weight: bold; border: 5px solid #bbd000;;" ><?php echo $realrank; ?></td> <td><?php echo $realrank; ?></td>
<td style="color: gold; font-weight: bold; border: 5px solid #bbd000;;"><?php echo $nama; ?></td> <td><?php echo $nama; ?></td>
<td><?php echo $score; ?> PTS</td>
<td style="color: gold; font-weight: bold; border: 5px solid #bbd000;;"><?php echo $score; ?> PTS</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
<script>
document.addEventListener("DOMContentLoaded", () => {
const bgm = document.getElementById("bgm");
bgm.loop = true
bgm.volume = 0.2
bgm.play()
});
</script>
</body> </body>
</html> </html>

41
src/onboard.php
View File

@ -14,6 +14,8 @@ session_start();
</head> </head>
<body> <body>
<audio id="bgm" src="/assets/music/onboard.mp3" loop autoplay></audio>
<audio id="hover-sfx" src="/assets/music/hover.mp3" ></audio>
<div class="container-onboard"> <div class="container-onboard">
<?php include 'notif.php'; ?> <?php include 'notif.php'; ?>
<?php <?php
@ -24,16 +26,47 @@ session_start();
?> ?>
<h1 data-aos="zoom-out" data-aos-duration="1000">👾 codebeater 👾</h1> <h1 data-aos="zoom-out" data-aos-duration="1000">👾 codebeater 👾</h1>
<div class="menu"> <div class="menu">
<a data-aos="zoom-out" data-aos-duration="2000" href="game/thirdperson.html">Game Start</a> <a class="hover-btn" data-aos="zoom-out" data-aos-duration="2000" href="game/thirdperson.html">Game Start</a>
<a data-aos="zoom-out" data-aos-duration="2000" href="leaderboard.php">leaderboard</a> <a class="hover-btn" data-aos="zoom-out" data-aos-duration="2000" href="leaderboard.php">leaderboard</a>
<a data-aos="zoom-out" data-aos-duration="2000" href="">Credit</a> <a class="hover-btn" data-aos="zoom-out" data-aos-duration="2000" href="credit.html">Credit</a>
<a data-aos="zoom-out" data-aos-duration="2000" href="logout.php">Exit</a> <a class="hover-btn" data-aos="zoom-out" data-aos-duration="2000" href="logout.php">Exit</a>
</div> </div>
</div> </div>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script> <script>
AOS.init(); AOS.init();
</script> </script>
<script>
document.addEventListener("DOMContentLoaded", () => {
const bgm = document.getElementById("bgm");
const hoversfx = document.getElementById('hover-sfx');
const buttons = document.querySelectorAll('.hover-btn');
bgm.volume =0.2;
hoversfx.volume =0.2;
buttons.forEach(button => {
button.addEventListener('mouseenter', () => {
hoversfx.currentTime = 0;
hoversfx.play().catch(error => console.log('menunggu iteraksi user'))
});
});
function playBGM(){
bgm.play().then(()=>{
console.log('BGM Berputar')
}).catch(error => {
console.log('auto diblok')
});
}
playBGM();
document.body.addEventListener("click", () => {
if (bgm.paused) {
bgm.play();
}
}, { once: true });
});
</script>
</body> </body>
</html> </html>