Compare commits
No commits in common. "dev" and "feat/score" have entirely different histories.
dev
...
feat/score
Binary file not shown.
|
Before Width: | Height: | Size: 216 B |
Binary file not shown.
|
Before Width: | Height: | Size: 245 B |
Binary file not shown.
|
Before Width: | Height: | Size: 240 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 873 B |
Binary file not shown.
|
Before Width: | Height: | Size: 741 B |
Binary file not shown.
|
Before Width: | Height: | Size: 831 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
196
src/credit.html
196
src/credit.html
@ -1,196 +0,0 @@
|
||||
<!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>
|
||||
@ -7,6 +7,15 @@
|
||||
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 {
|
||||
width: 100%;
|
||||
@ -38,11 +47,10 @@
|
||||
}
|
||||
|
||||
.container-first {
|
||||
background-image: url(/assets/Design/newBGBOSSFIGHT.gif);
|
||||
/* background-image: url(/src/assets/Design/CAVEBOSSFIGHT.png); */
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
image-rendering: pixelated;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.container-first .content .boss {
|
||||
@ -64,57 +72,6 @@
|
||||
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 {
|
||||
width: 1000px;
|
||||
height: 200px;
|
||||
@ -171,35 +128,3 @@
|
||||
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;
|
||||
}
|
||||
@ -8,8 +8,7 @@
|
||||
}
|
||||
|
||||
.container-login h1 {
|
||||
font-size: 130px;
|
||||
font-weight: 400;
|
||||
font-size: 100px;
|
||||
}
|
||||
|
||||
.container-login form {
|
||||
@ -19,16 +18,15 @@
|
||||
|
||||
.container-login form h2 {
|
||||
margin-bottom: 20px;
|
||||
font-size: 40px;
|
||||
font-size: 30px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.container-login form input {
|
||||
margin-bottom: 10px;
|
||||
width: 300px;
|
||||
height: 40px;
|
||||
width: 200px;
|
||||
height: 30px;
|
||||
border-radius: 6px;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
background-color: black;
|
||||
border: 1px solid white;
|
||||
@ -41,12 +39,20 @@
|
||||
|
||||
.container-login form button {
|
||||
border-radius: 6px;
|
||||
width: 300px;
|
||||
height: 40px;
|
||||
width: 200px;
|
||||
height: 30px;
|
||||
margin-top: 40px;
|
||||
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 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
@ -70,8 +76,7 @@
|
||||
}
|
||||
|
||||
.container-register h1 {
|
||||
font-size: 120px;
|
||||
font-weight: 400;
|
||||
font-size: 100px;
|
||||
}
|
||||
|
||||
.container-register form {
|
||||
@ -80,17 +85,16 @@
|
||||
}
|
||||
|
||||
.container-register form h2 {
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 30px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.container-register form input {
|
||||
margin-bottom: 10px;
|
||||
width: 300px;
|
||||
height: 40px;
|
||||
width: 200px;
|
||||
height: 30px;
|
||||
border-radius: 6px;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
background-color: black;
|
||||
border: 1px solid white;
|
||||
@ -103,12 +107,20 @@
|
||||
|
||||
.container-register form button {
|
||||
border-radius: 6px;
|
||||
width: 300px;
|
||||
height: 40px;
|
||||
margin-top: 10px;
|
||||
width: 200px;
|
||||
height: 30px;
|
||||
margin-top: 40px;
|
||||
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 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
@ -127,36 +139,6 @@
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
height: 100dvh;
|
||||
/* Hapus properti background dari sini dan pindahkan ke ::before */
|
||||
|
||||
/* Tambahkan posisi relatif agar pseudo-element bisa diposisikan absolut di dalamnya */
|
||||
position: relative;
|
||||
/* Pastikan konten di dalam container ada di atas latar */
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Pseudo-element untuk menampung gambar latar transparan */
|
||||
.container-board::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
/* Pindahkan properti background Anda ke sini */
|
||||
background-image: url(/assets/Design/CampFire8WESFIX!-export.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
image-rendering: pixelated;
|
||||
|
||||
/* >>> INI KUNCINYA: Atur opasitasnya di sini <<< */
|
||||
opacity: 1;
|
||||
/* Contoh nilai 40% transparan */
|
||||
|
||||
/* Pindahkan latar ini ke lapisan paling bawah */
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.container-board .chara {
|
||||
@ -182,8 +164,9 @@
|
||||
|
||||
.container-board .menu {
|
||||
margin: 0 auto;
|
||||
border-radius: 6px;
|
||||
border-radius: 10px;
|
||||
width: 400px;
|
||||
border: 1px solid;
|
||||
height: 40px;
|
||||
align-content: center;
|
||||
}
|
||||
@ -195,15 +178,13 @@
|
||||
/*menghilangkan gap antar border*/
|
||||
font-family: "Segoe UI", Tahoma, sans-serif;
|
||||
color: white;
|
||||
font-weight: 200;
|
||||
font-size: 20px;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.container-board .board table th,
|
||||
td {
|
||||
border: 5px solid #ffffff;
|
||||
border: 5px solid #ffffffb8;
|
||||
padding: 14px 18px;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
@ -217,28 +198,10 @@ td {
|
||||
}
|
||||
|
||||
|
||||
.container-board .board table {
|
||||
background: #0b0e00f3;
|
||||
}
|
||||
|
||||
.container-board .board table tbody tr:hover {
|
||||
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 {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
@ -246,8 +209,9 @@ td {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-image: url(/assets/Design/landingPage.png);
|
||||
background-position: center;
|
||||
/* background-image: url(/src/assets/Design/wayland.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover; */
|
||||
}
|
||||
|
||||
.container-onboard h1 {
|
||||
@ -280,74 +244,3 @@ td {
|
||||
border: 1px solid #dd85fa;
|
||||
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;
|
||||
}
|
||||
@ -1,52 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>firstperson</title>
|
||||
<link rel="stylesheet" href="/css/global.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>
|
||||
|
||||
<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="content">
|
||||
<div class="boss">
|
||||
<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 class="quiz">
|
||||
<h2 id="question"></h2>
|
||||
<h2 id="question">Question Goes Here ......... !!</h2>
|
||||
<div id="btn-answer">
|
||||
<button class="btn"></button>
|
||||
<button class="btn"></button>
|
||||
<button class="btn"></button>
|
||||
<button class="btn"></button>
|
||||
<button class="btn">text</button>
|
||||
<button class="btn">text</button>
|
||||
<button class="btn">text</button>
|
||||
<button class="btn">text</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<script src="/js/firstperson.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,18 +0,0 @@
|
||||
<!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>
|
||||
@ -10,6 +10,7 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="container-third">
|
||||
<h1 id="wellcome-message" class="anm" >PYTHON QUIZ GAME</h1>
|
||||
<div class="bg">
|
||||
<img src="/assets/Design/wayland.png" alt="bg">
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,32 @@
|
||||
import { questions } from "./soal.js";
|
||||
const questions = [
|
||||
{
|
||||
question: "what is Python ?",
|
||||
answers: [
|
||||
{text: "Programming Lang", correct: true},
|
||||
{text: "Animal", correct: false},
|
||||
{text: "Danger", correct: false},
|
||||
{text: "All Answer Correct", correct: false},
|
||||
]
|
||||
},
|
||||
{
|
||||
question: "Data type at python ?",
|
||||
answers: [
|
||||
{text: "Docx", correct: false},
|
||||
{text: "CSV", correct: false},
|
||||
{text: "String", correct: true},
|
||||
{text: "SQL", correct: false},
|
||||
]
|
||||
},
|
||||
{
|
||||
question: "Index at python start from ?",
|
||||
answers: [
|
||||
{text: "1", correct: false},
|
||||
{text: "-1", correct: false},
|
||||
{text: "10", correct: false},
|
||||
{text: "0", correct: true},
|
||||
]
|
||||
},
|
||||
];
|
||||
|
||||
const questionElement = document.getElementById("question")
|
||||
const answerBtn = document.getElementById("btn-answer")
|
||||
@ -6,25 +34,12 @@ 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]
|
||||
@ -46,75 +61,22 @@ 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();
|
||||
const bgm = document.getElementById("sfx");
|
||||
bgm.play()
|
||||
} else {
|
||||
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 => {
|
||||
if(button.dataset.correct === "true") button.classList.add("correct");
|
||||
button.disabled = true;
|
||||
});
|
||||
setTimeout(nextQuestion, 500)
|
||||
},
|
||||
setTimeout(nextQuestion, 1000)
|
||||
);
|
||||
}
|
||||
|
||||
function showScore(){
|
||||
@ -151,13 +113,9 @@ function postScore(score){
|
||||
console.log("Server response:", data);
|
||||
|
||||
if(data.success || data.message === "Score accumulated") {
|
||||
setTimeout(() => {
|
||||
window.location.href = "../leaderboard.php";
|
||||
}, 3000);
|
||||
window.location.href = "../leaderboard.php";
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
window.location.href = "../leaderboard.php";
|
||||
}, 3000);
|
||||
window.location.href = "../leaderboard.php";
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
setTimeout(()=> {
|
||||
window.location.href = "/game/firstperson.html"
|
||||
}, 5000)
|
||||
183
src/js/soal.js
183
src/js/soal.js
@ -1,182 +1 @@
|
||||
export const questions = [
|
||||
{
|
||||
question: "what is Python ?",
|
||||
answers: [
|
||||
{text: "Programming Lang", correct: true},
|
||||
{text: "Animal", correct: false},
|
||||
{text: "Danger", correct: false},
|
||||
{text: "All Answer Correct", correct: false},
|
||||
]
|
||||
},
|
||||
{
|
||||
question: "Data type at python ?",
|
||||
answers: [
|
||||
{text: "Docx", correct: false},
|
||||
{text: "CSV", correct: false},
|
||||
{text: "String", correct: true},
|
||||
{text: "SQL", correct: false},
|
||||
]
|
||||
},
|
||||
{
|
||||
question: "Index at python start from ?",
|
||||
answers: [
|
||||
{text: "1", correct: false},
|
||||
{text: "-1", correct: false},
|
||||
{text: "10", correct: false},
|
||||
{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},
|
||||
]
|
||||
},
|
||||
];
|
||||
dadad
|
||||
@ -1,18 +1,39 @@
|
||||
const txt = document.getElementById('wellcome-message');
|
||||
const hero = document.getElementById('hero');
|
||||
const boss = document.getElementById('boss');
|
||||
|
||||
boss.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(() => {
|
||||
hero.style.left = '1000px';
|
||||
txt.style.opacity = '1';
|
||||
}, 1000);
|
||||
|
||||
|
||||
setTimeout(() => {
|
||||
txt.style.opacity = '0';
|
||||
|
||||
setTimeout(() => {
|
||||
txt.style.display = 'none';
|
||||
}, 400);
|
||||
}, 5000);
|
||||
|
||||
setTimeout(() => {
|
||||
hero.style.left = '800px';
|
||||
}, 500);
|
||||
setTimeout(()=> {
|
||||
hero.src = "/assets/Design/KnightPixLE2-exporgift.gif";
|
||||
}, 1700);
|
||||
setTimeout(() => {
|
||||
boss.style.right = '700px';
|
||||
}, 500);
|
||||
|
||||
setTimeout(()=> {
|
||||
window.location.href = "/game/loading.html"
|
||||
}, 3000)
|
||||
window.location.href = "/game/firstperson.html"
|
||||
}, 5500)
|
||||
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@ require_once "config/db.php";
|
||||
$sql= "SELECT username, score
|
||||
FROM users
|
||||
ORDER BY score DESC
|
||||
LIMIT 8";
|
||||
LIMIT 10";
|
||||
$nama = $_SESSION['username'];
|
||||
$score = 0;
|
||||
|
||||
@ -17,10 +17,6 @@ if ($result_me && mysqli_num_rows($result_me)>0){
|
||||
$score = $row['score'];
|
||||
}
|
||||
|
||||
$queryrank = "SELECT COUNT(*) as ranking FROM users WHERE score > $score";
|
||||
$resultrank = mysqli_query($db, $queryrank);
|
||||
$rowrank = mysqli_fetch_assoc($resultrank);
|
||||
$realrank = $rowrank['ranking']+1;
|
||||
|
||||
$result = mysqli_query($db, $sql);
|
||||
$leaderboard = [];
|
||||
@ -42,12 +38,13 @@ if($result){
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<audio id="bgm" src="/assets/music/leaderboard.mp3" loop autoplay></audio>
|
||||
<div class="container-board">
|
||||
<a class="back" href="onboard.php" data-aos="fade-in" data-aos-duration="3000">✖</a>
|
||||
<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">
|
||||
<h1 style="text-align: center; padding-right: 45px; color: yellow;">Knight</h1>
|
||||
<img src="/assets/Design/KnightPixLE2-exporgift.gif" alt="knight">
|
||||
</div>
|
||||
</div>
|
||||
@ -82,34 +79,9 @@ if($result){
|
||||
}
|
||||
?>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<?php
|
||||
$peringkat = 1;
|
||||
|
||||
?>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><?php echo $realrank; ?></td>
|
||||
<td><?php echo $nama; ?></td>
|
||||
<td><?php echo $score; ?> PTS</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const bgm = document.getElementById("bgm");
|
||||
bgm.loop = true
|
||||
bgm.volume = 0.2
|
||||
bgm.play()
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -14,8 +14,6 @@ session_start();
|
||||
</head>
|
||||
|
||||
<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">
|
||||
<?php include 'notif.php'; ?>
|
||||
<?php
|
||||
@ -26,47 +24,16 @@ session_start();
|
||||
?>
|
||||
<h1 data-aos="zoom-out" data-aos-duration="1000">👾 codebeater 👾</h1>
|
||||
<div class="menu">
|
||||
<a class="hover-btn" 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="leaderboard.php">leaderboard</a>
|
||||
<a class="hover-btn" data-aos="zoom-out" data-aos-duration="2000" href="credit.html">Credit</a>
|
||||
<a class="hover-btn" data-aos="zoom-out" data-aos-duration="2000" href="logout.php">Exit</a>
|
||||
<a 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 data-aos="zoom-out" data-aos-duration="2000" href="">Credit</a>
|
||||
<a data-aos="zoom-out" data-aos-duration="2000" href="logout.php">Exit</a>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
|
||||
<script>
|
||||
AOS.init();
|
||||
</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>
|
||||
|
||||
</html>
|
||||
15
users.sql
15
users.sql
@ -3,7 +3,7 @@
|
||||
-- https://www.phpmyadmin.net/
|
||||
--
|
||||
-- Host: db:3306
|
||||
-- Generation Time: Dec 01, 2025 at 08:08 AM
|
||||
-- Generation Time: Nov 25, 2025 at 09:57 AM
|
||||
-- Server version: 8.0.44
|
||||
-- PHP Version: 8.3.26
|
||||
|
||||
@ -41,16 +41,7 @@ CREATE TABLE `users` (
|
||||
|
||||
INSERT INTO `users` (`id`, `username`, `email`, `password`, `score`) VALUES
|
||||
(1, 'bram', 'bahlil@gmail.com', '$2y$10$tOKCS5lO0/lRUW9c.VmsAeMu1M5LxO9F2lq/44yLk3Dl7FvmFUWEu', 100),
|
||||
(4, 'bahlil', 'bahlil1@gmail.com', '$2y$10$qmU02E22qB6MD5RR8Bopi.nBI38jk2mOht2SHnXb64m30fpyg8cf6', 0),
|
||||
(8, 'fork', 'bolo@gmail.com', '$2y$10$XZ/uNqSGiZhfCjDEaZUzner0L2tKRBrEVX5cNG0nK4f/IFuf42jCK', 0),
|
||||
(13, 'adsasd', 'da@gmail.com', '$2y$10$lOWJD1OLc9/pREEvH72b4u7YDZpekwX9W/Wt7mlhSnJuhKNC2dm1i', 0),
|
||||
(20, 'bobi', 'skibidi@gmail.com', '$2y$10$v2SToxPT3kzfD1BPMJuQGe2kOKqaX7ZcHyuvyUaAWm/GySx2RaAqW', 0),
|
||||
(21, 'sada', 'sad@gmail.com', '$2y$10$JO0oMbKmJHbUhRNCcyYxnOwK0OFLv69FCItzwCK0h0p6KeAzvekGW', 0),
|
||||
(24, 'orgil', 'fasfa@gmail.com', '$2y$10$rxkVaEwirysMIiaDgrixQeCbuGpkMdbvA2Kvw.l2t0hk7PO4KzZ4i', 0),
|
||||
(28, 'bencong', 'bahliltod@gmai.com', '$2y$10$yM13E5kcWDU.FPUpuWkWbuGqpq9tMfS2vKE1Wu8xMPbHleNSCI5pW', 0),
|
||||
(29, 'adudu', 'adudu@gmail.com', '$2y$10$MW5hI5zKBNDHpEgGOipozOVPaH985N0.J1qxHen15eK1KVI6HfKa.', 0),
|
||||
(30, 'kkhungke', 'cuki@gmail.com', '$2y$10$6u2vzf6icHzmZeIqDfBHqOEwjGEcpuo0c7QGmZeuzICq71Af0vY6y', 0),
|
||||
(33, 'koko', 'kkhungke@gmail.com', '$2y$10$ys7rs4PAtl0z74RfgNuu9O50t.ibMgljWEC8x.9Anm3DBw5aB7q8C', 0);
|
||||
(4, 'bahlil', 'bahlil1@gmail.com', '$2y$10$qmU02E22qB6MD5RR8Bopi.nBI38jk2mOht2SHnXb64m30fpyg8cf6', 0);
|
||||
|
||||
--
|
||||
-- Indexes for dumped tables
|
||||
@ -72,7 +63,7 @@ ALTER TABLE `users`
|
||||
-- AUTO_INCREMENT for table `users`
|
||||
--
|
||||
ALTER TABLE `users`
|
||||
MODIFY `id` int NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=34;
|
||||
MODIFY `id` int NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;
|
||||
COMMIT;
|
||||
|
||||
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user