diff --git a/src/css/game.css b/src/css/game.css index 509018d..a0a41a0 100644 --- a/src/css/game.css +++ b/src/css/game.css @@ -7,15 +7,6 @@ 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%; @@ -179,4 +170,36 @@ 100% { 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; } \ No newline at end of file diff --git a/src/game/loading.html b/src/game/loading.html new file mode 100644 index 0000000..5acb26c --- /dev/null +++ b/src/game/loading.html @@ -0,0 +1,18 @@ + + + + + + Loading ... + + + + +
+

Welcome to the Python Quiz!
You’ll face multiple-choice questions designed to test your logic and Python skills.
Let’s see how well you can outsmart the code!

+ + +
+ + + \ No newline at end of file diff --git a/src/game/thirdperson.html b/src/game/thirdperson.html index eaee0db..117df78 100644 --- a/src/game/thirdperson.html +++ b/src/game/thirdperson.html @@ -10,7 +10,6 @@
-

! PYTHON QUIZ GAME !

bg
diff --git a/src/js/load.js b/src/js/load.js new file mode 100644 index 0000000..f3cd327 --- /dev/null +++ b/src/js/load.js @@ -0,0 +1,3 @@ +setTimeout(()=> { + window.location.href = "/game/firstperson.html" +}, 10000) \ No newline at end of file diff --git a/src/js/thirdperson.js b/src/js/thirdperson.js index 24ccd64..331e40b 100644 --- a/src/js/thirdperson.js +++ b/src/js/thirdperson.js @@ -1,39 +1,18 @@ -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'; + hero.style.left = '1000px'; }, 500); setTimeout(()=> { hero.src = "/assets/Design/KnightPixLE2-exporgift.gif"; }, 1700); -setTimeout(() => { - boss.style.right = '700px'; -}, 500); setTimeout(()=> { - window.location.href = "/game/firstperson.html" -}, 5500) + window.location.href = "/game/loading.html" +}, 3000)