css3类似flap小游戏

在CSS写完全,因为以前使用物理引擎实现让人们愤怒和生气……
HTML
<div class="canvas">
  <div class="bird-box">
    <div class="sprite bird"></div>
  </div>
  <div class="pipe"></div>
  <div class="pipe"></div>
  <div class="pipe"></div>
  <div class="pipe"></div>
  <div class="ground"></div>
</div>

CSS
html {
  background: #333;
  overflow-x: hidden;
}

.sprite {
  background-image: url('http://i.imgur.com/01JdFPl.png');
}

.canvas {
  height: 256px;
  cursor: pointer;
  position: relative;
  background: url('http://i.imgur.com/FLqikK8.png?1');
  animation: scroll 10s linear infinite;
  box-shadow: 0 0 10em #000;
}

.bird-box {
  width: 17px;
  height: 12px;
  position: absolute;
  left: 10%; top: 60%;
  transition: top 1.5s;
}

.canvas:active .bird-box {
  top: 10%;
  transform: rotate(-15deg);
}

.bird {
  height: 100%;
  background-position: -264px -64px;
  transform: translateY(-50%);
  animation: 
    flap 1s steps(2) infinite,
    hover .5s ease-in-out infinite alternate;
}

.ground {
  position: absolute;
  bottom: 0; left: 0;
  height: 56px; width: 100%;
  background: url("http://i.imgur.com/Lg9kg5Y.png");
  animation: scroll 5s linear infinite;
}

.pipe {
  width: 26px;
  height: 256px;
  position: absolute;
  top: 0; left: 100%;
  animation: passby 30s linear infinite;
  background: url("http://i.imgur.com/9Cxyyur.png");
  background-position-y: -75px;
}

.pipe:nth-of-type(2) {
  animation-delay: 1.5s;
  background-position-y: 0;
}

.pipe:nth-of-type(3) {
  animation-delay: 3s;
  background-position-y: -115px;
}

.pipe:nth-of-type(4) {
  animation-delay: 4.5s;
  background-position-y: -30px;
}

@keyframes flap {
  to { background-position-y: -116px }
}

@keyframes hover {
  to { transform: translateY(50%) }
}

@keyframes scroll {
  to { background-position-x: -144px }
}

@keyframes passby {
  to { left: -10%; }
}