Question

I am creating a game in javascript and my gameloop is called every 30ms, it leaks a lot of memory as task manager shows the firefox memory usage to increase by 400mb in about 20 seconds.
I am not familiar with how to make sure memory is collected in javascript.

function GameLoop(tick) {
  move(player1.ship);
}

function Player(name) {
  this.id = 0;
  this.name = name;
  this.ship = Ship(this);
}

function Ship(player) {
  this.pos = [1024/2, 768/2];
  this.vel = [0, 0];
  this.angle = 0;
  this.acc = 0;
  this.thrust = 0;
  this.west = 0;
  this.east = 0;
  this.turnRate = 5;
  this.player = player;
  this.size = [40, 40];
  this.ship = canvas.rect(this.pos[0], this.pos[1], this.size[0], this.size[1]);
  this.ship.attr("fill", "red");

  return this;
}

function move(ship) {
  var angle = ship.angle;
  var max_speed = 20;
  var acc_speed = 300;

  var acc = 0;
  if (ship.thrust) {
    acc = 0.25 * acc_speed;
  }
  else { //slow down
    if ((acc - (0.25 * acc_speed)) > 0) {
      acc -= 0.25 * acc_speed;
    }

    else {
      acc = 0;
    }
  }

  var speedx = ship.vel[0] + acc * Math.sin(angle);
  var speedy = ship.vel[1] - acc * Math.cos(angle);
  var speed = Math.sqrt(Math.pow(speedx,2) + Math.pow(speedy,2));

  var speedx = ship.vel[0] + acc;
  var speedy = ship.vel[1] - acc;
  var speed = speedx + speedy;

  if (speed > max_speed) {
    speedx = speedx / speed * max_speed;
    speedy = speedy / speed * max_speed;
  }
  ship.vel = [speedx, speedy];
  ship.pos = [ship.pos[0] + speedx * 0.25, ship.pos[1] + speedy * 0.25];
  ship.ship.attr({x: ship.pos[0], y: ship.pos[1]});
  ship.ship.rotate(angle);
  ship.angle = 0;

  delete this.thrust;
  delete this.west;
  delete this.east;
  delete old_angle;
  delete angle;
  delete max_speed;
  delete acc_speed;
  delete acc;
  delete speedx;
  delete speedy;
  delete speed;

  return this;
}

var player1 = new Player("Player 1");
setInterval(GameLoop, 30);

Ok I commented out some code and have found the offending line, its

ship.ship.rotate(angle);
After commenting that line out javascript is using 4500K.
any idea why this is causing the problem, and how can I still rotate my object without this bit of code?

Answer 1

The documentation of rotate in RaphaelJS says the following:

Adds rotation by given angle around given point to the list of transformations of the element.

That certainly sounds like a potential culprit. The critical words there are add and list.

What does the transform function show you when you rotate an element twice? My suspicion is that calls to rotate accumulate larger and larger transformation strings. if that’s what’s happening, you can reset the transform,

el.transform("");

and that should clear the problem you’re seeing.