A Pen by Jonathan Sampson.

Flap,-Flap,-Flap..markdown

Flap, Flap, Flap.

Oh man, I'm so going to become filthy rich now. Just tap, tap, and fly through the pipe openings. Written entirely in CSS, because previous implementations using physics engines left people irritated and annoyed...

A Pen by Jonathan Sampson on CodePen.

License.

index.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>

script.js

// Send cheques to @jonathansampson

style.css

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

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

.canvas {
  height: 256px;
  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%; }
}