aercolino/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Ship


Original URL: http://jsdo.it/aercolino/ship
Archived at: https://web.archive.org/web/20190610110716/http://jsdo.it/aercolino/ship

This is essentially a refactoring of http://jsdo.it/hakim/core (archive) plus a little improvent on entertainment: core is about shield, while ship is about fire.

  
## core.css
html{color:#000;background:#222222;}
a{cursor:pointer;}
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
li{list-style:none;}
caption,th{text-align:left;}
/* h1,h2,h3,h4,h5,h6{font-size:100%;} */
q:before,q:after{content:'';}
abbr,acronym {border:0;font-variant:normal;}
sup {vertical-align:text-top;}
sub {vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;outline-style:none;outline-width:0pt;}
legend{color:#000;}
a:focus,object,h1,h2,h3,h4,h5,h6{-moz-outline-style: none; border:0px;}
/*input[type="Submit"]{cursor:pointer;}*/
strong {font-weight: bold;}

body {
  overflow: hidden;
  font-family: Helvetica, Arial, sans-serif;
  color: #333333;
  font-size: 11px;
  background-color: #222222;
}

canvas {
  cursor: crosshair;
  z-index: 1;
}

canvas.background {
  z-index: 0;
}

.ui {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  color: #999999;
  text-align: left;
  padding: 8px;
  background-color: rgba(0,0,0,0.5);
  position: absolute;
  z-index: 2;
  margin: 0;
}

#message {
  padding: 16px;
  margin: 130px 0 0 0;
}

#status {
  width: 100%;
  height: 15px;
  padding: 8px;
  display: none;
}

#status .fps {
  position: absolute;
  right: 20px;
  display: inline;
}

#status span {
  color: #bbbbbb;
  font-weight: bold;
  margin-right: 5px;
}

#title {
  margin-bottom: 20px;
  color: #eeeeee;
}

.ui ul {
  margin: 10px 0 10px 0;
}

.ui a {
  outline: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 38px;
  text-decoration: none;
  color: #bbbbbb;
  padding: 2px;
  display: block
}

.ui a:hover {
  color: #ffffff;
  background-color: #000000;
}

## core.html
<canvas id='world'></canvas>
<canvas id='background-canvas' class="background"></canvas>
<div id="status" class="ui"></div>
<div id="message" class="ui">
  <h2 id="title"></h2>
  <ul>
    <li>1. Protect the core.</li>
    <li>2. Gather energy (green dots).</li>
    <li>2. Hold SPACE for shield (depletes energy).</li>
  </ul>
  <a href="#" id="startButton">Start</a>
</div>

## core.js
CoreWorld = new function(){

  // The world dimensions
  var SCREEN_WIDTH = window.innerWidth;
  var SCREEN_HEIGHT = window.innerHeight;

  // Types of organisms
  var ORGANISM_ENEMY = 'enemy';
  var ORGANISM_ENERGY = 'energy';

  // Target framerate
  var FRAMERATE = 60;

  var canvas;
  var context;

  var canvasBackground;
  var contextBackground;

  // UI DOM elements
  var status;
  var message;
  var title;
  var startButton;

  // Game elements
  var organisms = [];
  var particles = [];
  var player;

  // Mouse properties
  var mouseX = (window.innerWidth - SCREEN_WIDTH);
  var mouseY = (window.innerHeight - SCREEN_HEIGHT);
  var mouseIsDown = false;
  var spaceIsDown = false;

  // Game properties and scoring
  var playing = false;
  var score = 0;
  var time = 0;
  var duration = 0;
  var difficulty = 1;
  var lastspawn = 0;

  // The world's velocity
  var velocity = { x: -1.3, y: 1 };

  // Performance (FPS) tracking
  var fps = 0;
  var fpsMin = 1000;
  var fpsMax = 0;
  var timeLastSecond = new Date().getTime();
  var frames = 0;

  /**
   * The SinuousWorld "constructor".
   */
  this.init = function(){

    canvas = document.getElementById('world');
    canvasBackground = document.getElementById('background-canvas');
    status = document.getElementById('status');
    message = document.getElementById('message');
    title = document.getElementById('title');
    startButton = document.getElementById('startButton');

    if (canvas && canvas.getContext) {
      context = canvas.getContext('2d');

      contextBackground = canvasBackground.getContext('2d');

      // Register event listeners
      document.addEventListener('mousemove', documentMouseMoveHandler, false);
      document.addEventListener('mousedown', documentMouseDownHandler, false);
      document.addEventListener('mouseup', documentMouseUpHandler, false);
      canvas.addEventListener('touchstart', documentTouchStartHandler, false);
      document.addEventListener('touchmove', documentTouchMoveHandler, false);
      document.addEventListener('touchend', documentTouchEndHandler, false);
      window.addEventListener('resize', windowResizeHandler, false);
      startButton.addEventListener('click', startButtonClickHandler, false);
      document.addEventListener('keydown', documentKeyDownHandler, false);
      document.addEventListener('keyup', documentKeyUpHandler, false);

      // Define our player
      player = new Player();

      // Force an initial resize to make sure the UI is sized correctly
      windowResizeHandler();

      setInterval(loop, 1000 / FRAMERATE);

      renderBackground();
    }
  };

  /**
   *
   */
  function renderBackground() {
    var gradient = contextBackground.createRadialGradient( SCREEN_WIDTH * 0.5, SCREEN_HEIGHT * 0.5, 0, SCREEN_WIDTH * 0.5, SCREEN_HEIGHT * 0.5, 500 );
    gradient.addColorStop(0,'rgba(0, 70, 70, 1)');
    gradient.addColorStop(1,'rgba(0, 8, 14, 1)');

    contextBackground.fillStyle = gradient;
    contextBackground.fillRect( 0, 0, SCREEN_WIDTH, SCREEN_HEIGHT );
  }

  /**
   * Handles click on the start button in the UI.
   */
  function startButtonClickHandler(event){
    if( playing == false ) {
      playing = true;

      // Reset game properties
      organisms = [];
      score = 0;
      difficulty = 1;

      // Reset the player data
      player.energy = 30;

      // Hide the game UI
      message.style.display = 'none';
      status.style.display = 'block';

      time = new Date().getTime();

      event.preventDefault();
    }
  }

  /**
   * Stops the currently ongoing game and shows the
   * resulting data in the UI.
   */
  function gameOver() {
    playing = false;

    // Determine the duration of the game
    duration = new Date().getTime() - time;

    // Show the UI
    message.style.display = 'block';

    // Ensure that the score is an integer
    score = Math.round(score);

    // Write the users score to the UI
    title.innerHTML = 'Game Over! (' + score + ' points)';

    // Update the status bar with the final score and time
    scoreText = 'Score: <span>' + Math.round( score ) + '</span>';
    scoreText += ' Time: <span>' + Math.round( ( ( new Date().getTime() - time ) / 1000 ) * 100 ) / 100 + 's</span>';
    status.innerHTML = scoreText;
  }

  /**
   *
   */
  function documentKeyDownHandler(event) {
    switch( event.keyCode ) {
      case 32:
        if( !spaceIsDown && player.energy > 15 ) {
          player.energy -= 4;
        }
        spaceIsDown = true;
        event.preventDefault();
        break;
    }
  }

  /**
   *
   */
  function documentKeyUpHandler(event) {
    switch( event.keyCode ) {
      case 32:
        spaceIsDown = false;
        event.preventDefault();
        break;
    }
  }

  /**
   * Event handler for document.onmousemove.
   */
  function documentMouseMoveHandler(event){
    mouseX = event.clientX - (window.innerWidth - SCREEN_WIDTH) * 0.5 - 6;
    mouseY = event.clientY - (window.innerHeight - SCREEN_HEIGHT) * 0.5 - 6;
  }

  /**
   * Event handler for document.onmousedown.
   */
  function documentMouseDownHandler(event){
    mouseIsDown = true;
  }

  /**
   * Event handler for document.onmouseup.
   */
  function documentMouseUpHandler(event) {
    mouseIsDown = false;
  }

  /**
   * Event handler for document.ontouchstart.
   */
  function documentTouchStartHandler(event) {
    if(event.touches.length == 1) {
      event.preventDefault();

      mouseX = event.touches[0].pageX - (window.innerWidth - SCREEN_WIDTH) * 0.5;
      mouseY = event.touches[0].pageY - (window.innerHeight - SCREEN_HEIGHT) * 0.5;

      mouseIsDown = true;
    }
  }

  /**
   * Event handler for document.ontouchmove.
   */
  function documentTouchMoveHandler(event) {
    if(event.touches.length == 1) {
      event.preventDefault();

      mouseX = event.touches[0].pageX - (window.innerWidth - SCREEN_WIDTH) * 0.5 - 60;
      mouseY = event.touches[0].pageY - (window.innerHeight - SCREEN_HEIGHT) * 0.5 - 30;
    }
  }

  /**
   * Event handler for document.ontouchend.
   */
  function documentTouchEndHandler(event) {
    mouseIsDown = false;
  }

  /**
   * Event handler for window.onresize.
   */
  function windowResizeHandler() {
    // Update the game size
    SCREEN_WIDTH = window.innerWidth;
    SCREEN_HEIGHT = window.innerHeight;

    // Center the player
    player.position.x = SCREEN_WIDTH * 0.5;
    player.position.y = SCREEN_HEIGHT * 0.5;

    // Resize the canvas
    canvas.width = SCREEN_WIDTH;
    canvas.height = SCREEN_HEIGHT;
    canvasBackground.width = SCREEN_WIDTH;
    canvasBackground.height = SCREEN_HEIGHT;

    // Determine the x/y position of the canvas
    var cvx = (window.innerWidth - SCREEN_WIDTH) * 0.5;
    var cvy = (window.innerHeight - SCREEN_HEIGHT) * 0.5;

    // Position the canvas
    canvas.style.position = 'absolute';
    canvas.style.left = cvx + 'px';
    canvas.style.top = cvy + 'px';
    canvasBackground.style.position = 'absolute';
    canvasBackground.style.left = cvx + 'px';
    canvasBackground.style.top = cvy + 'px';

  }

  /**
   * Emits a random number of particles from a set point.
   *
   * @param position The point where particles will be
   * emitted from
   * @param spread The pixel spread of the emittal
   */
  function emitParticles( position, direction, spread, seed ) {
    var q = seed + ( Math.random() * seed );

    while( --q >= 0 ) {
      var p = new Point();
      p.position.x = position.x + ( Math.sin(q) * spread );
      p.position.y = position.y + ( Math.cos(q) * spread );
      p.velocity = { x: direction.x + ( -1 + Math.random() * 2 ), y: direction.y + ( - 1 + Math.random() * 2 ) };
      p.alpha = 1;

      particles.push( p );
    }
  }

  /**
   * Called on every frame to update the game properties
   * and render the current state to the canvas.
   */
  function loop() {

    // Fetch the current time for this frame
    var frameTime = new Date().getTime();

    // Increase the frame count
    frames ++;

    // Check if a second has passed since the last time we updated the FPS
    if( frameTime > timeLastSecond + 1000 ) {
      // Establish the current, minimum and maximum FPS
      fps = Math.min( Math.round( ( frames * 1000 ) / ( frameTime - timeLastSecond ) ), FRAMERATE );
      fpsMin = Math.min( fpsMin, fps );
      fpsMax = Math.max( fpsMax, fps );

      timeLastSecond = frameTime;
      frames = 0;
    }

    // A factor by which the score will be scaled, depending on current FPS
    var scoreFactor = 0.01 + ( Math.max( Math.min( fps, FRAMERATE ), 0 ) / FRAMERATE * 0.99 );

    // Scales down the factor by itself
    scoreFactor = scoreFactor * scoreFactor;

    // Clear the canvas of all old pixel data
    context.clearRect(0,0,canvas.width,canvas.height);

    var i, j, ilen, jlen;

    // Only update game properties and draw the player if a game is active
    if( playing ) {

      // Increment the difficulty slightly
      difficulty += 0.0015;

      // Increment the score depending on difficulty
      score += (0.4 * difficulty) * scoreFactor;

      var targetAngle = Math.atan2( mouseY - player.position.y, mouseX - player.position.x );

      if( Math.abs( targetAngle - player.angle ) > Math.PI ) {
        player.angle = targetAngle;
      }

      player.angle += ( targetAngle - player.angle ) * 0.2;

      player.energyRadiusTarget = ( player.energy / 100 ) * ( player.radius * 0.8 );
      player.energyRadius += ( player.energyRadiusTarget - player.energyRadius ) * 0.2;

      player.shield = { x: player.position.x + Math.cos( player.angle ) * player.radius, y: player.position.y + Math.sin( player.angle ) * player.radius };

      // Shield
      context.beginPath();
      context.strokeStyle = '#648d93';
      context.lineWidth = 3;
      context.arc( player.position.x, player.position.y, player.radius, player.angle + 1.6, player.angle - 1.6, true );
      context.stroke();

      // Core
      context.beginPath();
      context.fillStyle = "#249d93";
      context.strokeStyle = "#3be2d4";
      context.lineWidth = 1.5;

      player.updateCore();

      var loopedNodes = player.coreNodes.concat();
      loopedNodes.push( player.coreNodes[0] );

      for( var i = 0; i < loopedNodes.length; i++ ) {
        p = loopedNodes[i];
        p2 = loopedNodes[i+1];

        p.position.x += ( (player.position.x + p.normal.x + p.offset.x) - p.position.x ) * 0.2;
        p.position.y += ( (player.position.y + p.normal.y + p.offset.y) - p.position.y ) * 0.2;

        if( i == 0 ) {
          // This is the first loop, so we need to start by moving into position
          context.moveTo( p.position.x, p.position.y );
        }
        else if( p2 ) {
          // Draw a curve between the current and next trail point
          context.quadraticCurveTo( p.position.x, p.position.y, p.position.x + ( p2.position.x - p.position.x ) / 2, p.position.y + ( p2.position.y - p.position.y ) / 2 );
        }
      }

      context.closePath();
      context.fill();
      context.stroke();

    }

    if( spaceIsDown && player.energy > 10 ) {
      player.energy -= 0.1;

      context.beginPath();
      context.fillStyle = 'rgba( 0, 100, 100, ' + ( player.energy / 100 ) * 0.9 + ' )';
      context.arc( player.position.x, player.position.y, player.radius, 0, Math.PI*2, true );
      context.fill();
    }

    var enemyCount = 0;
    var energyCount = 0;

    // Go through each enemy and draw it + update its properties
    for( i = 0; i < organisms.length; i++ ) {
      p = organisms[i];

      p.position.x += p.velocity.x;
      p.position.y += p.velocity.y;

      p.alpha += ( 1 - p.alpha ) * 0.1;

      if( p.type == ORGANISM_ENEMY ) context.fillStyle = 'rgba( 255, 0, 0, ' + p.alpha + ' )';
      if( p.type == ORGANISM_ENERGY ) context.fillStyle = 'rgba( 0, 235, 190, ' + p.alpha + ' )';

      context.beginPath();
      context.arc(p.position.x, p.position.y, p.size/2, 0, Math.PI*2, true);
      context.fill();

      var angle = Math.atan2( p.position.y - player.position.y, p.position.x - player.position.x );

      if (playing) {

        var dist = Math.abs( angle - player.angle );

        if( dist > Math.PI ) {
          dist = ( Math.PI * 2 ) - dist;
        }

        if ( dist < 1.6 ) {
          if (p.distanceTo(player.position) > player.radius - 5 && p.distanceTo(player.position) < player.radius + 5) {
            p.dead = true;
          }
        }

        if (spaceIsDown && p.distanceTo(player.position) < player.radius && player.energy > 11) {
          p.dead = true;
          score += 4;
        }

        if (p.distanceTo(player.position) < player.energyRadius + (p.size * 0.5)) {
          if (p.type == ORGANISM_ENEMY) {
            player.energy -= 6;
          }

          if (p.type == ORGANISM_ENERGY) {
            player.energy += 8;
            score += 30;
          }

          player.energy = Math.max(Math.min(player.energy, 100), 0);

          p.dead = true;
        }
      }

      // If the enemy is outside of the game bounds, destroy it
      if( p.position.x < -p.size || p.position.x > SCREEN_WIDTH + p.size || p.position.y < -p.size || p.position.y > SCREEN_HEIGHT + p.size ) {
        p.dead = true;
      }

      // If the enemy is dead, remove it
      if( p.dead ) {
        emitParticles( p.position, { x: (p.position.x - player.position.x) * 0.02, y: (p.position.y - player.position.y) * 0.02 }, 5, 5 );

        organisms.splice( i, 1 );
        i --;
      }
      else {
        if( p.type == ORGANISM_ENEMY ) enemyCount ++;
        if( p.type == ORGANISM_ENERGY ) energyCount ++;
      }
    }

    // If there are less enemies than intended for this difficulty, add another one
    if( enemyCount < 1 * difficulty && new Date().getTime() - lastspawn > 100 ) {
      organisms.push( giveLife( new Enemy() ) );
      lastspawn = new Date().getTime();
    }

    //
    if( energyCount < 1 && Math.random() > 0.996 ) {
      organisms.push( giveLife( new Energy() ) );
    }

    // Go through and draw all particle effects
    for( i = 0; i < particles.length; i++ ) {
      p = particles[i];

      // Apply velocity to the particle
      p.position.x += p.velocity.x;
      p.position.y += p.velocity.y;

      // Fade out
      p.alpha -= 0.02;

      // Draw the particle
      context.fillStyle = 'rgba(255,255,255,'+Math.max(p.alpha,0)+')';
      context.fillRect( p.position.x, p.position.y, 1, 1 );

      // If the particle is faded out to less than zero, remove it
      if( p.alpha <= 0 ) {
        particles.splice( i, 1 );
      }
    }

    // If the game is active, update the game status bar with score, duration and FPS
    if( playing ) {
      scoreText = 'Score: <span>' + Math.round( score ) + '</span>';
      scoreText += ' Time: <span>' + Math.round( ( ( new Date().getTime() - time ) / 1000 ) * 100 ) / 100 + 's</span>';
      scoreText += ' <p class="fps">FPS: <span>' + Math.round( fps ) + ' ('+Math.round(Math.max(Math.min(fps/FRAMERATE, FRAMERATE), 0)*100)+'%)</span></p>';
      status.innerHTML = scoreText;

      if( player.energy === 0 ) {
        emitParticles( player.position, { x: 0, y: 0 }, 10, 40 );

        gameOver();
      }
    }
  }

  /**
   *
   */
  function giveLife( organism ) {
    var side = Math.round( Math.random() * 3 );

    switch( side ) {
      case 0:
        organism.position.x = 10;
        organism.position.y = SCREEN_HEIGHT * Math.random();
        break;
      case 1:
        organism.position.x = SCREEN_WIDTH * Math.random();
        organism.position.y = 10;
        break;
      case 2:
        organism.position.x = SCREEN_WIDTH - 10;
        organism.position.y = SCREEN_HEIGHT * Math.random();
        break;
      case 3:
        organism.position.x = SCREEN_WIDTH * Math.random();
        organism.position.y = SCREEN_HEIGHT - 10;
        break;
    }

    organism.speed = Math.min( Math.max( Math.random(), 0.6 ), 0.75 );

    organism.velocity.x = ( player.position.x - organism.position.x ) * 0.006 * organism.speed;
    organism.velocity.y = ( player.position.y - organism.position.y ) * 0.006 * organism.speed;

    if( organism.type == 'enemy' ) {
      organism.velocity.x *= (1+(Math.random()*0.1));
      organism.velocity.y *= (1+(Math.random()*0.1));
    }

    organism.alpha = 0;

    return organism;
  }

};

