index-uncompressed.html

<canvas id='e' width=320 height=480 style='border: solid 1px' />
<script>
  /*
  UNITS
  ----
  meters, an arbitrary non-resolution related measurement of distance
  pixels, the actual unit of distance
  seconds, normal seconds
  frames, an actual new frame, actually used for measuring time

  CONSTANTS
  --------
  BIRD_X = 30 meters
  BIRD_RADIUS = 5 meters
  HOLE_HEIGHT = 40 meters
  WALL_DISTANCE = 32.5 meters
  SCROLL_RATE = 5 meters per second
  GRAVITY = 2.5 meters per second per second
  FLAP_VELOCITY = -0.75 meters per second
  FLAP_TIME = 0.1 seconds
  WORLD_WIDTH = 80 meters
  WORLD_HEIGHT = 120 meters
  SCREEN_WIDTH = 320 pixels
  SCREEN_HEIGHT = 480 pixels

  UNIT CONVERSIONS
  ---------------
  FRAMES_PER_SECOND = 100
  PIXELS_PER_METER = 4
  */
  // cache math, save space
  var m = Math

    , e = document.getElementById('e')
    , c = e.getContext('2d')

  // if game is running, use 0 instead of false
    , f = 0

  // init bird with a time value (seconds)
    , t = 0;
  // start the game
  function r() {
    // set the in game flag, t use 1 instead of true
    f = 1;
    // init the birds y and velocity values
    k = 10;
    v = 0;

    // score
    var s = 0

    // list of walls
      , w = []

    // iterating variables, i index and l iterator
      , i = 0
      , l = 0

    // game loop interval
      , g = setInterval(function() {

      // add and delete walls as they come and go
      if (!w[0] || w[w.length - 1].x < 20) {
        // walls have an x (meters), an h y-value where the hole starts (meters),
        // and a q counted flag for if they've been counted as a point
        w.push({
          x: 80,
          h: ~~(m.random() * 80),
          q: 0
        })
      }
      if (w[0].x < -20) {
        w.shift()
      }

      // increment bird velocity by GRAVITY / FRAMES_PER_SECOND
      v += .025;
      // if the time value was set, then bird has flapped, decrement t by
      // FLAP_TIME / FPS and set bird velocity to FLAP_VELOCITY
      if (t > 0) {
        t -= 0.01;
        v = -0.75
      }

      // move the bird by it's velocity
      k += v;
      // move the walls by SCROLL_RATE * PIXELS_PER_METER / FRAMES_PER_SECOND
      for (i in w) {
        w[i].x -= 0.2
      }

      // clear screen
      c.clearRect(0, 0, 320, 480);

      // draw score
      c.t(s, 160, 64);

      // draw bird and walls
      c.beginPath();
      c.arc(140, (k + 5) * 4, 20, 0, 2*m.PI);
      for (i in w) {
        l = w[i];
        c.rect(l.x * 4, 0, 80, l.h * 4);
        c.rect(l.x * 4, (l.h + 40) * 4, 80, 480)
      }
      c.stroke();

      for (i in w) {
        l = w[i];
        // check for collisions against each wall, if collision, then game over
        if (((40 > l.x && 10 < l.x) &&
             (k < l.h || k > l.h + 30)) ||
            d(l.x, l.h) < 5 ||
            d(l.x + 20, l.h) < 5 ||
            d(l.x, l.h + 40) < 5 ||
            d(l.x + 20, l.h + 40) < 5 ||
            k > 110) {
            clearInterval(g);
            c.t('Game Over', 0, 240);
            f = 0
        }
        // check for point values wall.x < BIRD_X + 2 * BIRD_RADIUS
        if (!w[i].q && w[i].x < 40) {
          s += 1;
          w[i].q = 1
        }
      }

    // run interval at 1000 / FRAMES_PER_SECOND
    }, 10);
  };

  // distance function to help compute distance in meters from center of bird
  function d(x, y) {
    // sqrt((BIRD_X + BIRD_RADIUS - x)^2 + (k + BIRD_RADIUS - y)^2)
    return m.sqrt((35-x)*(35-x) + m.pow(k + 5 - y, 2))
  }

  // create event listener for space bar to increment bird.t by FLAP_TIME
  window.onkeydown = function(e) {
    e.keyCode === 32 && (t = 0.1) && !f && r()
  };

  // set the font for the canvas
  c.font = "bold 56px Arial";

  // rename the fillText function to save space (this wouldn't be worth doing
  // for any of the other functions
  c.t = c.fillText;

  // start the game
  c.t('Hit Space', 0, 240);

</script>