From 97298e6e5951748b8f3f28df3ee2f5c330caf36b Mon Sep 17 00:00:00 2001 From: uzmaansari23 <113499701+uzmaansari23@users.noreply.github.com> Date: Wed, 26 Jul 2023 00:36:08 +0530 Subject: [PATCH] Added Shoot The Target Game --- src/Games/ShootTheTarget/README.md | 3 + src/Games/ShootTheTarget/index.html | 52 ++++++ src/Games/ShootTheTarget/style.css | 254 ++++++++++++++++++++++++++++ 3 files changed, 309 insertions(+) create mode 100644 src/Games/ShootTheTarget/README.md create mode 100644 src/Games/ShootTheTarget/index.html create mode 100644 src/Games/ShootTheTarget/style.css diff --git a/src/Games/ShootTheTarget/README.md b/src/Games/ShootTheTarget/README.md new file mode 100644 index 000000000..50d9262e6 --- /dev/null +++ b/src/Games/ShootTheTarget/README.md @@ -0,0 +1,3 @@ +# Description +It is a simple and interesting game based on HTML and CSS . +Player has to start the game by clicking on insert coin, aim and shoot the target before you miss it!!! \ No newline at end of file diff --git a/src/Games/ShootTheTarget/index.html b/src/Games/ShootTheTarget/index.html new file mode 100644 index 000000000..eb73fd95f --- /dev/null +++ b/src/Games/ShootTheTarget/index.html @@ -0,0 +1,52 @@ + + + + + Shoot the target! + + + + + + + +
+ + insert coin💰 + +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
points
+ +
+ +
+ + + + + diff --git a/src/Games/ShootTheTarget/style.css b/src/Games/ShootTheTarget/style.css new file mode 100644 index 000000000..0aaed9ec5 --- /dev/null +++ b/src/Games/ShootTheTarget/style.css @@ -0,0 +1,254 @@ +html { + cursor: url('data:image/svg+xml;utf8,') 21 21, auto; +} + +* { + cursor: inherit; +} + +body { + counter-reset: points; +} + +.start { + text-shadow: 1px 1px 0px #53FF45; + transition: transform opacity 1.5s ease-out; + -webkit-animation: opacityPulse 1.2s ease-out; + animation: opacityPulse 1.2s ease-out; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} +.game:target .start { + -webkit-animation: none; + animation: none; + opacity: 0; + pointer-events: none; +} + +.content { + position: fixed; + top: 0; + right: 100px; + bottom: 0; + left: 100px; + opacity: 0; + transition: transform opacity 1.5s ease-out; +} +.game:target .content { + opacity: 1; +} + +label { + position: absolute; + top: -130px; + width: 100px; + height: 100px; + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + will-change: transform, opacity; +} +label:nth-of-type(1) { + left: 81%; + -webkit-animation-duration: 2.7s; + animation-duration: 2.7s; + -webkit-animation-delay: 2.7s; + animation-delay: 2.7s; +} +label:nth-of-type(2) { + left: 91%; + -webkit-animation-duration: 2.7s; + animation-duration: 2.7s; + -webkit-animation-delay: 5.4s; + animation-delay: 5.4s; +} +label:nth-of-type(3) { + left: 51%; + -webkit-animation-duration: 2.7s; + animation-duration: 2.7s; + -webkit-animation-delay: 8.1s; + animation-delay: 8.1s; +} +label:nth-of-type(4) { + left: 30%; + -webkit-animation-duration: 2.7s; + animation-duration: 2.7s; + -webkit-animation-delay: 10.8s; + animation-delay: 10.8s; +} +label:nth-of-type(5) { + left: 7%; + -webkit-animation-duration: 2.7s; + animation-duration: 2.7s; + -webkit-animation-delay: 13.5s; + animation-delay: 13.5s; +} +label:nth-of-type(6) { + left: 80%; + -webkit-animation-duration: 2.7s; + animation-duration: 2.7s; + -webkit-animation-delay: 16.2s; + animation-delay: 16.2s; +} +label:nth-of-type(7) { + left: 41%; + -webkit-animation-duration: 2.7s; + animation-duration: 2.7s; + -webkit-animation-delay: 18.9s; + animation-delay: 18.9s; +} +label:nth-of-type(8) { + left: 96%; + -webkit-animation-duration: 2.7s; + animation-duration: 2.7s; + -webkit-animation-delay: 21.6s; + animation-delay: 21.6s; +} +label:before { + content: ""; + display: block; + width: 100%; + height: 100%; + background-color: red; + background-image: radial-gradient(transparent 15%, white 15%, white 35%, transparent 0%, transparent 55%, white 0); + border-radius: 50%; + box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.4); + transition: opacity 1s ease-in-out; +} +input:checked + label:before { + opacity: 0; + filter: grayscale(100%); +} +label:after { + content: "+1"; + position: absolute; + top: 50%; + left: 50%; + font-size: 1.7em; + color: white; + text-shadow: 2px 2px 0px red; + opacity: 0; + transform: translate(-50%, -50%); + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; +} +.game:target label { + -webkit-animation-name: crosshair-on; + animation-name: crosshair-on; +} +input:checked + label { + -webkit-animation-play-state: paused; + animation-play-state: paused; + pointer-events: none; +} +input:checked + label:after { + -webkit-animation: score-on 1.5s; + animation: score-on 1.5s; +} + +input { + opacity: 0; +} +input:checked { + counter-increment: points; + pointer-events: none; +} + +.score:before { + content: counter(points); +} +.game:target .score { + transform: translateY(calc(100% - 50vh)) scale(2.2); + transition: transform 0.4s 24.3s ease-in-out; +} + +body { + font-family: "Press Start 2P", cursive; + text-align: center; + color: green; + background-color: blue; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.start { + position: fixed; + z-index: 2; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: flex; + align-items: center; + justify-content: center; + font-size: 40px; + text-decoration: none; + color: white; + text-shadow: 2px 2px 0 red; +} +.start span { + display: inline-block; + margin-left: 0.5em; + font-size: 1.4em; + text-shadow: none; +} + +.score { + position: absolute; + bottom: 40px; + left: 0; + right: 0; + display: block; + font-size: 1.5em; + font-weight: 700; + color: #53FF45; + text-shadow: 2px 2px 0px red; + pointer-events: none; +} + +@-webkit-keyframes opacityPulse { + 30% { + opacity: 0; + } + 60% { + opacity: 1; + } +} + +@keyframes opacityPulse { + 30% { + opacity: 0; + } + 60% { + opacity: 1; + } +} +@-webkit-keyframes crosshair-on { + 100% { + transform: translateY(calc(102vh + 130px)); + } +} +@keyframes crosshair-on { + 100% { + transform: translateY(calc(102vh + 130px)); + } +} +@-webkit-keyframes score-on { + 10% { + transform: translate(-50%, calc(-50% - 3em)); + opacity: 1; + } + 100% { + opacity: 0; + } +} +@keyframes score-on { + 10% { + transform: translate(-50%, calc(-50% - 3em)); + opacity: 1; + } + 100% { + opacity: 0; + } +} \ No newline at end of file