/**
 *
 */
function Point( x, y ) {
  this.position = { x: x, y: y };
}
Point.prototype.distanceTo = function(p) {
  var dx = p.x-this.position.x;
  var dy = p.y-this.position.y;
  return Math.sqrt(dx*dx + dy*dy);
};
Point.prototype.clonePosition = function() {
  return { x: this.position.x, y: this.position.y };
};

/**
 *
 */
function Player() {
  this.position = { x: 0, y: 0 };
  this.length = 15;
  this.energy = 30;
  this.energyRadius = 0;
  this.energyRadiusTarget = 0;
  this.radius = 60;
  this.angle = 0;
  this.coreQuality = 16;
  this.coreNodes = [];
}

Player.prototype = new Point();

Player.prototype.updateCore = function() {
  var i, j, n;

  if( this.coreNodes.length == 0 ) {
    var i, n;

    for (i = 0; i < this.coreQuality; i++) {
      n = {
        position: { x: this.position.x, y: this.position.y },
        normal: { x: 0, y: 0 },
        normalTarget: { x: 0, y: 0 },
        offset: { x: 0, y: 0 }
      };

      this.coreNodes.push( n );
    }
  }

  for (i = 0; i < this.coreQuality; i++) {

    var n = this.coreNodes[i];

    var angle = ( i / this.coreQuality ) * Math.PI * 2;

    n.normal.x = Math.cos( angle ) * this.energyRadius;
    n.normal.y = Math.sin( angle ) * this.energyRadius;

    n.offset.x = Math.random() * 5;
    n.offset.y = Math.random() * 5;
  }
};

/**
 *
 */
function Enemy() {
  this.position = { x: 0, y: 0 };
  this.velocity = { x: 0, y: 0 };
  this.size = 6 + ( Math.random() * 4 );
  this.speed = 1;
  this.type = 'enemy';
}
Enemy.prototype = new Point();

/**
 *
 */
function Energy() {
  this.position = { x: 0, y: 0 };
  this.velocity = { x: 0, y: 0 };
  this.size = 10 + ( Math.random() * 6 );
  this.speed = 1;
  this.type = 'energy';
}
Energy.prototype = new Point();


CoreWorld.init();

## ship.css
html{color:#000;background:#222222;}
a{cursor:pointer;}
html,body,div,dl,dt,dd,ul,ol,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
caption,th{text-align:left;}
/* h1,h2,h3,h4,h5,h6{font-size:100%;} */
q:before,q:after{content:'';}
abbr,acronym {border:0;font-variant:normal;}
sup {vertical-align:text-top;}
sub {vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;outline-style:none;outline-width:0pt;}
legend{color:#000;}
a:focus,object,h1,h2,h3,h4,h5,h6{-moz-outline-style: none; border:0px;}
/*input[type="Submit"]{cursor:pointer;}*/
strong {font-weight: bold;}

body {
  overflow: hidden;
  font-family: Helvetica, Arial, sans-serif;
  color: #333333;
  font-size: 11px;
  background-color: #222222;
}

canvas {
  cursor: crosshair;
  z-index: 1;
}

canvas.background {
  z-index: 0;
}

.ui {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  color: #999999;
  text-align: left;
  padding: 8px;
  background-color: rgba(0,0,0,0.5);
  position: absolute;
  z-index: 2;
  margin: 0;
}

#message {
  padding: 16px;
  margin: 130px 0 0 0;
}

#status {
  width: 100%;
  height: 15px;
  padding: 8px;
  display: none;
}

#status .fps {
  position: absolute;
  right: 20px;
  display: inline;
}

#status span {
  color: #bbbbbb;
  font-weight: bold;
  margin-right: 5px;
}

#title {
  margin-bottom: 20px;
  color: #eeeeee;
}

.ui ol {
  margin: 10px 0 10px 10px;
}

.ui a {
  outline: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 38px;
  text-decoration: none;
  color: #bbbbbb;
  padding: 2px;
  display: block
}

.ui a:hover {
  color: #ffffff;
  background-color: #000000;
}

