Flattybird game using HTML5 canvas

by Arshad Muhammed

HTML

<canvas id="can" width="800" height="500">

</canvas>

<button id="start_game">
  START
</button>
<button id="stop_game">
  PAUSE
</button>
<button id="restart_game">
  RESTART
</button>
<p>
  Score:
  <span id="score">0</span>
</p>

CSS

body {
  margin: 0;
  padding: 0;
  text-align: center;
  width: 100%;
}

.container {
  margin: 0;
  padding: 0;
  height: 100%;
}

#can {
  display: block;
  padding: 0;
  margin: 0 auto;
  border: 1px solid red;
}

@media(max-width:1200px) {
  .container {
    margin: 0 50px;
  }
  #can {
    width: 100%;
    height: auto;
  }
}

JavaScript

$('#start_game,#stop_game').attr('disabled', false);

 var bird_down = true,
   c = document.getElementById("can"),
   ctx = c.getContext("2d"),
   h = c.height,
   w = c.width,
   pw = pw2 = 80,
   ph = ph2 = initial_height = 180,
   px = px2 = w + 20,
   py = h - ph,
   py2 = 0,
   bw = 70,
   bh = 50,
   bx = 50,
   by = 100,
   anim_id = up_id = game_over = score_updated = false,
   speed = 4,
   count = 1,
   new_height = 0;

 ctx.fillStyle = "blue";
 ctx.fillRect(bx, by, bw, bh);
 ctx.fillStyle = "red";
 ctx.fillRect(px, py, pw, ph);
 ctx.fillStyle = "red";
 ctx.fillRect(px2, py2, pw2, ph2);


 function animation() {
   var rect1 = {
     x: px,
     y: py,
     width: pw,
     height: ph
   };
   var rect2 = {
     x: bx,
     y: by,
     width: bw,
     height: bh
   };
   var rect3 = {
     x: px2,
     y: py2,
     width: pw2,
     height: ph2
   };

   if (collision(rect1, rect2) || collision(rect3, rect2) || by <= 0 || by + bh >= h) {
     stop_the_game()
   } else {
     ctx.clearRect(px, py, pw, ph);
     if (px > -pw) {
       px = px - speed;
     } else {
       px = w + 10;
       score_updated = false;
       count++;
       if (count % 4 == 0) {
         speed++;
       }
     }
     //Move pole 2
     ctx.clearRect(px2, py2, pw2, ph2);
     if (px2 > -pw2) {
       px2 = px2 - speed;
     } else {
       px2 = w + 10;
       new_height = parseInt(Math.random() * 100);
       ph = initial_height + new_height;
       py = h - ph;
       ph2 = initial_height - new_height;
     }
     //move bird
     if (bird_down) {
       ctx.clearRect(bx, by, bw, bh);
       ctx.fillStyle = "blue";
       by = by + 3;
       ctx.fillRect(bx, by, bw, bh);
     }
     draw_rect('red', px, py, pw, ph);
     draw_rect('red', px2, py2, pw2, ph2);

     if (bx > px + pw && score_updated == false) {
       $('#score').text(parseInt($('#score').text()) + 1);
       score_updated = true;
     }
     anim_id = requestAnimationFrame(animation);
   }
 }
 anim_id =...