QSimplePlayer

by Raphael Quintao

HTML

<div id="content"></div>

<div id="debug1" class="debug">Debug 1</div>
<div id="debug2" class="debug">Debug 2</div>
<div id="debug3" class="debug">Debug 3</div>

<div id="square"></div>

CSS

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: #333333;
}

#content {
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  background-color: #4f4f4f;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
  border-radius: 5px;
  overflow: hidden;
  position: absolute;
  margin-top: 20px;
  margin-left: 20px;
  margin-bottom: 20px;
  margin-right: 20px;
  /*background-image: url("https://dl.dropboxusercontent.com/u/2345114/minimal_cool.png");*/
  background-size: cover;
  background-position: center;
}

#content canvas {
  /* background-color: rgba(200, 0, 0, 1); */
  /*width: 100%;*/
  /*height: 100%;*/
}

.debug {
  position: absolute;
  margin: 25px;
  /*background-color: rgba(249, 38, 114, 0.51);*/
  background-color: rgba(225, 225, 225, 0.95);
  padding: 5px 7px;
  border-radius: 5px;
  white-space: pre;
  font-family: monospace;
  font-size: 16px;
}

#debug1 {
  top: 0;
  left: 0;
}

#debug2 {
  top: 0;
  right: 0;
}

#debug3 {
  bottom: 0;
  left: 0;
}

#square {
  width: 400px;
  height: 400px;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  z-index: 100;
  background-color: rgba(255, 0, 169, 0.3);
  position: absolute;
  pointer-events: none;
  display: none;
}

JavaScript

var FPS = function() {
  var beginTime = Date.now(),
    prevTime = beginTime,
    frames = 0;
  var ms = 0;
  var fps = 0;
  var min = Infinity;
  var max = 0;
  var container = document.createElement('div');

  var css = "";
  css += 'position: absolute;';
  css += 'margin: 25px;';
  css += 'background-color: rgba(225, 225, 225, 0.95);';
  css += 'padding: 5px 7px;';
  css += 'border-radius: 5px;';
  css += 'white-space: pre;';
  css += 'font-family: monospace;';
  css += 'font-size: 16px;';
  css += 'right: 0;';
  css += 'bottom: 0;';

  container.style.cssText = css;

  _me = this;

  function update() {
    min = Math.min(min, fps);
    max = Math.max(max, fps);

    container.innerText = "FPS: " + fps + " (" + min + "-" + max + ")\n";
    container.innerText += " MS: " + ms + "\n";
  }

  return {
    dom: container,
    begin: function() {
      beginTime = Date.now();
    },
    end: function() {
      frames++;

      var time = Date.now();

      ms = (time - beginTime);

      if (time > prevTime + 1000) {

        fps = Math.round((frames * 1000) / (time - prevTime));

        update();

        prevTime = time;
        frames = 0;

      }


      return time;
    },
    update: function() {
      beginTime = this.end();
    },
    getFPS: function() {
      return fps;
    }
  }
};

var canvas = {
  container: null,
  el: null,
  w: 0,
  h: 0,
  centerX: 0,
  centerY: 0,
  aspect: 0,
  updateSize: function() {
    this.w = this.el.parentElement.clientWidth;
    this.h = this.el.parentElement.clientHeight;
    this.el.width = this.w;
    this.el.height = this.h;
    this.aspect = this.w / this.h;
    this.centerX = this.w / 2;
    this.centerY = this.h / 2;
    $("#debug3").text("W: " + this.w + "\nH: " + this.h + "\nA: " + this.aspect.toFixed(4));
  },
  init: function(container) {
    this.container = container;
    this.el = document.createElement('canvas');
    this.container.appendChild(this.el);
    this.updateSize();
  }
};

var ctx;
var...