canvas.js

var canvases = [];
var testIndex = 0;
function createCanvas( level )
{
  var canvas = document.createElement('canvas');
  var tests = document.getElementsByClassName( 'test' )
  canvas.width = 300;
  canvas.height = 150;
  canvas.id = canvases.length;
  
  var maxLength = 0;
  for ( var pid in level.players )
    if ( level.players[pid].shot.path.length > maxLength )
      maxLength = level.players[pid].shot.path.length;
  for ( var pid in level.enemies )
    if ( level.enemies[pid].shot.path.length > maxLength )
      maxLength = level.enemies[pid].shot.path.length;
  canvas.maxLength = maxLength;
  
  canvas.path = [];
  for ( var pid in level.players )
    canvas.path.push(level.players[pid].shot.path);
  for ( var pid in level.enemies )
    canvas.path.push(level.enemies[pid].shot.path);
  
  canvas.level = level;
  canvas.onclick = playAnimation;
  
  tests[testIndex++].appendChild( canvas );
  canvases.push( canvas );
  return canvas;
}

function drawLevel( canvas, frames ) {
  if( frames == undefined ) frames = canvas.maxLength;
  var level = canvas.level;
  var gfx = canvas.getContext("2d");
  gfx.clearRect(0, 0, canvas.width, canvas.height);
  
  gfx.beginPath();

  gfx.strokeStyle = "#666";
  
  gfx.moveTo(0, 0);
  gfx.lineTo(0, 150);
  gfx.lineTo(300, 150);
  gfx.lineTo(300, 0);
  gfx.lineTo(0, 0);
  
  gfx.stroke();
  
  gfx.beginPath()
  gfx.strokeStyle = "#9ce";
  
  gfx.moveTo(0, 150 - level.map[0]);
  for(var i = 1; i < level.map.length; ++i)
    gfx.lineTo(i * 20, 150 - level.map[i]);
  gfx.stroke();
  
  var pos_x, pos_y, angle;

  gfx.strokeStyle = "#af7";
  for(var now = 0; now < level.players.length; ++now )
  {
    gfx.beginPath();
    pos_x = level.players[now].x;
    pos_y = 150 - level.players[now].y;
    gfx.arc(pos_x, pos_y, 10, 0, 2 * Math.PI, false);
    
    gfx.moveTo( pos_x, pos_y );
    angle = -level.players[now].shot.angle / 180 * Math.PI;
    pos_x += Math.cos( angle ) * 15;
    pos_y += Math.sin( angle ) * 15;
    gfx.lineTo( pos_x, pos_y );
    gfx.stroke();
  }
  
  gfx.strokeStyle = "#fa7";
  for(var now = 0; now < level.enemies.length; ++now )
  {
    gfx.beginPath();
    pos_x = level.enemies[now].x;
    pos_y = 150 - level.enemies[now].y;
    gfx.arc(pos_x, pos_y, 10, 0, 2 * Math.PI, false);
    
    gfx.moveTo( pos_x, pos_y );
    angle = (-level.enemies[now].shot.angle) / 180 * Math.PI;
    pos_x += Math.cos( angle ) * 15;
    pos_y += Math.sin( angle ) * 15;
    gfx.lineTo( pos_x, pos_y );
    gfx.stroke();
  }
  
  
  gfx.beginPath();
  gfx.strokeStyle = "#7af";
  for(var now = 0; now < level.players.length; ++now )
  {
    gfx.moveTo(level.players[now].x, 150 - level.players[now].y);
    for( var lid in level.players[now].shot.path )
      if( lid < frames )
        gfx.lineTo( level.players[now].shot.path[lid].x, 150 - level.players[now].shot.path[lid].y);
  }
  for(var now = 0; now < level.enemies.length; ++now )
  {
    gfx.moveTo(level.enemies[now].x, 150 - level.enemies[now].y);
    for( var lid in level.enemies[now].shot.path )
      if( lid < frames )
        gfx.lineTo( level.enemies[now].shot.path[lid].x, 150 - level.enemies[now].shot.path[lid].y);
  }
  gfx.stroke();
}

function playAnimation()
{
  var frame = 0;
  var canvas = this;
  if( canvas.playing == true ) return;
  canvas.playing = true;
  var func = function() {
    drawLevel( canvas, frame );
    frame++;
    if ( frame == canvas.maxLength + 1 )
    {
      canvas.playing = false;
      return;
    }
    setTimeout( func, 15 );
  };
  func();
}