## ship.html
<canvas id="world" width="400" height="400"></canvas>
<canvas id="background-canvas" class="background" width="400" height="400"></canvas>
<div id="status" class="ui"></div>
<div id="message" class="ui">
  <h2 id="title"></h2>
  <ol>
    <li>Move the mouse around for rotating the ship.</li>
    <li>Gather energy (green dots).</li>
    <li>Hold SPACE for firing bullets.</li>
  </ol>
  <a href="#" id="startButton">Start</a>
</div>

## ship.js
// forked from hakim's "Core" http://jsdo.it/hakim/core

function random( min, max ) {
    var result = min + (max - min) * Math.random();
    return result;
}

function randomInt( min, max ) {
    // Math.round() gives a non-uniform distribution!
    var result = min + Math.floor((max - min + 1) * Math.random());
    return result;
}

var precision = 0.000000001;

function delta( num1, num2 ) {
    var diff = num1 - num2;
    var result = Math.abs(diff) < precision ? 0 : diff;
    return result;
}

function equal( num1, num2 ) {
    var result = delta(num1, num2) === 0;
    return result;
}

function lesser( num1, num2 ) {
    var result = num1 < num2 && ! equal(num1, num2);
    return result;
}

function lesserOrEqual( num1, num2 ) {
    var result = num1 < num2 || equal(num1, num2);
    return result;
}

function between( num, min, max, equalMin, equalMax ) {
    equalMin = typeof equalMin == 'undefined' ? true : !!equalMin;
    equalMax = typeof equalMax == 'undefined' ? true : !!equalMax;
    var result = true
        && (equalMin ? lesserOrEqual(min, num) : lesser(min, num))
        && (equalMax ? lesserOrEqual(num, max) : lesser(num, max));
    return result;
}

function straightLine( point1, point2 ) {
    //f(x,y) = a*x + b*y + c
    var a = delta(point1.position.y, point2.position.y);
    var b = delta(point2.position.x, point1.position.x);
    var c = point1.position.x*point2.position.y - point2.position.x*point1.position.y;
    function f( p ) {
        return a*p.position.x + b*p.position.y + c;
    }
    //y = m*x + k
    var isParallelToY = equal(b, 0);
    var mX = isParallelToY ? Nan : -(a/b);
    var kX = isParallelToY ? Nan : -(c/b);
    function yX( p ) {
        return mX*p.position.x + kX;
    }
    //x = m*y + k
    var isParallelToX = equal(a, 0);
    var mY = isParallelToX ? Nan : -(b/a);
    var kY = isParallelToX ? Nan : -(c/a);
    function xY( p ) {
        return mY*p.position.y + kY;
    }
    var angle = isParallelToY ? Math.PI/2 : Math.atan(mX);
    var cosAngle = Math.cos(angle);
    var sinAngle = Math.sin(angle);
    function compareParallel( pointP, axis, distance ) {
        axis = axis != 'y' && axis != 'x' ? 'y' : axis;
        distance = typeof distance == 'undefined' ? 0 : distance;
        switch (axis) {
            case 'x': //y is given
                if (isParallelToX) return Nan;
                var xYP = xY(pointP) + distance / Math.abs(sinAngle);
                if (lesser(pointP.position.x, xYP))
                    return -1;
                if (equal(pointP.position.x, xYP))
                    return 0;
                return +1;
            break;
            case 'y': //x is given
                if (isParallelToY) return Nan;
                var yXP = yX(pointP) + distance / Math.abs(cosAngle);
                if (lesser(pointP.position.y, yXP))
                    return -1;
                if (equal(pointP.position.y, yXP))
                    return 0;
                return +1;
            break;
            default:
            break;
        }
    }

    return {
        implicit: function() {
            return {a: a, b: b, c: c};
        },
        explicitX: function() {
            return {m: mX, k: kX, isParallelToY: isParallelToY, x: point1.position.x};
        },
        explicitY: function() {
            return {m: mY, k: kY, isParallelToX: isParallelToX, y: point1.position.y};
        },
        parallelAxis: function() {
            return isParallelToX ? 'x' : (isParallelToY ? 'y': '');
        },
        contains: function( pointP ) {
            return equal(f(pointP), 0);
        },
        compare: compareParallel
    };
}


game = new function() {

    //===============================================================READ ONLY==

    var spaceIsDown = false;
    this.isSpaceDown = function() {
        return spaceIsDown;
    };

    var playing = false;
    this.isPlaying = function() {
        return playing;
    };

    var context = null;
    this.getContext = function()
    {
        return context;
    };

    var ship = null;
    this.getShip = function()
    {
        return ship;
    };

    var level = 1;
    this.getLevel = function()
    {
        return level;
    };

    //==============================================================WRITE ONLY==

    var score = 0;
    this.incrementScore = function( value )
    {
        score += value;
    };

    var particles = [];
    this.addParticles = function( position, spread, seed, direction ) {
        var q = randomInt(seed, 2*seed);
        while (--q >= 0) {
            var p = new Particle(position, spread, q, direction);
            particles.push(p);
        }
    };

    //==================================================================PUBLIC==

    this.init = function() {

        canvas = document.getElementById('world');
        canvasBackground = document.getElementById('background-canvas');
        status = document.getElementById('status');
        message = document.getElementById('message');
        title = document.getElementById('title');
        startButton = document.getElementById('startButton');

        if (canvas && canvas.getContext) {
            context = canvas.getContext('2d');
            contextBackground = canvasBackground.getContext('2d');

            document.addEventListener('mousemove', documentMouseMoveHandler, false);
            canvas.addEventListener('touchstart', documentTouchStartHandler, false);
            document.addEventListener('touchmove', documentTouchMoveHandler, false);
            window.addEventListener('resize', windowResizeHandler, false);
            startButton.addEventListener('click', startButtonClickHandler, false);
            document.addEventListener('keydown', documentKeyDownHandler, false);
            document.addEventListener('keyup', documentKeyUpHandler, false);

            ship = new Ship(canvas.width/2, canvas.height/2);
            //shield = new Shield(Math.PI/2);

            windowResizeHandler();
            renderBackground();
            setInterval(loop, SECOND / FRAMERATE);
        }
    };

    var bullets = [];
    this.getBullets = function() {
        return bullets.concat();
    };
    this.addBullets = function( position, direction ) {
        var q = 2;
        while (--q >= 0) {
            var p = new Bullet(position, direction);
            bullets.push(p);
        }
    };

    //=================================================================PRIVATE==

    var SECOND = 1000;
    var FRAMERATE = 60;

    var canvas;
    var canvasBackground;
    var contextBackground;

    // UI DOM elements
    var status;
    var message;
    var title;
    var startButton;

    // Mouse properties
    var mouseX = 0;
    var mouseY = 0;
    var mouseIsDown = false;

    // Game properties
    var startTime = 0;
    var frameTime = 0;
    var organisms = [];
    var prevEnemyTime = 0;

    // Performance (FPS) tracking
    var fps = 0;
    var prevSecondTime = new Date().getTime();
    var frames = 0;

    function windowResizeHandler() {
        var left = (window.innerWidth - canvas.width) / 2;
        var top = (window.innerHeight - canvas.height) / 2;
        canvas.style.position = 'absolute';
        canvas.style.left = left + 'px';
        canvas.style.top = top + 'px';
        canvasBackground.style.position = 'absolute';
        canvasBackground.style.left = left + 'px';
        canvasBackground.style.top = top + 'px';
    }

    function renderBackground() {
        var gradient = contextBackground.createRadialGradient(
            canvas.width/2, canvas.height/2, 0,
            canvas.width/2, canvas.height/2, 500);
        gradient.addColorStop(0, 'rgba(0, 70, 70, 1)');
        gradient.addColorStop(1, 'rgba(0, 8, 14, 1)');

        contextBackground.fillStyle = gradient;
        contextBackground.fillRect(0, 0, canvas.width, canvas.height);
    }

    //--------------------------------------------------------------------------

    function documentKeyDownHandler( event ) {
        switch (event.keyCode) {
        case 32:
            event.preventDefault();
            spaceIsDown = true;
            break;
        default:
            break;
        }
    }

    function documentKeyUpHandler( event ) {
        switch (event.keyCode) {
        case 32:
            event.preventDefault();
            spaceIsDown = false;
            break;
        default:
            break;
        }
    }

    function documentMouseMoveHandler( event ) {
        mouseX = event.clientX;
        mouseY = event.clientY;
    }

    function documentTouchStartHandler( event ) {
        if (event.touches.length == 1) {
            event.preventDefault();

            mouseX = event.touches[0].pageX;
            mouseY = event.touches[0].pageY;
        }
    }

    function documentTouchMoveHandler( event ) {
        if (event.touches.length == 1) {
            event.preventDefault();

            mouseX = event.touches[0].pageX;
            mouseY = event.touches[0].pageY;
        }
    }

    function startButtonClickHandler( event ) {
        event.preventDefault();
        if (!playing) {
            organisms = [];
            score = 0;
            level = 1;
            ship.energy = 30;
            message.style.display = 'none';
            status.style.display = 'block';
            startTime = new Date().getTime();
            playing = true;
        }
    }

    //--------------------------------------------------------------------------

    function drawParticles() {
        for (var i = 0, iTop = particles.length; i < iTop; i++) {
            p = particles[i];
            p.draw();
            if (p.alpha === 0) {
                particles.splice(i, 1);
                i--;
                iTop--;
            }
        }
    }

    function drawBullets() {
        for (var i = 0, iTop = bullets.length; i < iTop; i++) {
            p = bullets[i];
            p.draw();
            if (p.dead) {
                bullets.splice(i, 1);
                i--;
                iTop--;
            }
        }
    }

    function drawOrganisms() {
        var enemyCount = 0;
        var energyCount = 0;
        for (var i = 0, iTop = organisms.length; i < iTop; i++) {
            p = organisms[i];
            p.draw();
            if (p.dead) {
                p.explode();
                organisms.splice(i, 1);
                i--;
                iTop--;
            }
            else {
                if (p instanceof Enemy)  enemyCount++;
                if (p instanceof Energy) energyCount++;
            }
        }
        if (enemyCount < level && frameTime - prevEnemyTime > 100) {
            organisms.push(new Enemy());
            prevEnemyTime = frameTime;
        }
        if (energyCount < 1 && Math.random() > 0.996) {
            organisms.push(new Energy());
        }
    }

    function currentFPS() {
        frames++;
        if (frameTime > prevSecondTime + SECOND) {
            fps = frames / (frameTime - prevSecondTime) * SECOND;
            prevSecondTime = frameTime;
            frames = 0;
        }
        return fps;
    }

    /**
     * http://www.mredkj.com/javascript/numberFormat.html
     */
    function addCommas(nStr) {
        nStr += '';
        x = nStr.split('.');
        x1 = x[0];
        x2 = x.length > 1 ? '.' + x[1] : '';
        var rgx = /(\d+)(\d{3})/;
        while (rgx.test(x1)) {
            x1 = x1.replace(rgx, '$1' + ',' + '$2');
        }
        return x1 + x2;
    }

    function updateStatus() {
        var duration = ((frameTime - startTime) / SECOND);
        var text = 'Score: <span>' + addCommas(score.toFixed(0)) + '</span>';
        text += ' Time: <span>' + duration.toFixed(2) + 's</span>';
        text += ' Level: <span>' + level.toFixed(0) + '</span>';
        if (playing) {
            text += ' <p class="fps">FPS: <span>' + currentFPS().toFixed(0) + '</span></p>';
        }
        status.innerHTML = text;
    }

    function gameOver() {
        playing = false;
        updateStatus();
        title.innerHTML = 'Game Over!';
        message.style.display = 'block';
    }

    function loop() {
        frameTime = new Date().getTime();
        context.clearRect(0, 0, canvas.width, canvas.height);
        if (playing) {
            level += 0.0015;
            score += 9 * level;
            ship.draw(mouseX, mouseY);
            if (spaceIsDown) {
                ship.fire();
            }
            drawBullets();
            updateStatus();
            if (ship.energy === 0) {
                ship.explode();
                gameOver();
            }
        }
        //draw organisms even if not playing, so that it works as a demo
        drawOrganisms();
        //draw partiles even if not playing, so that ship particles are drawn after game over
        drawParticles();
    }

};

