diff --git a/src/Games/bird-shooter-game/Readme.md b/src/Games/bird-shooter-game/Readme.md new file mode 100644 index 000000000..3bfe16b33 --- /dev/null +++ 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. \ No newline at end of file diff --git a/src/Games/bird-shooter-game/index.html b/src/Games/bird-shooter-game/index.html new file mode 100644 index 000000000..e370ba6d0 --- /dev/null +++ b/src/Games/bird-shooter-game/index.html @@ -0,0 +1,41 @@ +
+
+ +
+ + +
GAME OVER
+

KILL THE BIRDS (shoot the birds)

+

PURE CSS GAME

+ + + + + + + + + + + + + +
SCORE:
+ + + + + + + +
+ + diff --git a/src/Games/bird-shooter-game/style.css b/src/Games/bird-shooter-game/style.css new file mode 100644 index 000000000..0c38a8ef0 --- /dev/null +++ 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); + } +} \ No newline at end of file