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

feat: thirdperson animation

Browse Source
This commit is contained in:
Matthew Florentino 2025-11-25 10:51:33 +07:00
parent f9fc7ba011
commit 0ec677058e
5 changed files with 122 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
src/assets/Design/castel waylongroad.png → src/assets/Design/wayland.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

47
src/css/game.css
View File

@ -0,0 +1,47 @@
.container-third .bg{
width: 100%;
height: 100dvh;
}
.container-third .bg{
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%;
position: absolute;
bottom: 0;
image-rendering: pixelated;
background-repeat: no-repeat;
background-size: cover;
}
.container-third .hero img{
width: 150px;
position: absolute;
bottom: 100px;
left: 50px;
image-rendering: pixelated;
background-repeat: no-repeat;
background-size: cover;
}
.container-third .boss img{
width: 300px;
position: absolute;
bottom: 100px;
right: 50px;
image-rendering: pixelated;
background-repeat: no-repeat;
background-size: cover;
}

11
src/game/firstperson.html
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>firstperson</title>
</head>
<body>
<h1></h1>
</body>
</html>

28
src/game/thirdperson.html
View File

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>thirdperson</title>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="/src/css/global.css">
<link rel="stylesheet" href="/src/css/game.css">
</head>
<body>
<div class="container-third">
<h1 id="wellcome-message" class="anm" >PYTHON QUIZ GAME</h1>
<div class="bg">
<img src="/src/assets/Design/wayland.png" alt="bg">
</div>
<div class="hero">
<img id="hero" src="/src/assets/Design/KnightPixLE2-export.png" alt="">
</div>
<div class="boss">
<img id="boss" src="/src/assets/Design/for-python-Recovered-export2.png" alt="">
</div>
</div>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>AOS.init();</script>
<script src="/src/js/game.js"></script>
</body>
</html>

36
src/js/game.js
View File

@ -0,0 +1,36 @@
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(() => {
txt.style.opacity = '1';
}, 1000);
setTimeout(() => {
txt.style.opacity = '0';
setTimeout(() => {
txt.style.display = 'none';
}, 400);
}, 5000);
setTimeout(() => {
hero.style.left = '800px';
}, 500);
setTimeout(() => {
boss.style.right = '700px';
}, 500);
setTimeout(()=> {
window.location.href = "/src/game/firstperson.html"
}, 7000)