//******************************************************************************

Point = Class.extend({
    init: function( x, y ) {
        this.context = game.getContext();
        this.position = {
            x: x || 0,
            y: y || 0
        };
    },
    distanceTo: function( p ) {
        var dx = p.position.x - this.position.x;
        var dy = p.position.y - this.position.y;
        return Math.sqrt(dx * dx + dy * dy);
    },
    scale: function( factor ) {
        factor = typeof factor == 'undefined' ? 1 : factor;

        var xP = this.position.x;
        var yP = this.position.y;
        var xPS = xP * factor;
        var yPS = yP * factor;
        var result = new Point(xPS, yPS);
        return result;
    },
    reverseScale: function( factor ) {
        factor = typeof factor == 'undefined' ? 1 : factor;

        var xPS = this.position.x;
        var yPS = this.position.y;
        var xP = xPS / factor;
        var yP = yPS / factor;
        var result = new Point(xP, yP);
        return result;
    },
    rotate: function( theta ) {
        theta = typeof theta == 'undefined' ? 0 : theta;

        var sin = Math.sin(theta);
        var cos = Math.cos(theta);
        var xP = this.position.x;
        var yP = this.position.y;
        var xPR =  xP * cos + yP * sin;
        var yPR = -xP * sin + yP * cos;
        var result = new Point(xPR, yPR);
        return result;
    },
    reverseRotate: function( theta ) {
        theta = typeof theta == 'undefined' ? 0 : theta;

        var sin = Math.sin(theta);
        var cos = Math.cos(theta);
        var xPR = this.position.x;
        var yPR = this.position.y;
        var xP = xPR * cos - yPR * sin;
        var yP = xPR * sin + yPR * cos;
        var result = new Point(xP, yP);
        return result;
    },
    translate: function( origin ) {
        origin = origin || new Point(0, 0);

        var xP = this.position.x;
        var yP = this.position.y;
        var xPT = xP - origin.position.x;
        var yPT = yP - origin.position.y;
        var result = new Point(xPT, yPT);
        return result;
    },
    reverseTranslate: function( origin ) {
        origin = origin || new Point(0, 0);

        var xPT = this.position.x;
        var yPT = this.position.y;
        var xP = xPT + origin.position.x;
        var yP = yPT + origin.position.y;
        var result = new Point(xP, yP);
        return result;
    },
    transformTRS: function( origin, theta, factor ) {
        /*
        var xP = pointP.position.x;
        var yP = pointP.position.y;

        origin = origin || new Point(0, 0);
        var xPT = xP - origin.position.x;
        var yPT = yP - origin.position.y;

        theta = typeof theta == 'undefined' ? 0 : theta;
        var sinTheta = Math.sin(theta);
        var cosTheta = Math.cos(theta);
        var xPTR =  xPT * cosTheta + yPT * sinTheta;
        var yPTR = -xPT * sinTheta + yPT * cosTheta;

        factor = typeof factor == 'undefined' ? 1 : factor;
        var xPTRS = factor * xPTR;
        var yPTRS = factor * yPTR;

        var result = new Point(xPTRS, yPTRS);
        return result;
        */
        var PT = this.translate(origin);
        var PTR = PT.rotate(theta);
        var PTRS = PTR.scale();
        return PTRS;
    },
    reverseTransformTRS: function( origin, theta, factor ) {
        var PTR = this.reverseScale(factor);
        var PT = PTR.reverseRotate(theta);
        var P = PT.reverseTranslate(origin);
        return P;
    }
});

//------------------------------------------------------------------------------

Ship = Point.extend({
    init: function( x, y ) {
        this._super(x, y);

        this.energy = 60;
        this.radius = 30;
        this.angle1 = 1/5*Math.PI;
        this.angle2 = 1/2*Math.PI;
        var X1 = this.radius * Math.sin(this.angle1/2);
        var X2 = this.radius * Math.sin(this.angle2/2);
        var Y1 = this.radius * Math.cos(this.angle1/2);
        var Y2 = this.radius * Math.cos(this.angle2/2);
        this.pointA = new Point(- X1, - Y1);
        this.pointB = new Point(+ X1, - Y1);
        this.pointC = new Point(+ X2, + Y2);
        this.pointD = new Point(- X2, + Y2);
        this.angle = 0;
        this.slDA = straightLine(this.pointD, this.pointA);
        this.slBC = straightLine(this.pointB, this.pointC);
        this.alpha = 0;
        this.head = new Point(0, this.pointA.position.y);
    },
    draw: function(mouseX, mouseY) {
        var targetAlpha = (this.energy / 100);
        this.alpha += (targetAlpha - this.alpha) * 0.2;

        var targetAngle = Math.atan2(mouseY - window.innerHeight/2, mouseX - window.innerWidth/2);
        targetAngle += 1/2*Math.PI;
        if (Math.abs(targetAngle - this.angle) > Math.PI) {
            this.angle = targetAngle;
        }
        else {
            this.angle += (targetAngle - this.angle) * 0.4;
        }
        this.context.save();

        this.context.translate(this.position.x, this.position.y);
        this.context.rotate(this.angle);

        this.context.beginPath();
        this.context.moveTo(this.pointA.position.x, this.pointA.position.y);
        this.context.lineTo(this.pointB.position.x, this.pointB.position.y);
        this.context.lineTo(this.pointC.position.x, this.pointC.position.y);
        this.context.lineTo(this.pointD.position.x, this.pointD.position.y);
        this.context.closePath();

        this.context.fillStyle = 'rgba( 36, 157, 147, ' + this.alpha + ' )';
        this.context.fill();

        this.context.lineWidth = 1.5;
        this.context.strokeStyle = "#3be2d4";
        this.context.stroke();

        this.context.restore();
    },
    increment: function( value ) {
        this.energy = Math.min(Math.max(this.energy + value, 0), 100);
    },
    isHitting: function( organism ) {
        var pointP = organism.transformTRS(this, this.angle);
        var size = organism.size/2;
        var result = between(pointP.position.y, this.pointA.position.y - size, this.pointD.position.y + size)
            && this.slDA.compare(pointP, 'x', -size) >= 0
            && this.slBC.compare(pointP, 'x', +size) <= 0;
        return result;
    },
    explode: function() {
        game.addParticles(this.position, 10, 40);
    },
    fire: function() {
        var head = this.head.reverseTransformTRS(this, this.angle);
        game.addBullets(this.position, {
            x: (head.position.x - this.position.x) * 0.2,
            y: (head.position.y - this.position.y) * 0.2
        });
    }
});

//------------------------------------------------------------------------------

Organism = Point.extend({
    init: function() {
        this.canvas = game.getContext().canvas;
        this.ship = game.getShip();

        var side = randomInt(0, 3);
        switch (side) {
        case 0:
            this._super(10, randomInt(0, this.canvas.height));
            break;
        case 1:
            this._super(randomInt(0, this.canvas.width), 10);
            break;
        case 2:
            this._super(this.canvas.width - 10, randomInt(0, this.canvas.height));
            break;
        case 3:
            this._super(randomInt(0, this.canvas.width), this.canvas.height - 10);
            break;
        default:
            break;
        }

        var speed = 0.006 * random(0.6, 0.75);
        this.velocity = {
            x: (this.ship.position.x - this.position.x) * speed,
            y: (this.ship.position.y - this.position.y) * speed
        };

        this.alpha = 0;
    },
    draw: function() {
        this.position.x += this.velocity.x;
        this.position.y += this.velocity.y;
        this.incrementAlpha((1 - this.alpha) * 0.1);

        this.context.beginPath();
        this.context.fillStyle = this.fillStyle();
        this.context.arc(this.position.x, this.position.y, this.size/2, 0, Math.PI*2);
        this.context.fill();

        this.checkAlive();
    },
    incrementAlpha: function( value ) {
        this.alpha = Math.min(Math.max(this.alpha + value, 0), 1);
    },
    isLost: function() {
        return false
            || this.position.x < 0 - this.size || this.position.x > this.canvas.width  + this.size
            || this.position.y < 0 - this.size || this.position.y > this.canvas.height + this.size;
    },
    checkAlive: function() {
        if (game.isPlaying()) {
            if (this.ship.isHitting(this)) {
                this.exchangeEnergy();
                this.dead = true;
            }
            var bullets = game.getBullets();
            for (var i = 0, iTop = bullets.length; i < iTop; i++) {
                var p = bullets[i];
                if (p.isHitting(this)) {
                    game.incrementScore(50);
                    this.dead = true;
                }
            }
        }
        if (this.isLost()) {
            this.dead = true;
        }
    },
    explode: function() {
        game.addParticles(this.position, 5, 5, {
            x: (this.position.x - this.ship.position.x) * 0.02,
            y: (this.position.y - this.ship.position.y) * 0.02
        });
    }
});

//------------------------------------------------------------------------------

Enemy = Organism.extend({
    init: function() {
        this._super();
        this.velocity.x *= random(1, 1.1);
        this.velocity.y *= random(1, 1.1);
        this.size = random(6, 10);
    },
    fillStyle: function() {
        return 'rgba( 255, 0, 0, ' + this.alpha + ' )';
    },
    exchangeEnergy: function() {
        game.getShip().increment(-6);
    }
});

//------------------------------------------------------------------------------

Energy = Organism.extend({
    init: function() {
        this._super();
        this.size = random(10, 16);
    },
    fillStyle: function() {
        return 'rgba( 0, 235, 190, ' + this.alpha + ' )';
    },
    exchangeEnergy: function() {
        game.getShip().increment(8);
        game.incrementScore(30);
    }
});

//------------------------------------------------------------------------------

Particle = Point.extend({
    init: function( position, spread, q, direction ) {
        this._super(
            position.x + (Math.sin(q) * spread),
            position.y + (Math.cos(q) * spread));

        direction = typeof direction == 'undefined' ? {x: 0, y: 0} : direction;
        this.velocity = {
            x: direction.x + random(-1, 1),
            y: direction.y + random(-1, 1)
        };
        this.alpha = 1;
    },
    draw: function() {
        this.position.x += this.velocity.x;
        this.position.y += this.velocity.y;
        this.incrementAlpha(-0.02);

        this.context.fillStyle = "#FFFFFF";
        this.context.fillRect(this.position.x, this.position.y, 1, 1);
    },
    incrementAlpha: function( value ) {
        this.alpha = Math.min(Math.max(this.alpha + value, 0), 1);
    }
});

//------------------------------------------------------------------------------

Bullet = Point.extend({
    init: function( position, direction ) {
        this.canvas = game.getContext().canvas;

        this._super(position.x, position.y);
        this.velocity = {
            x: direction.x * 2,
            y: direction.y * 2
        };
        this.size = 2;
        this.dead = false;
    },
    draw: function() {
        this.position.x += this.velocity.x;
        this.position.y += this.velocity.y;

        this.context.fillStyle = 'rgba(255,255,255,1)';
        this.context.fillRect(this.position.x, this.position.y, this.size, this.size);

        this.checkAlive();
    },
    isLost: function() {
        return false
            || this.position.x < 0 - this.size || this.position.x > this.canvas.width  + this.size
            || this.position.y < 0 - this.size || this.position.y > this.canvas.height + this.size;
    },
    checkAlive: function() {
        if (this.isLost()) {
            this.dead = true;
        }
    },
    isHitting: function( organism ) {
        var result = this.distanceTo(organism) <= this.size/2 + organism.size/2;
        return result;
    }
});

//------------------------------------------------------------------------------

