diff --git a/back1.jpg b/back1.jpg new file mode 100644 index 0000000..00ec4d7 Binary files /dev/null and b/back1.jpg differ diff --git a/background.jpg b/background.jpg new file mode 100644 index 0000000..0d0f31b Binary files /dev/null and b/background.jpg differ diff --git a/game window.png b/game window.png new file mode 100644 index 0000000..0710097 Binary files /dev/null and b/game window.png differ diff --git a/ghost_busting.png b/ghost_busting.png new file mode 100644 index 0000000..c81c1e6 Binary files /dev/null and b/ghost_busting.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..d4939f6 --- /dev/null +++ b/index.html @@ -0,0 +1,146 @@ + + + + + + Ghost Bustin + + + +
+
+
+

Ghost
Busting

+

You'll get 15 seconds to bust as many ghosts as you can. Colored ghosts score more points!

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Good job!

+

You scored  

+
+
+
+
+ + \ No newline at end of file diff --git a/score.png b/score.png new file mode 100644 index 0000000..9ccd72f Binary files /dev/null and b/score.png differ diff --git a/style.css b/style.css new file mode 100644 index 0000000..998ebc6 --- /dev/null +++ b/style.css @@ -0,0 +1,451 @@ +@import url("https://fonts.googleapis.com/css?family=Lato"); +* { + box-sizing: border-box; +} +body { + align-items: center; + background-color: #082113; + color: #fff; + counter-reset: score; + display: flex; + font-family: 'Lato', sans-serif; + justify-content: center; + min-height: 100vh; +} +.game { + display: grid; + grid-gap: 20px; + grid-template-columns: repeat(var(--cols), 1fr); + grid-template-rows: repeat(var(--rows), 1fr); + height: 250px; + position: relative; + width: 250px; +} +@media (min-width: 768px) { + .game { + grid-gap: 25px; + height: 400px; + width: 400px; + } +} +.ghost-pen { + position: relative; + transform: translate(0, 50%); +} +.ghost, +.ghost__image { + animation: bob calc(var(--speed) * 1s) infinite ease; + animation-delay: calc(var(--delay) * 1s); + height: 45px; + transform: translate(0, 100%) scale(1); + width: 30px; +} +@media (min-width: 768px) { + .ghost, + .ghost__image { + height: 75px; + width: 60px; + } +} +.ghost { + cursor: pointer; + position: absolute; + z-index: 2; + opacity: 0; +} +.ghost__path { + fill: var(--color); +} +.ghost__mouth { + fill: #ffc0cb; +} +.ghost__eyes--busted { + display: none; +} +.ghost__image-body { + animation: none; + height: 100%; + width: 100%; +} +.ghost__container { + align-items: center; + display: flex; + height: 100%; + justify-content: center; + position: absolute; + width: 100%; + z-index: 3; +} +.ghost__container:after { + background: #6c7a89; + border-radius: 50% 50% 0 0; + box-shadow: 10px 0 0 #2e3131; + bottom: 0; + color: #2e3131; + content: 'R.I.P'; + text-align: center; + line-height: 60px; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translate(0, 50%); + z-index: 3; +} +@media (min-width: 768px) { + .ghost__container:after { + font-size: 1.5rem; + line-height: 80px; + } +} +.ghost__container .ghost__container { + display: none; +} +.ghost:checked { + animation: busted 1.75s 0.25s both; + counter-increment: score var(--score); +} +.ghost:checked ~ .ghost__image { + animation: busted 1.75s 0.25s both; +} +.ghost:checked ~ .ghost__image .ghost__image-body { + animation: wiggle 1.75s 0.25s; +} +.ghost:checked ~ .ghost__image .ghost__image-body .ghost__eyes { + display: none; +} +.ghost:checked ~ .ghost__image .ghost__image-body .ghost__eyes--busted { + display: block; +} +.ghost:checked ~ .ghost__container { + display: flex; + animation: fadeIn calc(var(--delay) * 1s) both steps(2); +} +.menu { + opacity: 0; +} +.menu:checked, +.menu:checked ~ .title-screen { + display: none; +} +.menu:checked ~ .end { + animation: slideUp 15s both; +} +.menu:checked ~ .end .credit-ghost { + animation: float 2s 15s both; +} +.menu:checked ~ .end .credit-ghost svg { + animation: wiggle 2s 15s; +} +.end, +.title-screen, +.backdrop { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; +} +.title-screen, +.end { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + z-index: 5; + background: url(back1.jpg); + background-size: cover; + background-repeat: no-repeat; + /* background: linear-gradient(35deg, #333, #000); */ +} +.backdrop { + animation: flash 10s infinite linear; +} +@-moz-keyframes flash { + 71%, 73%, 75%, 77%, 79% { + background: rgba(255,255,204,0.5); + } + 0%, 70%, 72%, 74%, 76%, 78%, 80%, 100% { + background: transparent; + } +} +@-webkit-keyframes flash { + 71%, 73%, 75%, 77%, 79% { + background: rgba(255,255,204,0.5); + } + 0%, 70%, 72%, 74%, 76%, 78%, 80%, 100% { + background: transparent; + } +} +@-o-keyframes flash { + 71%, 73%, 75%, 77%, 79% { + background: rgba(255,255,204,0.5); + } + 0%, 70%, 72%, 74%, 76%, 78%, 80%, 100% { + background: transparent; + } +} +@keyframes flash { + 71%, 73%, 75%, 77%, 79% { + background: rgba(255,255,204,0.5); + } + 0%, 70%, 72%, 74%, 76%, 78%, 80%, 100% { + background: transparent; + } +} +.menu { + height: 100vh; + width: 100vw; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 6; +} +.end { + background: url(background.jpg); + background-size: cover; + background-position: center; + text-shadow: 0 0 4px rgb(20, 0, 72); + background-repeat: no-repeat; + transform: translate(0, 100%); + +} +.credit-ghost { + position: absolute; + left: 75%; + top: 100%; + animation: none; +} +.title { + letter-spacing: 4px; + font-size: 2.7rem; + margin: 0; + text-align: center; + + text-transform: uppercase; +} +@media (min-width: 768px) { + .title { + font-size: 3rem; + } +} +.title-screen__content { + display: grid; + grid-gap: 0 1rem; + align-content: center; + align-items: center; + grid-template-columns: auto 1fr; + grid-template-rows: repeat(3, auto); + max-width: 90vw; +} +.description { + grid-column: 2; + text-align: justify; + max-width: 210px; +} +.title-screen button{ + cursor: pointer !important; +} +button { + cursor: pointer; + grid-column: 2; + background: #fff; + color: #000; + cursor: pointer; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 4px; + padding: 8px 12px; + border-radius: 10px; +} + + +.credit-ghost, +.title-ghost { + height: 65px; + width: 50px; +} +.credit-ghost .ghost__path, +.title-ghost .ghost__path { + fill: #fff; +} +.score { + margin-bottom: 2rem; +} +.score:after { + content: counter(score); +} +@-moz-keyframes bob { + 50% { + transform: translate(0, -100%) scale(1.25); + } +} +@-webkit-keyframes bob { + 50% { + transform: translate(0, -100%) scale(1.25); + } +} +@-o-keyframes bob { + 50% { + transform: translate(0, -100%) scale(1.25); + } +} +@keyframes bob { + 50% { + transform: translate(0, -100%) scale(1.25); + } +} +@-moz-keyframes slideUp { + 95% { + transform: translate(0, 100%); + } + 100% { + transform: translate(0, 0); + } +} +@-webkit-keyframes slideUp { + 95% { + transform: translate(0, 100%); + } + 100% { + transform: translate(0, 0); + } +} +@-o-keyframes slideUp { + 95% { + transform: translate(0, 100%); + } + 100% { + transform: translate(0, 0); + } +} +@keyframes slideUp { + 95% { + transform: translate(0, 100%); + } + 100% { + transform: translate(0, 0); + } +} +@-moz-keyframes float { + to { + transform: translate(0, -125vh); + } +} +@-webkit-keyframes float { + to { + transform: translate(0, -125vh); + } +} +@-o-keyframes float { + to { + transform: translate(0, -125vh); + } +} +@keyframes float { + to { + transform: translate(0, -125vh); + } +} +@-moz-keyframes busted { + 0% { + transform: translate(0, -100%) scale(1.25); + } + 100% { + opacity: 0; + transform: translate(0, -100vh) scale(0); + } +} +@-webkit-keyframes busted { + 0% { + transform: translate(0, -100%) scale(1.25); + } + 100% { + opacity: 0; + transform: translate(0, -100vh) scale(0); + } +} +@-o-keyframes busted { + 0% { + transform: translate(0, -100%) scale(1.25); + } + 100% { + opacity: 0; + transform: translate(0, -100vh) scale(0); + } +} +@keyframes busted { + 0% { + transform: translate(0, -100%) scale(1.25); + } + 100% { + opacity: 0; + transform: translate(0, -100vh) scale(0); + } +} +@-moz-keyframes wiggle { + 25%, 75% { + transform: translate(-50%, 0); + } + 50% { + transform: translate(50%, 0); + } +} +@-webkit-keyframes wiggle { + 25%, 75% { + transform: translate(-50%, 0); + } + 50% { + transform: translate(50%, 0); + } +} +@-o-keyframes wiggle { + 25%, 75% { + transform: translate(-50%, 0); + } + 50% { + transform: translate(50%, 0); + } +} +@keyframes wiggle { + 25%, 75% { + transform: translate(-50%, 0); + } + 50% { + transform: translate(50%, 0); + } +} +@-moz-keyframes fadeIn { + from { + opacity: 0; + } +} +@-webkit-keyframes fadeIn { + from { + opacity: 0; + } +} +@-o-keyframes fadeIn { + from { + opacity: 0; + } +} +@keyframes fadeIn { + from { + opacity: 0; + } +} +.score-container{ + width: auto; + height: auto; + background-color: #09133e; + padding: 30px; + backdrop-filter: blur(5px); + display: flex; + flex-direction: column; + justify-content: space-between; + border-radius: 10px; + border-width: 3px; + border-color:#ffffff !important; +} \ No newline at end of file