js-rocket/script.js

var player={x: 0, y: 0, mx: 0, my:0}
var lastpos=JSONClone(player);
var playerbreak=0.1;
var playeracceleration=3;
var gs=playeracceleration/playerbreak;

var rockspeed=5;

var debug=false;

var frames=0;

var debugtxts=[];

var particles=[];

var rocks=[];

var img=new Image();
img.src="rocket.png";

function init() {
  player={x: cv.width/2, y: cv.height/2, mx: 0, my:0}
  setInterval(addRock,500);
}

function addRock() {
  var x = Math.random()*cv.width;
  var y = Math.random()*cv.height;

  var tx=Math.random()*cv.width/2 + cv.width/4;
  var ty=Math.random()*cv.height/2 + cv.width/4;

  var angle=-Math.atan2(tx-x, ty-y) + Math.PI/2;
  rocks.push({x:x ,y:y, angle: angle});
}

function tick() {
  player.mx*=1-playerbreak;
  player.my*=1-playerbreak;
  var accelerating=false;
  if (keystateByName("w") || keystateByName("ArrowUp")) {
    player.my-=playeracceleration;
    accelerating=true;
  }
  if (keystateByName("s") || keystateByName("ArrowDown")) {
    player.my+=playeracceleration;
    accelerating=true;
  }
  if (keystateByName("a") || keystateByName("ArrowLeft")) {
    player.mx-=playeracceleration;
    accelerating=true;
  }
  if (keystateByName("d") || keystateByName("ArrowRight")) {
    player.mx+=playeracceleration;
    accelerating=true;
  }
  player.x+=player.mx;
  player.y+=player.my;


  debugtxts.push(Math.round(player.mx,2));
  debugtxts.push(Math.round(player.my,2));
  debugtxts.push("");
  debugtxts.push(Math.round(player.x,2));
  debugtxts.push(Math.round(player.y,2));

  c.fillStyle="black";
  fillBackground();
  if (debug) {
    c.strokeStyle="green";
    c.lineWidth=3;
    c.beginPath();
    c.moveTo(lastpos.x, lastpos.y);
    c.lineTo(player.x, player.y);
    c.stroke();
  }

  var motionangle=-Math.atan2(player.mx,player.my)-Math.PI/2;

  if (debug) {
    c.strokeStyle="blue";
    c.lineWidth=3;
    c.beginPath();
    c.moveTo(player.x, player.y);
    c.lineTo(player.x + Math.cos(motionangle)*100, player.y + Math.sin(motionangle)*100)
    c.stroke();
  }
  if (accelerating) {
    particles.push({x:player.x, y: player.y, speed: 5 + Math.random()*6-3, color: "yellow", angle: motionangle + Math.random()*0.8-0.4, size: 10, maxage: FPS/2});
    particles.push({x:player.x, y: player.y, speed: 5 + Math.random()*6-3, color: "yellow", angle: motionangle + Math.random()*0.8-0.4, size: 10, maxage: FPS/2});
    particles.push({x:player.x, y: player.y, speed: 5 + Math.random()*6-3, color: "red", angle: motionangle + Math.random()*0.8-0.4, size: 10, maxage: FPS/2});
    particles.push({x:player.x, y: player.y, speed: 5 + Math.random()*6-3, color: "red", angle: motionangle + Math.random()*0.8-0.4, size: 10, maxage: FPS/2});
  }

  lastpos=JSONClone(player);

  for (var i=0; i<particles.length; i++) {
    if ("age" in particles[i]) {} else {
      particles[i].age=0;
    }
    if (particles[i].age>=particles[i].maxage) {
      particles.splice(1,i);
    } else {
      particles[i].age++;
      particles[i].x+=Math.cos(particles[i].angle)*particles[i].speed;
      particles[i].y+=Math.sin(particles[i].angle)*particles[i].speed;
      c.globalAlpha=Math.abs(1-particles[i].age/particles[i].maxage);
      c.fillStyle=particles[i].color;
      c.fillRect(particles[i].x - particles[i].size/2, particles[i].y  - particles[i].size/2, particles[i].size, particles[i].size)
      c.globalAlpha=1;
    }
  }

  c.fillStyle="red";
  drawRotatedImage(img,player.x,player.y,motionangle+Math.PI,50,50);

  if (debug) {
    c.fillStyle="white";
    for (var x=0; x<cv.width; x+=gs) {
      c.fillRect(x,0,1,cv.height);
    }
    for (var y=0; y<cv.height; y+=gs) {
      c.fillRect(0,y,cv.width,1);
    }
    c.fillStyle="red";
    var x = Math.round((player.x + player.mx/playerbreak)/gs)*gs;
    var y = Math.round((player.y + player.my/playerbreak)/gs)*gs;
    c.fillRect(x,0,1,cv.height);
    c.fillRect(0,y,cv.width,1);
  }

  c.fillStyle="blue";
  for (var i in rocks) {
    c.fillRect(rocks[i].x, rocks[i].y, 10, 10);
    rocks[i].x += Math.cos(rocks[i].angle) * rockspeed;
    rocks[i].y += Math.sin(rocks[i].angle) * rockspeed;
  }

  c.fillStyle="white";
  c.font="20px Arial"
  for (var i in debugtxts) {
    c.fillText(debugtxts[i], 10, i*20 + 20);
  }
  debugtxts=[];
  c.fillStyle="green";
}

function JSONClone(obj) {
  return JSON.parse(JSON.stringify(obj));
}
function factorial(n) {
  if (n<0) {
    if (-1<=n) {
      return -1;
    } else {
      return -Math.abs(factorial(n+1)*n);
    }
  }
  if (n>1) {
    return factorial(n-1)*n;
  } else {
    return 1;
  }
}

function onresize() {
  tick();
}