Added Shoot The Target Game

ssitvit · Jul 25, 2023 · 97298e6 · 97298e6
1 parent ab1e570
commit 97298e6
Show file tree

Hide file tree

Showing 3 changed files with 309 additions and 0 deletions.
diff --git a/src/Games/ShootTheTarget/README.md 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!!!
diff --git a/src/Games/ShootTheTarget/index.html b/src/Games/ShootTheTarget/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Shoot the target!</title>
+  <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id="game" class="game">
+
+  <a class="start" href="#game">insert coin<span>💰</span></a>
+
+  <div class="content">
+
+    <input id="bullseye-1" type="checkbox">
+    <label for="bullseye-1"><span></span></label>
+
+    <input id="bullseye-2" type="checkbox">
+    <label for="bullseye-2"><span></span></label>
+
+    <input id="bullseye-3" type="checkbox">
+    <label for="bullseye-3"><span></span></label>
+
+    <input id="bullseye-4" type="checkbox">
+    <label for="bullseye-4"><span></span></label>
+
+    <input id="bullseye-5" type="checkbox">
+    <label for="bullseye-5"><span></span></label>
+
+    <input id="bullseye-6" type="checkbox">
+    <label for="bullseye-6"><span></span></label>
+
+    <input id="bullseye-7" type="checkbox">
+    <label for="bullseye-7"><span></span></label>
+
+    <input id="bullseye-8" type="checkbox">
+    <label for="bullseye-8"><span></span></label>
+
+    <div class="score"> points</div>
+
+  </div>
+
+</div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/src/Games/ShootTheTarget/style.css b/src/Games/ShootTheTarget/style.css
@@ -0,0 +1,254 @@
+html {
+  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 86 86" width="42" height="42"><path d="M42.998 0C19.252 0 0 19.252 0 43c0 23.749 19.252 43 42.998 43C66.748 86 86 66.749 86 43 86 19.252 66.748 0 42.998 0zM46.5 77.825V58.5h-7.002v19.325C22.965 76.184 9.818 63.035 8.176 46.5H27.5v-7.002H8.176C9.818 22.964 22.965 9.816 39.498 8.175V27.5H46.5V8.175c16.537 1.642 29.684 14.79 31.326 31.323H58.5V46.5h19.326C76.184 63.035 63.037 76.182 46.5 77.825z" fill="%2353FF45"/></svg>') 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;
+  }
+}