Merge pull request #1052 from SimranLahrani842/SimranLahrani842-patch-8

fixes -bird shooter game
ssitvit · Aug 9, 2023 · d38324a · d38324a
2 parents 3551b85 + 07054c5
commit d38324a
Show file tree

Hide file tree

Showing 3 changed files with 288 additions and 0 deletions.
diff --git a/src/Games/bird-shooter-game/Readme.md b/src/Games/bird-shooter-game/Readme.md
@@ -0,0 +1,8 @@
+## game-bird shooter game
+## how to play
+
+- just hit the bird by touching it.
+- notification will appear that the bird id killed.
+- there is a timer too.
+- shoot as many birds as possible within given time limit.
+- the game ends by itself as time is over.
diff --git a/src/Games/bird-shooter-game/index.html b/src/Games/bird-shooter-game/index.html
@@ -0,0 +1,41 @@
+<div class="wrapper">
+  <div class="timer">
+       <span></span>    
+  </div>
+  <!-- html file -->
+  <link rel="stylesheet" href="style.css">
+  <div class="gameover">GAME OVER</div>
+  <h1>KILL THE BIRDS <span>(shoot the birds)</span></h1>
+  <h2>PURE CSS GAME</h2>
+  <input class="input-circle input-circle1" type="radio" id="circle1" >
+ <input class="input-circle input-circle2" type="radio" id="circle2" >
+ <input class="input-circle input-circle3" type="radio" id="circle3" >
+ <input class="input-circle input-circle4" type="radio" id="circle4" >
+ <input class="input-circle input-circle5" type="radio" id="circle5" >
+ <input class="input-circle input-circle6" type="radio" id="circle6" >
+
+  <label for="circle1" class="pajaro pajaro1"><span></span></label>
+  <label for="circle2" class="pajaro pajaro2"><span></span></label>
+  <label for="circle3" class="pajaro pajaro3"><span></span></label>
+  <label for="circle4" class="pajaro pajaro4"><span></span></label>
+  <label for="circle5" class="pajaro pajaro5"><span></span></label>
+  <label for="circle6" class="pajaro pajaro6"><span></span></label>
+  <div class="sum">SCORE:</div>
+
+
+
+
+
+
+  <footer>    
+    <a href="">
+      <svg viewBox="0 0 24 24" style="width:40px; height:40px; fill: rgba(29,161,242,1.00);"><g><path d="M23.643 4.937c-.835.37-1.732.62-2.675.733.962-.576 1.7-1.49 2.048-2.578-.9.534-1.897.922-2.958 1.13-.85-.904-2.06-1.47-3.4-1.47-2.572 0-4.658 2.086-4.658 4.66 0 .364.042.718.12 1.06-3.873-.195-7.304-2.05-9.602-4.868-.4.69-.63 1.49-.63 2.342 0 1.616.823 3.043 2.072 3.878-.764-.025-1.482-.234-2.11-.583v.06c0 2.257 1.605 4.14 3.737 4.568-.392.106-.803.162-1.227.162-.3 0-.593-.028-.877-.082.593 1.85 2.313 3.198 4.352 3.234-1.595 1.25-3.604 1.995-5.786 1.995-.376 0-.747-.022-1.112-.065 2.062 1.323 4.51 2.093 7.14 2.093 8.57 0 13.255-7.098 13.255-13.254 0-.2-.005-.402-.014-.602.91-.658 1.7-1.477 2.323-2.41z"></path></g></svg>
+
+
+    </a>
+
+
+  </footer>
+</div>
+
+
diff --git a/src/Games/bird-shooter-game/style.css b/src/Games/bird-shooter-game/style.css
@@ -0,0 +1,239 @@
+body{
+  counter-reset:birds;
+  -webkit-touch-callout: none;
+-webkit-user-select: none;
+-khtml-user-select: none;
+-moz-user-select: none;
+-ms-user-select: none;
+user-select: none;
+  overflow:hidden;
+}
+/*hide checkbox*/
+input{position:fixed; left:-10px; top:-10px;}
+
+h1{margin:0; text-align:center;}
+h2{position:fixed; right:20px; bottom:0; font-size:18px; color:red;}
+
+/*play area*/
+.wrapper{  
+  height:500px;
+  background: -webkit-linear-gradient(top, hsla(210,70%,80%,1) 0%,hsla(210,50%,100%,1) 100%);
+  position:relative;
+  cursor:crosshair;
+}
+/*count dead birds*/
+.input-circle:checked{
+  counter-increment:birds;
+}
+
+.sum{position:fixed; left:45%; top:60px; font-size:24px; fonot-weight:bold;}
+
+/*print to screen dead birds*/
+.sum:after{
+  content: counter(birds);
+}
+
+.input-circle ~ .pajaro{
+  opacity:0;
+  transition:0.3s  cubic-bezier(0,.43,1,0);
+  animation: move 8s infinite alternate;
+}
+.input-circle1:not(:checked) ~ .pajaro1,
+.input-circle2:not(:checked) ~ .pajaro2,
+.input-circle3:not(:checked) ~ .pajaro3,
+.input-circle4:not(:checked) ~ .pajaro4,
+.input-circle5:not(:checked) ~ .pajaro5,
+.input-circle6:not(:checked) ~ .pajaro6
+{
+  opacity:1; 
+}
+
+
+.input-circle1:checked ~ .pajaro1 span,
+.input-circle2:checked ~ .pajaro2 span,
+.input-circle3:checked ~ .pajaro3 span,
+.input-circle4:checked ~ .pajaro4 span,
+.input-circle5:checked ~ .pajaro5 span,
+.input-circle6:checked ~ .pajaro6 span
+{
+  display:block;
+
+}
+
+.pajaro{   
+  position:absolute;
+  left:0;  
+  cursor:crosshair;
+}
+.pajaro>span{
+  display:none;position:absolute; z-index:2; left:-250%;bottom:-50%;  
+  background-color:white; border:solid 2px #000; width:80px; height:30px; padding:10px; border-radius:50%;
+}
+.pajaro>span:before{
+  content:"I'm Dead!"; color:red; font-weight:bold;
+}
+
+.pajaro1{top:50px;
+  animation-delay: -2s!important;
+  transform:scale(0.9);
+}
+.pajaro2{
+  top:100px;
+  animation-delay: -1s!important;
+  transform:scale(0.8); 
+}
+.pajaro3{
+  top:200px;
+  animation-delay: -3s!important;
+  transform:scale(1.4); 
+}
+
+.pajaro4{top:50px;
+  animation-delay: -12s!important;
+  transform:scale(0.9);
+}
+.pajaro5{
+  top:100px;
+  animation-delay: -16s!important;
+  transform:scale(0.5); 
+}
+.pajaro6{
+  top:200px;
+  animation-delay: -20s!important;
+  transform:scale(1.4); 
+}
+
+@keyframes move{
+0%{left:0%;}
+20%{left:20%;top:50%; }
+40%{top:30%; left:60%;}
+60%{top:80%;left:80%;}
+80%{top:10%; left:20%;}
+100%{top:30%; left:20%; }
+}
+
+
+.timer{
+  background-color:#333; width:300px;height:50px;
+  position:fixed;
+}
+
+
+.timer span{
+  display:block;
+  background:repeating-linear-gradient(-45deg, #000, rgba(0, 0, 0, 0) 25px, #FFF 25px, #FFF 50px);
+  width:300px; height:50px;
+  animation:timer 20s linear;
+}
+
+.timer span:before{  
+  content:"TIME LEFT";
+  display:block;
+  position:absolute; z-index:3;
+  left:0; 
+  right:0;
+  top:0;
+  bottom:0;
+  text-align:center;
+  line-height:50px;
+  font-size:25px;
+  color:red;
+}
+@keyframes timer{
+0%{width:10px;}
+100%{width:300px; display:block;}
+}
+
+
+.gameover{
+  position:fixed; z-index:100000; left:0; top:0; bottom:0; right:0; background-color:rgba(0,0,0,0.8);
+  animation:gameover 20s linear forwards;
+  font-size:80px; color:white; font-weight:bold; text-align:center; 
+  text-indent:0;  
+  line-height:500px;
+}
+
+@keyframes gameover{
+0%{left:-5000px;bottom:100%;}
+97%{left:-5000px;bottom:100%;}
+100%{ left:0px;}
+}
+
+footer{position:fixed; left:0; bottom:0; padding:10px 20px;}
+footer svg{vertical-align:middle;}
+footer a{text-decoration:none;  font-size:20px; color:rgba(29,161,242,1.00); vertical-align:middle;}
+
+
+
+
+/*------------------------------------------------------ body of the bird
+*/
+
+.pajaro{
+  background:black;
+  border-radius: 50% 50% 20% 20%;
+  color:white;
+  line-height:20px;
+  letter-spacing: 2px;
+  font-size:0.8em;
+  text-align:center;
+  position:absolute;
+
+  margin-top:-20px; margin-left:-10px;
+  width:15px; height:15px;
+  animation:planeo 0.8s linear infinite;
+  z-index:999;
+}
+
+.pajaro:after,
+.pajaro:before{
+  content:"";
+  position:absolute;
+  top:50%; left:50%;
+}
+
+/*------------------------------------------------------ bird wings
+*/
+
+.pajaro:after{
+  border-radius: 100% 100% 0 0;
+  box-shadow: inset 0px 5px 0 black;
+  width:100px; height:100px;
+  margin-top:-7px; margin-left:-50px;
+  transform-origin: 100% 0%;
+  animation:alas 3s linear infinite;
+}
+
+/*------------------------------------------------------ bird beak
+*/
+
+.pajaro:before{
+  background:#FFC37F;
+  border-radius: 100% 0% 20% 0%;
+  margin-top:3px; margin-left:-4px;
+  width:6px; height:6px;
+  transform:rotateZ(45deg);
+}
+
+/*------------------------------------------------------ wings animation
+*/
+
+@keyframes alas {
+  50%{
+    transform:rotateX(-1440deg);
+  }
+}
+
+/*------------------------------------------------------ bird animation
+*/
+
+@keyframes planeo {
+  40%{
+    transform:rotateZ(2deg) translateX(2px) translateY(10px) translateZ(0);
+    line-height:16px;
+    font-size:0.6em;
+  }
+  80%{
+    transform:rotateZ(-2deg) translateX(5px) translateY(8px) translateZ(0);
+  }
+}