function canvasOnclick(e)  {

  if (e.ctrlKey) {
    if (activo) activo = false;
	else activo = true;
	return false;
  }
 
  obj.x = e.layerX;
  obj.y = e.layerY;
}


function cle() { ctx.clearRect(0, 0, 1200, 600); }


function Nave(x,y,a,dib) {
  this.x = x;  
  this.y = y;  
  this.a = a;
  this.dib = dib;
  this.v = 0;
  this.xobj = undefined;
  this.yobj = undefined;
}

Nave.prototype.pilotar = function() {
  var xrel = obj.x - this.x;
  var yrel = obj.y - this.y;
  var dis2  =  xrel*xrel + yrel*yrel;
  //if (dis2 >100) {
  var arel = Math.atan2(yrel,xrel);
  if (arel <0) arel += PI2;
  arel = this.a - arel;
  var incan = 0.02;
  if (arel> 0){
    if (arel< Math.PI) this.a -= incan;
	else this.a += incan;
  }
  if (arel< 0){
    if (arel > -Math.PI) this.a += incan;
	else this.a -= incan;
  }
  if (this.a < 0) this.a += PI2;
  if (this.a > PI2) this.a -= PI2;
  //}
  //info.innerHTML =arel.toFixed(4)+'::'+this.a.toFixed(4)+"<br>"+xrel.toFixed(4)+"::"+yrel.toFixed(4);
  var vdes;  
/*
  if (arel < 0.1 && arel >-0.1) {
    if (dis2> 100000 ) vdes = 5;
    else if (dis2> 6600) vdes = 4; 
    else if (dis2> 3600) vdes = 3; 
    else if (dis2> 2500) vdes = 2; 
    else if (dis2> 100) vdes = 1; 
    else vdes = 0; 
  }
  else if (dis2> 100) vdes = 1;
  else vdes = 0;
*/

    if (dis2> 100000 ) vdes = 5;
    else if (dis2> 6600) vdes = 4; 
    else if (dis2> 3600) vdes = 3; 
    else if (dis2> 2500) vdes = 2; 
    else if (dis2> 100) vdes = 1; 
    else vdes = 0; 


  if (this.v > vdes) this.v -= 0.1;
  else this.v += 0.1;
  
  var vx = this.v*Math.cos(this.a);
  var vy = this.v*Math.sin(this.a);
  this.x += vx;
  this.y += vy;
/*
  if (this.x>1200) this.x =0;
  else if (this.x<0) this.x =1200;
  if (this.y>600) this.y =0;
  else if (this.y<0) this.y =600;
*/
}

dibCub = function() {
  ctx.save();
  ctx.translate(this.x,this.y);
  ctx.rotate(this.a);
  //ctx.scale(2,2);

  ctx.beginPath(); 

  
  ctx.moveTo(-30,-30);
  ctx.lineTo( 30,-30); 
  ctx.lineTo( 30, 30); 
  ctx.lineTo( -30, 30); 
  ctx.lineTo( -30, -30); 
 
  ctx.stroke();
  ctx.restore();
  return this;
}


dibFed = function() {
  ctx.save();
  ctx.translate(this.x,this.y);
  ctx.rotate(this.a);
  //ctx.scale(2,2);

  ctx.beginPath(); 

  ctx.arc(10, 0, 10, 0, PI2, true); 
  ctx.moveTo(13,0);
  ctx.arc(10, 0, 3, 0, PI2, true); 

  ctx.moveTo(0,0); 
  ctx.lineTo(-10, 0); 

  ctx.moveTo(- 8, -6); 
  ctx.lineTo(-4, 0); 
  ctx.lineTo(-8, 6); 

  ctx.moveTo(-2, -6); 
  ctx.lineTo(-14, -6); 
  ctx.moveTo(-2, 6); 
  ctx.lineTo(-14, 6); 
  ctx.stroke();
  ctx.restore();
  return this;
}



dibKin = function() {
  ctx.save();
  ctx.translate(this.x,this.y);
  ctx.rotate(this.a);
  //ctx.scale(2,2);

  ctx.beginPath(); 
  //ctx.strokeStyle = "rgb(0,255,0)";

  ctx.arc(12, 0, 3, 0, PI2, true); 

  ctx.moveTo(9,0); 
  ctx.lineTo(0, 0); 

  ctx.moveTo(10, -14); 
  ctx.lineTo(2, -14); 
  ctx.lineTo(-10, 0); 
  ctx.lineTo(2, 14); 
  ctx.lineTo( 10, 14); 

  ctx.moveTo(6,-14);
  ctx.lineTo(0,0);
  ctx.lineTo(6,14);
  

  ctx.stroke();
  ctx.restore();
  return this;

  return this;
}



dibKin = function() {
  ctx.save();
  ctx.translate(this.x,this.y);
  ctx.rotate(this.a);
  //ctx.scale(2,2);

  ctx.beginPath(); 
  ctx.strokeStyle = "rgb(0,255,0)";

  ctx.arc(12, 0, 3, 0, PI2, true); 

  ctx.moveTo(9,0); 
  ctx.lineTo(0, 0); 

  ctx.moveTo(10, -14); 
  ctx.lineTo(2, -14); 
  ctx.lineTo(-10, 0); 
  ctx.lineTo(2, 14); 
  ctx.lineTo( 10, 14); 

  ctx.moveTo(6,-14);
  ctx.lineTo(0,0);
  ctx.lineTo(6,14);
  

  ctx.stroke();
  ctx.restore();
  return this;

  return this;
}






function step() {
  if (!activo) return;
  f.pilotar();
  b.pilotar();
  for (i=0;i<5;i++) k[i].pilotar();
  cle();
  f.dib(); 
  b.dib();
  for (i=0;i<5;i++) k[i].dib();

  ctx.beginPath();
  ctx.arc(obj.x,obj.y,4,0,PI2,true);
  ctx.moveTo(obj.x-6,obj.y);
  ctx.lineTo(obj.x+6,obj.y)
  ctx.moveTo(obj.x,obj.y-6);
  ctx.lineTo(obj.x,obj.y+6);
  ctx.stroke();  
}

function tt() {clearInterval(t);}


function init(){

PI2 = Math.PI*2

canvas = document.body.appendChild(document.createElement('CANVAS'));
canvas.width = 800;
canvas.height= 400;

canvas.style.border="1px solid black";
canvas.style.margin="5px auto";
//canvas.style.position="fixed";
//canvas.style.top="2px";
//canvas.style.left="2px";

ctx =  canvas.getContext('2d');

canvas.onclick = canvasOnclick;
/*
info = document.body.appendChild(document.createElement('DIV'));
info.style.border="1px solid black";
info.style.position="fixed";
info.style.top="10px";
info.style.left="100px";
*/
obj = {}

activo = true;

f = new Nave(20,190,0,dibFed);
k = [];
for (i=0;i<5;i++)
k[i] = new Nave(1200*Math.random(),600*Math.random(),PI2*Math.random(),dibKin);

b =new Nave(1200*Math.random(),600*Math.random(),PI2*Math.random(),dibCub);
t = setInterval(step,20);
}