Mình tham khảo được cách viết game bằng css animation mà không cần sử dụng JS trên mạng nên giới thiệu cho những ai chưa biết ạ. (bow)

Demo

HTML

• Đầu tiên các bạn add html như bên dưới:

<div class="wrapper">
  <div class="timer">
       <span></span>    
  </div>
  <div class="gameover">GAME OVER</div>
  <h1>KILL THE BIRDS <span>(shoot the birds)</span></h1>
  <h2>CSS GAME - NO JS!</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>
</div>

CSS

• Sau đó các bạn add css như sau:

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: -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);
  }
}