From 8f311786e186c0e2b4157b262abf1fac2b38148e Mon Sep 17 00:00:00 2001 From: Neil Kalman Date: Wed, 11 Dec 2024 05:54:04 +0200 Subject: [PATCH] Add files via upload --- index.html | 41 +++++++++++++- script.js | 2 +- style.css | 162 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 203 insertions(+), 2 deletions(-) create mode 100644 style.css diff --git a/index.html b/index.html index 1670b2b..cb5c5f5 100644 --- a/index.html +++ b/index.html @@ -1,3 +1,13 @@ + + + + + achievibit - Boss Battle + + + + +
@@ -23,4 +33,33 @@ -
\ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/script.js b/script.js index a298b3f..119af6b 100644 --- a/script.js +++ b/script.js @@ -286,4 +286,4 @@ var cw = (c.width = window.innerWidth); var ch = (c.height = window.innerHeight); var cl = new canvasLightning(c, cw, ch); -cl.init(); +cl.init(); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..bb67639 --- /dev/null +++ b/style.css @@ -0,0 +1,162 @@ +@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@700&family=Press+Start+2P&family=Righteous&display=swap"); +:root { + --bar-fill: #57e705; + --bar-top: #6aff03; + --pixel-size: 7; +} + +.healthbar { + z-index: 10; + position: fixed; + left: 0; + right: 0; + width: calc(30px * var(--pixel-size)); + margin: 0 auto calc(2px * var(--pixel-size)) auto; + display: block; +} + +.healthbar_fill { + width: 0%; + fill: var(--bar-fill); + transition: width 0.1s ease-in, fill 0.2s linear; +} + +.healthbar_fill-top { + width: 0%; + fill: var(--bar-top); +} + +.fill-bar-animation { + animation: fill-bar 4s ease-out forwards; +} + +html, +body { + margin: 0; + padding: 0; +} + +body { + font-family: Avenir, sans-serif; + background-color: #212121; + color: #fffce1; + display: flex; + align-items: center; + justify-content: center; + height: 100vh; + flex-direction: column; +} + +p { + max-width: 70ch; + font-size: 1.4rem; + text-align: center; + line-height: 1.3; +} + +.game { + position: absolute; + width: 100dvw; + height: 100dvh; + overflow: hidden; + bottom: 0; +} + +.rpg-text-box { + color: #ff3860; + height: 100px; + left: 50%; + position: absolute; + bottom: 0; + transform: translate(-50%, calc(100% + 50px + 50px)); + max-width: 500px; + width: 80vw; + line-height: 1.5em; + margin: 2em 0; + background: white; + border: 1px solid white; + padding: 1em; + font-size: 0.7rem; + font-family: "Press Start 2P", cursive; + font-weight: bolder; + border-radius: 0.2em; + box-shadow: 0 1px 0 1px black, inset 0 1px 0 1px black, 0 0 0 1px black, inset 0 0 0 1px black, 3px 5px 0px 1px rgba(0, 0, 0, 0.25); + opacity: 0; + transition: all 250ms; + z-index: 10; +} + +.rpg-text-box.visible { + opacity: 1; + transform: translate(-50%); +} + +.code-editor { + position: absolute; + top: 0; + /* bottom: 0; */ + left: 0; + right: 0; + background: black; + transition: all 500ms cubic-bezier(0.47, 1.64, 0.41, 0.8); + height: 0; +} + +.code-editor.reveal { + height: 100%; +} + +.monster { + width: 100%; + height: 100%; + position: absolute; + bottom: 25px; + display: flex; + align-items: center; + justify-content: center; + position: relative; + /* Keep relative positioning for better layout control */ + animation: rise-up 4s ease-out forwards, shake-constant 2s infinite; +} +.monster img { + width: 100%; + max-width: 700px; +} + +@keyframes fill-bar { + from { + width: 0%; + } + to { + width: 100%; + } +} +/* Keyframes for rising up */ +@keyframes rise-up { + from { + transform: translateY(100%); + /* Start below the original position */ + } + to { + transform: translateY(0); + /* End at the original position */ + } +} +.monster .shake-constant { + animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); + /* Smooth timing */ + animation-duration: 2s; + /* Slower shake timing */ +} + +#textbox2 { + display: flex; + align-items: center; + justify-content: center; +} + +#canvas { + position: fixed; + z-index: 5; + pointer-events: none; +} \ No newline at end of file