diff --git a/Games/Kill_The_Bird/index.html b/Games/Kill_The_Bird/index.html new file mode 100644 index 0000000000..1e44a677b5 --- /dev/null +++ b/Games/Kill_The_Bird/index.html @@ -0,0 +1,33 @@ + + + + + + Kill The Birds + + + +
+
+ +
+
GAME OVER
+

KILL THE BIRDS (shoot the birds)

+

CSS GAME - NO JS!

+ + + + + + + + + + + + + +
SCORE:
+
+ + diff --git a/Games/Kill_The_Bird/styles.css b/Games/Kill_The_Bird/styles.css new file mode 100644 index 0000000000..b0e64e93a7 --- /dev/null +++ b/Games/Kill_The_Bird/styles.css @@ -0,0 +1,317 @@ +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, 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: -4s !important; + transform: scale(0.5); +} +.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; + } +} + +/*------------------------------------------------------ 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); + } +} diff --git a/Games/Virtual_Pet/README.md b/Games/Virtual_Pet/README.md index 39ca46fbc5..e84ae2cb17 100644 --- a/Games/Virtual_Pet/README.md +++ b/Games/Virtual_Pet/README.md @@ -1,4 +1,3 @@ - # Virtual Pet Virtual Pet is a simple and interactive game where players take care of a virtual pet by feeding, playing, and keeping it healthy. It's a fun way to test your virtual pet care skills! diff --git a/README.md b/README.md index 54ef3dbf5e..624620560c 100644 --- a/README.md +++ b/README.md @@ -154,6 +154,7 @@ This repository also provides one such platforms where contributers come over an | [Mastermind_Mania](https://github.com/kunjgit/GameZone/tree/main/Games/Mastermind_Mania) | [Ludo_4_Player](https://github.com/kunjgit/GameZone/tree/main/Games/Ludo_4_Player) | [AirBalloon](https://github.com/kunjgit/GameZone/tree/main/Games/AirBalloon) | [Space Invaders](https://github.com/kunjgit/GameZone/tree/main/Games/Space_Invaders) | [Cut the Rope](https://github.com/kunjgit/GameZone/tree/main/Games/Cut_the_rope) | | [Caesar&Cipher](https://github.com/kunjgit/GameZone/tree/main/Games/Caesar_Cipher) | [Monster_Maker](https://github.com/kunjgit/GameZone/tree/main/Games/Monster_Maker) | [Stolen Sword](https://github.com/kunjgit/GameZone/tree/main/Games/Stolen_Sword) | [Mastermind](https://github.com/kunjgit/GameZone/tree/main/Games/Mastermind) | [Highway 404](https://github.com/kunjgit/GameZone/tree/main/Games/Highway_404) | | [BullseyeGame](https://github.com/kunjgit/GameZone/tree/main/Games/BullseyeGame) | [Crossword Game](https://github.com/kunjgit/GameZone/tree/main/Games/Crossword_Game) | [Guess the Correct Logo](https://github.com/shruti-2412/GameZone/tree/main/Games/Guess_The_Correct_Logo) | [Painting_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Painting_Game) | [Platform_game_engine](https://github.com/kunjgit/GameZone/tree/main/Games/Platform_game_engine) | +| [Kill_The_Bird](https://github.com/kunjgit/GameZone/tree/main/Games/Kill_The_Bird) | | [Doppelkopf](https://github.com/kunjgit/GameZone/tree/main/Games/Doppelkopf) | [quiz_game](https://github.com/kunjgit/GameZone/tree/main/Games/quiz_game) | [Island Survival](https://github.com/kunjgit/GameZone/tree/main/Games/Island_Survival) | [Linkup Game](https://github.com/kunjgit/GameZone/tree/main/Games/linkup) | [Trivia_Card](https://github.com/kunjgit/GameZone/tree/main/Games/Trivia_Card) | | [Insect Catch Game](https://github.com/kunjgit/GameZone/tree/main/Games/Insect_Catch_Game) | [Carnival_game](https://github.com/kunjgit/GameZone/tree/main/Games/Carnival_game) | [Make Me Laugh](https://github.com/kunjgit/GameZone/tree/main/Games/Make_Me_Laugh) | [Avoider_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Avoider_Game) | [Dungeon_Crawler](https://github.com/kunjgit/GameZone/tree/main/Games/Dungeon_Crawler) | | [snake_water_gun](https://github.com/kunjgit/GameZone/tree/main/Games/snake_water_gun) | [Run and Jump](https://github.com/kunjgit/GameZone/tree/main/Games/Run_and_Jump) | [AI CHESS Game](https://github.com/kunjgit/GameZone/tree/main/Games/AI_CHESS_Game) | [Fruit_Catching](https://github.com/kunjgit/GameZone/tree/main/Games/Fruit_Catching) | [Bulls eye](https://github.com/kunjgit/GameZone/tree/main/Games/Bulls_eye) | diff --git a/assets/images/grabthecarrot.png b/assets/images/grabthecarrot.png deleted file mode 100644 index 69a5874ced..0000000000 Binary files a/assets/images/grabthecarrot.png and /dev/null differ diff --git a/assets/images/killthebird.jpeg b/assets/images/killthebird.jpeg new file mode 100644 index 0000000000..9995c9c29e Binary files /dev/null and b/assets/images/killthebird.jpeg differ