game.init();
	html{color:#000;background:#222222;}
	a{cursor:pointer;}
	html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
	table{border-collapse:collapse;border-spacing:0;}
	fieldset,img{border:0;}
	address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
	li{list-style:none;}
	caption,th{text-align:left;}
	/* h1,h2,h3,h4,h5,h6{font-size:100%;} */
	q:before,q:after{content:'';}
	abbr,acronym {border:0;font-variant:normal;}
	sup {vertical-align:text-top;}
	sub {vertical-align:text-bottom;}
	input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;outline-style:none;outline-width:0pt;}
	legend{color:#000;}
	a:focus,object,h1,h2,h3,h4,h5,h6{-moz-outline-style: none; border:0px;}
	/input[type="Submit"]{cursor:pointer;}/
	strong {font-weight: bold;}

	body {
	overflow: hidden;
	font-family: Helvetica, Arial, sans-serif;
	color: #333333;
	font-size: 11px;
	background-color: #222222;
	}

	canvas {
	cursor: crosshair;
	z-index: 1;
	}

	canvas.background {
	z-index: 0;
	}

	.ui {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #999999;
	text-align: left;
	padding: 8px;
	background-color: rgba(0,0,0,0.5);
	position: absolute;
	z-index: 2;
	margin: 0;
	}

	#message {
	padding: 16px;
	margin: 130px 0 0 0;
	}

	#status {
	width: 100%;
	height: 15px;
	padding: 8px;
	display: none;
	}

	#status .fps {
	position: absolute;
	right: 20px;
	display: inline;
	}

	#status span {
	color: #bbbbbb;
	font-weight: bold;
	margin-right: 5px;
	}

	#title {
	margin-bottom: 20px;
	color: #eeeeee;
	}

	.ui ul {
	margin: 10px 0 10px 0;
	}

	.ui a {
	outline: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 38px;
	text-decoration: none;
	color: #bbbbbb;
	padding: 2px;
	display: block
	}

	.ui a:hover {
	color: #ffffff;
	background-color: #000000;
	}
	<canvas id='world'></canvas>
	<canvas id='background-canvas' class="background"></canvas>
	<div id="status" class="ui"></div>
	<div id="message" class="ui">
	<h2 id="title"></h2>
	<ul>
	<li>1. Protect the core.</li>
	<li>2. Gather energy (green dots).</li>
	<li>2. Hold SPACE for shield (depletes energy).</li>
	</ul>
	<a href="#" id="startButton">Start</a>
	</div>
	CoreWorld = new function(){

	// The world dimensions
	var SCREEN_WIDTH = window.innerWidth;
	var SCREEN_HEIGHT = window.innerHeight;

	// Types of organisms
	var ORGANISM_ENEMY = 'enemy';
	var ORGANISM_ENERGY = 'energy';

	// Target framerate
	var FRAMERATE = 60;

	var canvas;
	var context;

	var canvasBackground;
	var contextBackground;

	// UI DOM elements
	var status;
	var message;
	var title;
	var startButton;

	// Game elements
	var organisms = [];
	var particles = [];
	var player;

	// Mouse properties
	var mouseX = (window.innerWidth - SCREEN_WIDTH);
	var mouseY = (window.innerHeight - SCREEN_HEIGHT);
	var mouseIsDown = false;
	var spaceIsDown = false;

	// Game properties and scoring
	var playing = false;
	var score = 0;
	var time = 0;
	var duration = 0;
	var difficulty = 1;
	var lastspawn = 0;

	// The world's velocity
	var velocity = { x: -1.3, y: 1 };

	// Performance (FPS) tracking
	var fps = 0;
	var fpsMin = 1000;
	var fpsMax = 0;
	var timeLastSecond = new Date().getTime();
	var frames = 0;

	/**
	* The SinuousWorld "constructor".
	*/
	this.init = function(){

	canvas = document.getElementById('world');
	canvasBackground = document.getElementById('background-canvas');
	status = document.getElementById('status');
	message = document.getElementById('message');
	title = document.getElementById('title');
	startButton = document.getElementById('startButton');

	if (canvas && canvas.getContext) {
	context = canvas.getContext('2d');

	contextBackground = canvasBackground.getContext('2d');

	// Register event listeners
	document.addEventListener('mousemove', documentMouseMoveHandler, false);
	document.addEventListener('mousedown', documentMouseDownHandler, false);
	document.addEventListener('mouseup', documentMouseUpHandler, false);
	canvas.addEventListener('touchstart', documentTouchStartHandler, false);
	document.addEventListener('touchmove', documentTouchMoveHandler, false);
	document.addEventListener('touchend', documentTouchEndHandler, false);
	window.addEventListener('resize', windowResizeHandler, false);
	startButton.addEventListener('click', startButtonClickHandler, false);
	document.addEventListener('keydown', documentKeyDownHandler, false);
	document.addEventListener('keyup', documentKeyUpHandler, false);

	// Define our player
	player = new Player();

	// Force an initial resize to make sure the UI is sized correctly
	windowResizeHandler();

	setInterval(loop, 1000 / FRAMERATE);

	renderBackground();
	}
	};

	/**
	*
	*/
	function renderBackground() {
	var gradient = contextBackground.createRadialGradient( SCREEN_WIDTH * 0.5, SCREEN_HEIGHT * 0.5, 0, SCREEN_WIDTH * 0.5, SCREEN_HEIGHT * 0.5, 500 );
	gradient.addColorStop(0,'rgba(0, 70, 70, 1)');
	gradient.addColorStop(1,'rgba(0, 8, 14, 1)');

	contextBackground.fillStyle = gradient;
	contextBackground.fillRect( 0, 0, SCREEN_WIDTH, SCREEN_HEIGHT );
	}

	/**
	* Handles click on the start button in the UI.
	*/
	function startButtonClickHandler(event){
	if( playing == false ) {
	playing = true;

	// Reset game properties
	organisms = [];
	score = 0;
	difficulty = 1;

	// Reset the player data
	player.energy = 30;

	// Hide the game UI
	message.style.display = 'none';
	status.style.display = 'block';

	time = new Date().getTime();

	event.preventDefault();
	}
	}

	/**
	* Stops the currently ongoing game and shows the
	* resulting data in the UI.
	*/
	function gameOver() {
	playing = false;

	// Determine the duration of the game
	duration = new Date().getTime() - time;

	// Show the UI
	message.style.display = 'block';

	// Ensure that the score is an integer
	score = Math.round(score);

	// Write the users score to the UI
	title.innerHTML = 'Game Over! (' + score + ' points)';

	// Update the status bar with the final score and time
	scoreText = 'Score: <span>' + Math.round( score ) + '</span>';
	scoreText += ' Time: <span>' + Math.round( ( ( new Date().getTime() - time ) / 1000 ) * 100 ) / 100 + 's</span>';
	status.innerHTML = scoreText;
	}

	/**
	*
	*/
	function documentKeyDownHandler(event) {
	switch( event.keyCode ) {
	case 32:
	if( !spaceIsDown && player.energy > 15 ) {
	player.energy -= 4;
	}
	spaceIsDown = true;
	event.preventDefault();
	break;
	}
	}

	/**
	*
	*/
	function documentKeyUpHandler(event) {
	switch( event.keyCode ) {
	case 32:
	spaceIsDown = false;
	event.preventDefault();
	break;
	}
	}

	/**
	* Event handler for document.onmousemove.
	*/
	function documentMouseMoveHandler(event){
	mouseX = event.clientX - (window.innerWidth - SCREEN_WIDTH) * 0.5 - 6;
	mouseY = event.clientY - (window.innerHeight - SCREEN_HEIGHT) * 0.5 - 6;
	}

	/**
	* Event handler for document.onmousedown.
	*/
	function documentMouseDownHandler(event){
	mouseIsDown = true;
	}

	/**
	* Event handler for document.onmouseup.
	*/
	function documentMouseUpHandler(event) {
	mouseIsDown = false;
	}

	/**
	* Event handler for document.ontouchstart.
	*/
	function documentTouchStartHandler(event) {
	if(event.touches.length == 1) {
	event.preventDefault();

	mouseX = event.touches[0].pageX - (window.innerWidth - SCREEN_WIDTH) * 0.5;
	mouseY = event.touches[0].pageY - (window.innerHeight - SCREEN_HEIGHT) * 0.5;

	mouseIsDown = true;
	}
	}

	/**
	* Event handler for document.ontouchmove.
	*/
	function documentTouchMoveHandler(event) {
	if(event.touches.length == 1) {
	event.preventDefault();

	mouseX = event.touches[0].pageX - (window.innerWidth - SCREEN_WIDTH) * 0.5 - 60;
	mouseY = event.touches[0].pageY - (window.innerHeight - SCREEN_HEIGHT) * 0.5 - 30;
	}
	}

	/**
	* Event handler for document.ontouchend.
	*/
	function documentTouchEndHandler(event) {
	mouseIsDown = false;
	}

	/**
	* Event handler for window.onresize.
	*/
	function windowResizeHandler() {
	// Update the game size
	SCREEN_WIDTH = window.innerWidth;
	SCREEN_HEIGHT = window.innerHeight;

	// Center the player
	player.position.x = SCREEN_WIDTH * 0.5;
	player.position.y = SCREEN_HEIGHT * 0.5;

	// Resize the canvas
	canvas.width = SCREEN_WIDTH;
	canvas.height = SCREEN_HEIGHT;
	canvasBackground.width = SCREEN_WIDTH;
	canvasBackground.height = SCREEN_HEIGHT;

	// Determine the x/y position of the canvas
	var cvx = (window.innerWidth - SCREEN_WIDTH) * 0.5;
	var cvy = (window.innerHeight - SCREEN_HEIGHT) * 0.5;

	// Position the canvas
	canvas.style.position = 'absolute';
	canvas.style.left = cvx + 'px';
	canvas.style.top = cvy + 'px';
	canvasBackground.style.position = 'absolute';
	canvasBackground.style.left = cvx + 'px';
	canvasBackground.style.top = cvy + 'px';

	}

	/**
	* Emits a random number of particles from a set point.
	*
	* @param position The point where particles will be
	* emitted from
	* @param spread The pixel spread of the emittal
	*/
	function emitParticles( position, direction, spread, seed ) {
	var q = seed + ( Math.random() * seed );

	while( --q >= 0 ) {
	var p = new Point();
	p.position.x = position.x + ( Math.sin(q) * spread );
	p.position.y = position.y + ( Math.cos(q) * spread );
	p.velocity = { x: direction.x + ( -1 + Math.random() * 2 ), y: direction.y + ( - 1 + Math.random() * 2 ) };
	p.alpha = 1;

	particles.push( p );
	}
	}

	/**
	* Called on every frame to update the game properties
	* and render the current state to the canvas.
	*/
	function loop() {

	// Fetch the current time for this frame
	var frameTime = new Date().getTime();

	// Increase the frame count
	frames ++;

	// Check if a second has passed since the last time we updated the FPS
	if( frameTime > timeLastSecond + 1000 ) {
	// Establish the current, minimum and maximum FPS
	fps = Math.min( Math.round( ( frames * 1000 ) / ( frameTime - timeLastSecond ) ), FRAMERATE );
	fpsMin = Math.min( fpsMin, fps );
	fpsMax = Math.max( fpsMax, fps );

	timeLastSecond = frameTime;
	frames = 0;
	}

	// A factor by which the score will be scaled, depending on current FPS
	var scoreFactor = 0.01 + ( Math.max( Math.min( fps, FRAMERATE ), 0 ) / FRAMERATE * 0.99 );

	// Scales down the factor by itself
	scoreFactor = scoreFactor * scoreFactor;

	// Clear the canvas of all old pixel data
	context.clearRect(0,0,canvas.width,canvas.height);

	var i, j, ilen, jlen;

	// Only update game properties and draw the player if a game is active
	if( playing ) {

	// Increment the difficulty slightly
	difficulty += 0.0015;

	// Increment the score depending on difficulty
	score += (0.4 * difficulty) * scoreFactor;

	var targetAngle = Math.atan2( mouseY - player.position.y, mouseX - player.position.x );

	if( Math.abs( targetAngle - player.angle ) > Math.PI ) {
	player.angle = targetAngle;
	}

	player.angle += ( targetAngle - player.angle ) * 0.2;

	player.energyRadiusTarget = ( player.energy / 100 ) * ( player.radius * 0.8 );
	player.energyRadius += ( player.energyRadiusTarget - player.energyRadius ) * 0.2;

	player.shield = { x: player.position.x + Math.cos( player.angle ) * player.radius, y: player.position.y + Math.sin( player.angle ) * player.radius };

	// Shield
	context.beginPath();
	context.strokeStyle = '#648d93';
	context.lineWidth = 3;
	context.arc( player.position.x, player.position.y, player.radius, player.angle + 1.6, player.angle - 1.6, true );
	context.stroke();

	// Core
	context.beginPath();
	context.fillStyle = "#249d93";
	context.strokeStyle = "#3be2d4";
	context.lineWidth = 1.5;

	player.updateCore();

	var loopedNodes = player.coreNodes.concat();
	loopedNodes.push( player.coreNodes[0] );

	for( var i = 0; i < loopedNodes.length; i++ ) {
	p = loopedNodes[i];
	p2 = loopedNodes[i+1];

	p.position.x += ( (player.position.x + p.normal.x + p.offset.x) - p.position.x ) * 0.2;
	p.position.y += ( (player.position.y + p.normal.y + p.offset.y) - p.position.y ) * 0.2;

	if( i == 0 ) {
	// This is the first loop, so we need to start by moving into position
	context.moveTo( p.position.x, p.position.y );
	}
	else if( p2 ) {
	// Draw a curve between the current and next trail point
	context.quadraticCurveTo( p.position.x, p.position.y, p.position.x + ( p2.position.x - p.position.x ) / 2, p.position.y + ( p2.position.y - p.position.y ) / 2 );
	}
	}

	context.closePath();
	context.fill();
	context.stroke();

	}

	if( spaceIsDown && player.energy > 10 ) {
	player.energy -= 0.1;

	context.beginPath();
	context.fillStyle = 'rgba( 0, 100, 100, ' + ( player.energy / 100 ) * 0.9 + ' )';
	context.arc( player.position.x, player.position.y, player.radius, 0, Math.PI*2, true );
	context.fill();
	}

	var enemyCount = 0;
	var energyCount = 0;

	// Go through each enemy and draw it + update its properties
	for( i = 0; i < organisms.length; i++ ) {
	p = organisms[i];

	p.position.x += p.velocity.x;
	p.position.y += p.velocity.y;

	p.alpha += ( 1 - p.alpha ) * 0.1;

	if( p.type == ORGANISM_ENEMY ) context.fillStyle = 'rgba( 255, 0, 0, ' + p.alpha + ' )';
	if( p.type == ORGANISM_ENERGY ) context.fillStyle = 'rgba( 0, 235, 190, ' + p.alpha + ' )';

	context.beginPath();
	context.arc(p.position.x, p.position.y, p.size/2, 0, Math.PI*2, true);
	context.fill();

	var angle = Math.atan2( p.position.y - player.position.y, p.position.x - player.position.x );

	if (playing) {

	var dist = Math.abs( angle - player.angle );

	if( dist > Math.PI ) {
	dist = ( Math.PI * 2 ) - dist;
	}

	if ( dist < 1.6 ) {
	if (p.distanceTo(player.position) > player.radius - 5 && p.distanceTo(player.position) < player.radius + 5) {
	p.dead = true;
	}
	}

	if (spaceIsDown && p.distanceTo(player.position) < player.radius && player.energy > 11) {
	p.dead = true;
	score += 4;
	}

	if (p.distanceTo(player.position) < player.energyRadius + (p.size * 0.5)) {
	if (p.type == ORGANISM_ENEMY) {
	player.energy -= 6;
	}

	if (p.type == ORGANISM_ENERGY) {
	player.energy += 8;
	score += 30;
	}

	player.energy = Math.max(Math.min(player.energy, 100), 0);

	p.dead = true;
	}
	}

	// If the enemy is outside of the game bounds, destroy it
	if( p.position.x < -p.size \|\| p.position.x > SCREEN_WIDTH + p.size \|\| p.position.y < -p.size \|\| p.position.y > SCREEN_HEIGHT + p.size ) {
	p.dead = true;
	}

	// If the enemy is dead, remove it
	if( p.dead ) {
	emitParticles( p.position, { x: (p.position.x - player.position.x) * 0.02, y: (p.position.y - player.position.y) * 0.02 }, 5, 5 );

	organisms.splice( i, 1 );
	i --;
	}
	else {
	if( p.type == ORGANISM_ENEMY ) enemyCount ++;
	if( p.type == ORGANISM_ENERGY ) energyCount ++;
	}
	}

	// If there are less enemies than intended for this difficulty, add another one
	if( enemyCount < 1 * difficulty && new Date().getTime() - lastspawn > 100 ) {
	organisms.push( giveLife( new Enemy() ) );
	lastspawn = new Date().getTime();
	}

	//
	if( energyCount < 1 && Math.random() > 0.996 ) {
	organisms.push( giveLife( new Energy() ) );
	}

	// Go through and draw all particle effects
	for( i = 0; i < particles.length; i++ ) {
	p = particles[i];

	// Apply velocity to the particle
	p.position.x += p.velocity.x;
	p.position.y += p.velocity.y;

	// Fade out
	p.alpha -= 0.02;

	// Draw the particle
	context.fillStyle = 'rgba(255,255,255,'+Math.max(p.alpha,0)+')';
	context.fillRect( p.position.x, p.position.y, 1, 1 );

	// If the particle is faded out to less than zero, remove it
	if( p.alpha <= 0 ) {
	particles.splice( i, 1 );
	}
	}

	// If the game is active, update the game status bar with score, duration and FPS
	if( playing ) {
	scoreText = 'Score: <span>' + Math.round( score ) + '</span>';
	scoreText += ' Time: <span>' + Math.round( ( ( new Date().getTime() - time ) / 1000 ) * 100 ) / 100 + 's</span>';
	scoreText += ' <p class="fps">FPS: <span>' + Math.round( fps ) + ' ('+Math.round(Math.max(Math.min(fps/FRAMERATE, FRAMERATE), 0)*100)+'%)</span></p>';
	status.innerHTML = scoreText;

	if( player.energy === 0 ) {
	emitParticles( player.position, { x: 0, y: 0 }, 10, 40 );

	gameOver();
	}
	}
	}

	/**
	*
	*/
	function giveLife( organism ) {
	var side = Math.round( Math.random() * 3 );

	switch( side ) {
	case 0:
	organism.position.x = 10;
	organism.position.y = SCREEN_HEIGHT * Math.random();
	break;
	case 1:
	organism.position.x = SCREEN_WIDTH * Math.random();
	organism.position.y = 10;
	break;
	case 2:
	organism.position.x = SCREEN_WIDTH - 10;
	organism.position.y = SCREEN_HEIGHT * Math.random();
	break;
	case 3:
	organism.position.x = SCREEN_WIDTH * Math.random();
	organism.position.y = SCREEN_HEIGHT - 10;
	break;
	}

	organism.speed = Math.min( Math.max( Math.random(), 0.6 ), 0.75 );

	organism.velocity.x = ( player.position.x - organism.position.x ) * 0.006 * organism.speed;
	organism.velocity.y = ( player.position.y - organism.position.y ) * 0.006 * organism.speed;

	if( organism.type == 'enemy' ) {
	organism.velocity.x = (1+(Math.random()0.1));
	organism.velocity.y = (1+(Math.random()0.1));
	}

	organism.alpha = 0;

	return organism;
	}

	};

	/**
	*
	*/
	function Point( x, y ) {
	this.position = { x: x, y: y };
	}
	Point.prototype.distanceTo = function(p) {
	var dx = p.x-this.position.x;
	var dy = p.y-this.position.y;
	return Math.sqrt(dxdx + dydy);
	};
	Point.prototype.clonePosition = function() {
	return { x: this.position.x, y: this.position.y };
	};

	/**
	*
	*/
	function Player() {
	this.position = { x: 0, y: 0 };
	this.length = 15;
	this.energy = 30;
	this.energyRadius = 0;
	this.energyRadiusTarget = 0;
	this.radius = 60;
	this.angle = 0;
	this.coreQuality = 16;
	this.coreNodes = [];
	}

	Player.prototype = new Point();

	Player.prototype.updateCore = function() {
	var i, j, n;

	if( this.coreNodes.length == 0 ) {
	var i, n;

	for (i = 0; i < this.coreQuality; i++) {
	n = {
	position: { x: this.position.x, y: this.position.y },
	normal: { x: 0, y: 0 },
	normalTarget: { x: 0, y: 0 },
	offset: { x: 0, y: 0 }
	};

	this.coreNodes.push( n );
	}
	}

	for (i = 0; i < this.coreQuality; i++) {

	var n = this.coreNodes[i];

	var angle = ( i / this.coreQuality ) * Math.PI * 2;

	n.normal.x = Math.cos( angle ) * this.energyRadius;
	n.normal.y = Math.sin( angle ) * this.energyRadius;

	n.offset.x = Math.random() * 5;
	n.offset.y = Math.random() * 5;
	}
	};

	/**
	*
	*/
	function Enemy() {
	this.position = { x: 0, y: 0 };
	this.velocity = { x: 0, y: 0 };
	this.size = 6 + ( Math.random() * 4 );
	this.speed = 1;
	this.type = 'enemy';
	}
	Enemy.prototype = new Point();

	/**
	*
	*/
	function Energy() {
	this.position = { x: 0, y: 0 };
	this.velocity = { x: 0, y: 0 };
	this.size = 10 + ( Math.random() * 6 );
	this.speed = 1;
	this.type = 'energy';
	}
	Energy.prototype = new Point();


	CoreWorld.init();
	html{color:#000;background:#222222;}
	a{cursor:pointer;}
	html,body,div,dl,dt,dd,ul,ol,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
	table{border-collapse:collapse;border-spacing:0;}
	fieldset,img{border:0;}
	address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
	caption,th{text-align:left;}
	/* h1,h2,h3,h4,h5,h6{font-size:100%;} */
	q:before,q:after{content:'';}
	abbr,acronym {border:0;font-variant:normal;}
	sup {vertical-align:text-top;}
	sub {vertical-align:text-bottom;}
	input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;outline-style:none;outline-width:0pt;}
	legend{color:#000;}
	a:focus,object,h1,h2,h3,h4,h5,h6{-moz-outline-style: none; border:0px;}
	/input[type="Submit"]{cursor:pointer;}/
	strong {font-weight: bold;}

	body {
	overflow: hidden;
	font-family: Helvetica, Arial, sans-serif;
	color: #333333;
	font-size: 11px;
	background-color: #222222;
	}

	canvas {
	cursor: crosshair;
	z-index: 1;
	}

	canvas.background {
	z-index: 0;
	}

	.ui {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #999999;
	text-align: left;
	padding: 8px;
	background-color: rgba(0,0,0,0.5);
	position: absolute;
	z-index: 2;
	margin: 0;
	}

	#message {
	padding: 16px;
	margin: 130px 0 0 0;
	}

	#status {
	width: 100%;
	height: 15px;
	padding: 8px;
	display: none;
	}

	#status .fps {
	position: absolute;
	right: 20px;
	display: inline;
	}

	#status span {
	color: #bbbbbb;
	font-weight: bold;
	margin-right: 5px;
	}

	#title {
	margin-bottom: 20px;
	color: #eeeeee;
	}

	.ui ol {
	margin: 10px 0 10px 10px;
	}

	.ui a {
	outline: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 38px;
	text-decoration: none;
	color: #bbbbbb;
	padding: 2px;
	display: block
	}

	.ui a:hover {
	color: #ffffff;
	background-color: #000000;
	}
	<canvas id="world" width="400" height="400"></canvas>
	<canvas id="background-canvas" class="background" width="400" height="400"></canvas>
	<div id="status" class="ui"></div>
	<div id="message" class="ui">
	<h2 id="title"></h2>
	<ol>
	<li>Move the mouse around for rotating the ship.</li>
	<li>Gather energy (green dots).</li>
	<li>Hold SPACE for firing bullets.</li>
	</ol>
	<a href="#" id="startButton">Start</a>
	</div>
	// forked from hakim's "Core" http://jsdo.it/hakim/core

	function random( min, max ) {
	var result = min + (max - min) * Math.random();
	return result;
	}

	function randomInt( min, max ) {
	// Math.round() gives a non-uniform distribution!
	var result = min + Math.floor((max - min + 1) * Math.random());
	return result;
	}

	var precision = 0.000000001;

	function delta( num1, num2 ) {
	var diff = num1 - num2;
	var result = Math.abs(diff) < precision ? 0 : diff;
	return result;
	}

	function equal( num1, num2 ) {
	var result = delta(num1, num2) === 0;
	return result;
	}

	function lesser( num1, num2 ) {
	var result = num1 < num2 && ! equal(num1, num2);
	return result;
	}

	function lesserOrEqual( num1, num2 ) {
	var result = num1 < num2 \|\| equal(num1, num2);
	return result;
	}

	function between( num, min, max, equalMin, equalMax ) {
	equalMin = typeof equalMin == 'undefined' ? true : !!equalMin;
	equalMax = typeof equalMax == 'undefined' ? true : !!equalMax;
	var result = true
	&& (equalMin ? lesserOrEqual(min, num) : lesser(min, num))
	&& (equalMax ? lesserOrEqual(num, max) : lesser(num, max));
	return result;
	}

	function straightLine( point1, point2 ) {
	//f(x,y) = ax + by + c
	var a = delta(point1.position.y, point2.position.y);
	var b = delta(point2.position.x, point1.position.x);
	var c = point1.position.xpoint2.position.y - point2.position.xpoint1.position.y;
	function f( p ) {
	return ap.position.x + bp.position.y + c;
	}
	//y = m*x + k
	var isParallelToY = equal(b, 0);
	var mX = isParallelToY ? Nan : -(a/b);
	var kX = isParallelToY ? Nan : -(c/b);
	function yX( p ) {
	return mX*p.position.x + kX;
	}
	//x = m*y + k
	var isParallelToX = equal(a, 0);
	var mY = isParallelToX ? Nan : -(b/a);
	var kY = isParallelToX ? Nan : -(c/a);
	function xY( p ) {
	return mY*p.position.y + kY;
	}
	var angle = isParallelToY ? Math.PI/2 : Math.atan(mX);
	var cosAngle = Math.cos(angle);
	var sinAngle = Math.sin(angle);
	function compareParallel( pointP, axis, distance ) {
	axis = axis != 'y' && axis != 'x' ? 'y' : axis;
	distance = typeof distance == 'undefined' ? 0 : distance;
	switch (axis) {
	case 'x': //y is given
	if (isParallelToX) return Nan;
	var xYP = xY(pointP) + distance / Math.abs(sinAngle);
	if (lesser(pointP.position.x, xYP))
	return -1;
	if (equal(pointP.position.x, xYP))
	return 0;
	return +1;
	break;
	case 'y': //x is given
	if (isParallelToY) return Nan;
	var yXP = yX(pointP) + distance / Math.abs(cosAngle);
	if (lesser(pointP.position.y, yXP))
	return -1;
	if (equal(pointP.position.y, yXP))
	return 0;
	return +1;
	break;
	default:
	break;
	}
	}

	return {
	implicit: function() {
	return {a: a, b: b, c: c};
	},
	explicitX: function() {
	return {m: mX, k: kX, isParallelToY: isParallelToY, x: point1.position.x};
	},
	explicitY: function() {
	return {m: mY, k: kY, isParallelToX: isParallelToX, y: point1.position.y};
	},
	parallelAxis: function() {
	return isParallelToX ? 'x' : (isParallelToY ? 'y': '');
	},
	contains: function( pointP ) {
	return equal(f(pointP), 0);
	},
	compare: compareParallel
	};
	}



	game = new function() {

	//===============================================================READ ONLY==

	var spaceIsDown = false;
	this.isSpaceDown = function() {
	return spaceIsDown;
	};

	var playing = false;
	this.isPlaying = function() {
	return playing;
	};

	var context = null;
	this.getContext = function()
	{
	return context;
	};

	var ship = null;
	this.getShip = function()
	{
	return ship;
	};

	var level = 1;
	this.getLevel = function()
	{
	return level;
	};

	//==============================================================WRITE ONLY==

	var score = 0;
	this.incrementScore = function( value )
	{
	score += value;
	};

	var particles = [];
	this.addParticles = function( position, spread, seed, direction ) {
	var q = randomInt(seed, 2*seed);
	while (--q >= 0) {
	var p = new Particle(position, spread, q, direction);
	particles.push(p);
	}
	};

	//==================================================================PUBLIC==

	this.init = function() {

	canvas = document.getElementById('world');
	canvasBackground = document.getElementById('background-canvas');
	status = document.getElementById('status');
	message = document.getElementById('message');
	title = document.getElementById('title');
	startButton = document.getElementById('startButton');

	if (canvas && canvas.getContext) {
	context = canvas.getContext('2d');
	contextBackground = canvasBackground.getContext('2d');

	document.addEventListener('mousemove', documentMouseMoveHandler, false);
	canvas.addEventListener('touchstart', documentTouchStartHandler, false);
	document.addEventListener('touchmove', documentTouchMoveHandler, false);
	window.addEventListener('resize', windowResizeHandler, false);
	startButton.addEventListener('click', startButtonClickHandler, false);
	document.addEventListener('keydown', documentKeyDownHandler, false);
	document.addEventListener('keyup', documentKeyUpHandler, false);

	ship = new Ship(canvas.width/2, canvas.height/2);
	//shield = new Shield(Math.PI/2);

	windowResizeHandler();
	renderBackground();
	setInterval(loop, SECOND / FRAMERATE);
	}
	};

	var bullets = [];
	this.getBullets = function() {
	return bullets.concat();
	};
	this.addBullets = function( position, direction ) {
	var q = 2;
	while (--q >= 0) {
	var p = new Bullet(position, direction);
	bullets.push(p);
	}
	};

	//=================================================================PRIVATE==

	var SECOND = 1000;
	var FRAMERATE = 60;

	var canvas;
	var canvasBackground;
	var contextBackground;

	// UI DOM elements
	var status;
	var message;
	var title;
	var startButton;

	// Mouse properties
	var mouseX = 0;
	var mouseY = 0;
	var mouseIsDown = false;

	// Game properties
	var startTime = 0;
	var frameTime = 0;
	var organisms = [];
	var prevEnemyTime = 0;

	// Performance (FPS) tracking
	var fps = 0;
	var prevSecondTime = new Date().getTime();
	var frames = 0;

	function windowResizeHandler() {
	var left = (window.innerWidth - canvas.width) / 2;
	var top = (window.innerHeight - canvas.height) / 2;
	canvas.style.position = 'absolute';
	canvas.style.left = left + 'px';
	canvas.style.top = top + 'px';
	canvasBackground.style.position = 'absolute';
	canvasBackground.style.left = left + 'px';
	canvasBackground.style.top = top + 'px';
	}

	function renderBackground() {
	var gradient = contextBackground.createRadialGradient(
	canvas.width/2, canvas.height/2, 0,
	canvas.width/2, canvas.height/2, 500);
	gradient.addColorStop(0, 'rgba(0, 70, 70, 1)');
	gradient.addColorStop(1, 'rgba(0, 8, 14, 1)');

	contextBackground.fillStyle = gradient;
	contextBackground.fillRect(0, 0, canvas.width, canvas.height);
	}

	//--------------------------------------------------------------------------

	function documentKeyDownHandler( event ) {
	switch (event.keyCode) {
	case 32:
	event.preventDefault();
	spaceIsDown = true;
	break;
	default:
	break;
	}
	}

	function documentKeyUpHandler( event ) {
	switch (event.keyCode) {
	case 32:
	event.preventDefault();
	spaceIsDown = false;
	break;
	default:
	break;
	}
	}

	function documentMouseMoveHandler( event ) {
	mouseX = event.clientX;
	mouseY = event.clientY;
	}

	function documentTouchStartHandler( event ) {
	if (event.touches.length == 1) {
	event.preventDefault();

	mouseX = event.touches[0].pageX;
	mouseY = event.touches[0].pageY;
	}
	}

	function documentTouchMoveHandler( event ) {
	if (event.touches.length == 1) {
	event.preventDefault();

	mouseX = event.touches[0].pageX;
	mouseY = event.touches[0].pageY;
	}
	}

	function startButtonClickHandler( event ) {
	event.preventDefault();
	if (!playing) {
	organisms = [];
	score = 0;
	level = 1;
	ship.energy = 30;
	message.style.display = 'none';
	status.style.display = 'block';
	startTime = new Date().getTime();
	playing = true;
	}
	}

	//--------------------------------------------------------------------------

	function drawParticles() {
	for (var i = 0, iTop = particles.length; i < iTop; i++) {
	p = particles[i];
	p.draw();
	if (p.alpha === 0) {
	particles.splice(i, 1);
	i--;
	iTop--;
	}
	}
	}

	function drawBullets() {
	for (var i = 0, iTop = bullets.length; i < iTop; i++) {
	p = bullets[i];
	p.draw();
	if (p.dead) {
	bullets.splice(i, 1);
	i--;
	iTop--;
	}
	}
	}

	function drawOrganisms() {
	var enemyCount = 0;
	var energyCount = 0;
	for (var i = 0, iTop = organisms.length; i < iTop; i++) {
	p = organisms[i];
	p.draw();
	if (p.dead) {
	p.explode();
	organisms.splice(i, 1);
	i--;
	iTop--;
	}
	else {
	if (p instanceof Enemy) enemyCount++;
	if (p instanceof Energy) energyCount++;
	}
	}
	if (enemyCount < level && frameTime - prevEnemyTime > 100) {
	organisms.push(new Enemy());
	prevEnemyTime = frameTime;
	}
	if (energyCount < 1 && Math.random() > 0.996) {
	organisms.push(new Energy());
	}
	}

	function currentFPS() {
	frames++;
	if (frameTime > prevSecondTime + SECOND) {
	fps = frames / (frameTime - prevSecondTime) * SECOND;
	prevSecondTime = frameTime;
	frames = 0;
	}
	return fps;
	}

	/**
	* http://www.mredkj.com/javascript/numberFormat.html
	*/
	function addCommas(nStr) {
	nStr += '';
	x = nStr.split('.');
	x1 = x[0];
	x2 = x.length > 1 ? '.' + x[1] : '';
	var rgx = /(\d+)(\d{3})/;
	while (rgx.test(x1)) {
	x1 = x1.replace(rgx, '$1' + ',' + '$2');
	}
	return x1 + x2;
	}

	function updateStatus() {
	var duration = ((frameTime - startTime) / SECOND);
	var text = 'Score: <span>' + addCommas(score.toFixed(0)) + '</span>';
	text += ' Time: <span>' + duration.toFixed(2) + 's</span>';
	text += ' Level: <span>' + level.toFixed(0) + '</span>';
	if (playing) {
	text += ' <p class="fps">FPS: <span>' + currentFPS().toFixed(0) + '</span></p>';
	}
	status.innerHTML = text;
	}

	function gameOver() {
	playing = false;
	updateStatus();
	title.innerHTML = 'Game Over!';
	message.style.display = 'block';
	}

	function loop() {
	frameTime = new Date().getTime();
	context.clearRect(0, 0, canvas.width, canvas.height);
	if (playing) {
	level += 0.0015;
	score += 9 * level;
	ship.draw(mouseX, mouseY);
	if (spaceIsDown) {
	ship.fire();
	}
	drawBullets();
	updateStatus();
	if (ship.energy === 0) {
	ship.explode();
	gameOver();
	}
	}
	//draw organisms even if not playing, so that it works as a demo
	drawOrganisms();
	//draw partiles even if not playing, so that ship particles are drawn after game over
	drawParticles();
	}

	};

	//******************************************************************************

	Point = Class.extend({
	init: function( x, y ) {
	this.context = game.getContext();
	this.position = {
	x: x \|\| 0,
	y: y \|\| 0
	};
	},
	distanceTo: function( p ) {
	var dx = p.position.x - this.position.x;
	var dy = p.position.y - this.position.y;
	return Math.sqrt(dx * dx + dy * dy);
	},
	scale: function( factor ) {
	factor = typeof factor == 'undefined' ? 1 : factor;

	var xP = this.position.x;
	var yP = this.position.y;
	var xPS = xP * factor;
	var yPS = yP * factor;
	var result = new Point(xPS, yPS);
	return result;
	},
	reverseScale: function( factor ) {
	factor = typeof factor == 'undefined' ? 1 : factor;

	var xPS = this.position.x;
	var yPS = this.position.y;
	var xP = xPS / factor;
	var yP = yPS / factor;
	var result = new Point(xP, yP);
	return result;
	},
	rotate: function( theta ) {
	theta = typeof theta == 'undefined' ? 0 : theta;

	var sin = Math.sin(theta);
	var cos = Math.cos(theta);
	var xP = this.position.x;
	var yP = this.position.y;
	var xPR = xP * cos + yP * sin;
	var yPR = -xP * sin + yP * cos;
	var result = new Point(xPR, yPR);
	return result;
	},
	reverseRotate: function( theta ) {
	theta = typeof theta == 'undefined' ? 0 : theta;

	var sin = Math.sin(theta);
	var cos = Math.cos(theta);
	var xPR = this.position.x;
	var yPR = this.position.y;
	var xP = xPR * cos - yPR * sin;
	var yP = xPR * sin + yPR * cos;
	var result = new Point(xP, yP);
	return result;
	},
	translate: function( origin ) {
	origin = origin \|\| new Point(0, 0);

	var xP = this.position.x;
	var yP = this.position.y;
	var xPT = xP - origin.position.x;
	var yPT = yP - origin.position.y;
	var result = new Point(xPT, yPT);
	return result;
	},
	reverseTranslate: function( origin ) {
	origin = origin \|\| new Point(0, 0);

	var xPT = this.position.x;
	var yPT = this.position.y;
	var xP = xPT + origin.position.x;
	var yP = yPT + origin.position.y;
	var result = new Point(xP, yP);
	return result;
	},
	transformTRS: function( origin, theta, factor ) {
	/*
	var xP = pointP.position.x;
	var yP = pointP.position.y;

	origin = origin \|\| new Point(0, 0);
	var xPT = xP - origin.position.x;
	var yPT = yP - origin.position.y;

	theta = typeof theta == 'undefined' ? 0 : theta;
	var sinTheta = Math.sin(theta);
	var cosTheta = Math.cos(theta);
	var xPTR = xPT * cosTheta + yPT * sinTheta;
	var yPTR = -xPT * sinTheta + yPT * cosTheta;

	factor = typeof factor == 'undefined' ? 1 : factor;
	var xPTRS = factor * xPTR;
	var yPTRS = factor * yPTR;

	var result = new Point(xPTRS, yPTRS);
	return result;
	*/
	var PT = this.translate(origin);
	var PTR = PT.rotate(theta);
	var PTRS = PTR.scale();
	return PTRS;
	},
	reverseTransformTRS: function( origin, theta, factor ) {
	var PTR = this.reverseScale(factor);
	var PT = PTR.reverseRotate(theta);
	var P = PT.reverseTranslate(origin);
	return P;
	}
	});

	//------------------------------------------------------------------------------

	Ship = Point.extend({
	init: function( x, y ) {
	this._super(x, y);

	this.energy = 60;
	this.radius = 30;
	this.angle1 = 1/5*Math.PI;
	this.angle2 = 1/2*Math.PI;
	var X1 = this.radius * Math.sin(this.angle1/2);
	var X2 = this.radius * Math.sin(this.angle2/2);
	var Y1 = this.radius * Math.cos(this.angle1/2);
	var Y2 = this.radius * Math.cos(this.angle2/2);
	this.pointA = new Point(- X1, - Y1);
	this.pointB = new Point(+ X1, - Y1);
	this.pointC = new Point(+ X2, + Y2);
	this.pointD = new Point(- X2, + Y2);
	this.angle = 0;
	this.slDA = straightLine(this.pointD, this.pointA);
	this.slBC = straightLine(this.pointB, this.pointC);
	this.alpha = 0;
	this.head = new Point(0, this.pointA.position.y);
	},
	draw: function(mouseX, mouseY) {
	var targetAlpha = (this.energy / 100);
	this.alpha += (targetAlpha - this.alpha) * 0.2;

	var targetAngle = Math.atan2(mouseY - window.innerHeight/2, mouseX - window.innerWidth/2);
	targetAngle += 1/2*Math.PI;
	if (Math.abs(targetAngle - this.angle) > Math.PI) {
	this.angle = targetAngle;
	}
	else {
	this.angle += (targetAngle - this.angle) * 0.4;
	}
	this.context.save();

	this.context.translate(this.position.x, this.position.y);
	this.context.rotate(this.angle);

	this.context.beginPath();
	this.context.moveTo(this.pointA.position.x, this.pointA.position.y);
	this.context.lineTo(this.pointB.position.x, this.pointB.position.y);
	this.context.lineTo(this.pointC.position.x, this.pointC.position.y);
	this.context.lineTo(this.pointD.position.x, this.pointD.position.y);
	this.context.closePath();

	this.context.fillStyle = 'rgba( 36, 157, 147, ' + this.alpha + ' )';
	this.context.fill();

	this.context.lineWidth = 1.5;
	this.context.strokeStyle = "#3be2d4";
	this.context.stroke();

	this.context.restore();
	},
	increment: function( value ) {
	this.energy = Math.min(Math.max(this.energy + value, 0), 100);
	},
	isHitting: function( organism ) {
	var pointP = organism.transformTRS(this, this.angle);
	var size = organism.size/2;
	var result = between(pointP.position.y, this.pointA.position.y - size, this.pointD.position.y + size)
	&& this.slDA.compare(pointP, 'x', -size) >= 0
	&& this.slBC.compare(pointP, 'x', +size) <= 0;
	return result;
	},
	explode: function() {
	game.addParticles(this.position, 10, 40);
	},
	fire: function() {
	var head = this.head.reverseTransformTRS(this, this.angle);
	game.addBullets(this.position, {
	x: (head.position.x - this.position.x) * 0.2,
	y: (head.position.y - this.position.y) * 0.2
	});
	}
	});

	//------------------------------------------------------------------------------

	Organism = Point.extend({
	init: function() {
	this.canvas = game.getContext().canvas;
	this.ship = game.getShip();

	var side = randomInt(0, 3);
	switch (side) {
	case 0:
	this._super(10, randomInt(0, this.canvas.height));
	break;
	case 1:
	this._super(randomInt(0, this.canvas.width), 10);
	break;
	case 2:
	this._super(this.canvas.width - 10, randomInt(0, this.canvas.height));
	break;
	case 3:
	this._super(randomInt(0, this.canvas.width), this.canvas.height - 10);
	break;
	default:
	break;
	}

	var speed = 0.006 * random(0.6, 0.75);
	this.velocity = {
	x: (this.ship.position.x - this.position.x) * speed,
	y: (this.ship.position.y - this.position.y) * speed
	};

	this.alpha = 0;
	},
	draw: function() {
	this.position.x += this.velocity.x;
	this.position.y += this.velocity.y;
	this.incrementAlpha((1 - this.alpha) * 0.1);

	this.context.beginPath();
	this.context.fillStyle = this.fillStyle();
	this.context.arc(this.position.x, this.position.y, this.size/2, 0, Math.PI*2);
	this.context.fill();

	this.checkAlive();
	},
	incrementAlpha: function( value ) {
	this.alpha = Math.min(Math.max(this.alpha + value, 0), 1);
	},
	isLost: function() {
	return false
	\|\| this.position.x < 0 - this.size \|\| this.position.x > this.canvas.width + this.size
	\|\| this.position.y < 0 - this.size \|\| this.position.y > this.canvas.height + this.size;
	},
	checkAlive: function() {
	if (game.isPlaying()) {
	if (this.ship.isHitting(this)) {
	this.exchangeEnergy();
	this.dead = true;
	}
	var bullets = game.getBullets();
	for (var i = 0, iTop = bullets.length; i < iTop; i++) {
	var p = bullets[i];
	if (p.isHitting(this)) {
	game.incrementScore(50);
	this.dead = true;
	}
	}
	}
	if (this.isLost()) {
	this.dead = true;
	}
	},
	explode: function() {
	game.addParticles(this.position, 5, 5, {
	x: (this.position.x - this.ship.position.x) * 0.02,
	y: (this.position.y - this.ship.position.y) * 0.02
	});
	}
	});

	//------------------------------------------------------------------------------

	Enemy = Organism.extend({
	init: function() {
	this._super();
	this.velocity.x *= random(1, 1.1);
	this.velocity.y *= random(1, 1.1);
	this.size = random(6, 10);
	},
	fillStyle: function() {
	return 'rgba( 255, 0, 0, ' + this.alpha + ' )';
	},
	exchangeEnergy: function() {
	game.getShip().increment(-6);
	}
	});

	//------------------------------------------------------------------------------

	Energy = Organism.extend({
	init: function() {
	this._super();
	this.size = random(10, 16);
	},
	fillStyle: function() {
	return 'rgba( 0, 235, 190, ' + this.alpha + ' )';
	},
	exchangeEnergy: function() {
	game.getShip().increment(8);
	game.incrementScore(30);
	}
	});

	//------------------------------------------------------------------------------

	Particle = Point.extend({
	init: function( position, spread, q, direction ) {
	this._super(
	position.x + (Math.sin(q) * spread),
	position.y + (Math.cos(q) * spread));

	direction = typeof direction == 'undefined' ? {x: 0, y: 0} : direction;
	this.velocity = {
	x: direction.x + random(-1, 1),
	y: direction.y + random(-1, 1)
	};
	this.alpha = 1;
	},
	draw: function() {
	this.position.x += this.velocity.x;
	this.position.y += this.velocity.y;
	this.incrementAlpha(-0.02);

	this.context.fillStyle = "#FFFFFF";
	this.context.fillRect(this.position.x, this.position.y, 1, 1);
	},
	incrementAlpha: function( value ) {
	this.alpha = Math.min(Math.max(this.alpha + value, 0), 1);
	}
	});

	//------------------------------------------------------------------------------

	Bullet = Point.extend({
	init: function( position, direction ) {
	this.canvas = game.getContext().canvas;

	this._super(position.x, position.y);
	this.velocity = {
	x: direction.x * 2,
	y: direction.y * 2
	};
	this.size = 2;
	this.dead = false;
	},
	draw: function() {
	this.position.x += this.velocity.x;
	this.position.y += this.velocity.y;

	this.context.fillStyle = 'rgba(255,255,255,1)';
	this.context.fillRect(this.position.x, this.position.y, this.size, this.size);

	this.checkAlive();
	},
	isLost: function() {
	return false
	\|\| this.position.x < 0 - this.size \|\| this.position.x > this.canvas.width + this.size
	\|\| this.position.y < 0 - this.size \|\| this.position.y > this.canvas.height + this.size;
	},
	checkAlive: function() {
	if (this.isLost()) {
	this.dead = true;
	}
	},
	isHitting: function( organism ) {
	var result = this.distanceTo(organism) <= this.size/2 + organism.size/2;
	return result;
	}
	});

	//------------------------------------------------------------------------------

	game.init();