Movement fps update/render test

by sfoster

HTML

<section id="main" class="panel">
    <h2>Movement update/render test</h2>
    <p>
      Use Arrow keys to move/jump
    </p>
    <div id="actor"></div>
    <canvas id="stats" width=200 height=24></canvas>
  </section>

CSS

html, body {
      margin: 0; padding: 0 20px;
      height: 100%;
      overflow: hidden;
    }
    #main {
      position: absolute;
      top: 0; bottom: 0; left: 0; right: 0;
      background-color: #eee;
    }
    #actor {
      position: absolute;
      top: 0; left: 0;
      width: 20px; height: 20px;
      border-radius: 4px;
      background-color: rgba(153,0,0,1.0);
      visibility: hidden;
    }
    #actor.inplay {
      visibility: visible;
      /*transition: opacity 0.2s ease;*/
    }
    #stats {
      position: absolute;
      top: 0; right: 0;
      width: 200px; height: 24px;
      background-color: #000;
      color: #fff;
      z-index: 1;
    }

JavaScript

(function(exports) {
      var pool = [];
      var _primingPool = true;

      var Vector2 = function (x,y) {
        this.x = x || 0;
        this.y = y || 0;
      };
      Vector2.create = function(x, y) {
        x = x || 0;
        y = y || 0;
        var v = pool.pop();
        if (v) {
          v.x = x;
          v.y = y;
        } else {
          if (!_primingPool) {
            console.log('pool empty, creating new Vector2');
          }
          v = new Vector2(x, y);
        }
        return v;
      }
      Vector2.prototype = {
        reset: function ( x, y ) {
          this.x = x;
          this.y = y;
          return this;
        },
        release: function() {
          this.reset(0,0);
          pool.push(this);
        },
        plusEq : function (v) {
          this.x+=v.x;
          this.y+=v.y;

          return this;
        }
      };
      // populate the pool
      for(var i=0; i<100; i++) {
        pool.push(new Vector2(0,0));
      }
      _primingPool = false;

      exports.Vector2 = Vector2;
    })(window);

    (function(exports) {
      var util = exports.util = {
        clamp: function clamp(value, lbound, ubound) {
          if (typeof lbound === 'number') {
            value = Math.max(value, lbound);
          }
          if (typeof ubound === 'number') {
            value = Math.min(value, ubound);
          }
          return value;
        },
        snapToZero: function(value, threshold) {
          if (value < threshold) {
            return 0;
          }
          return value;
        },
        sign: function (value) {
         return value >= 0 ? 1 : -1;
        }
      };
    })(window);

    var frameClock = {
      deltaSeconds: 0,
      frameCount: 0,
      lastFrameTime: 0
    };

    function stop() {
      frameClock.running = false;
      document.removeEventListener('keydown', keyboard)
      document.removeEventListener('keyup', keyboard)
    }

    var actorNode, statsNode, statsCtx;

   ...