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

feat: add loading bar and remake thirdperson

Browse Source
This commit is contained in:
Matthew Florentino 2025-12-03 14:09:43 +07:00
parent 76bf80f502
commit 5699b5994f
5 changed files with 56 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
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%;
@ -179,4 +170,36 @@
100% { 100% {
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;
} }

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>

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

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

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)