Reduce object allocation / garbage creation

src/character.js

@@ -18,7 +18,7 @@ export default class Character {

  update(time) {
    let footPos = this.state === 'running' ? 11 : 18;
    let floorHeight = 117 - this.map.whatsHere(this.pos.x + footPos).height;
    let floorHeight = 117 - this.map.heightHere(this.pos.x + footPos);
    if (!near(this.pos.y, floorHeight, 0.1) || this.velocity.y < 0 ) {
      if (this.velocity.y <= 0) {
        this.state = 'jumping';

src/graphics.js

@@ -39,18 +39,19 @@ Graphics.drawTile = function(tileSet, tileX, tileY, x, y, ctx) {
    x,  y,  tileSet.tileWidth, tileSet.tileHeight);
};

const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 .!?,\'":;_-+=/\\[]()#@%{}<>^*&~|→←↑↓○●$€¥'.split('');
Graphics.drawText = function(tileSet, text, x, y, ctx) {
  var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 .!?,\'":;_-+=/\\[]()#@%{}<>^*&~|→←↑↓○●$€¥'.split('');
  var self = this;
  if (x === 'center') {
    x = Math.floor((ctx.canvas.width - text.length * (tileSet.tileWidth + 1)) / 2);
  }
  text.split('').forEach(function(char, i) {
    let charIndex = chars.indexOf(char);
    let charX = x + i * (tileSet.tileWidth + 1);
    let charY = ['g', 'j', 'p', 'q', 'y'].indexOf(char) > -1 ? y + 2 : y;
    self.drawTile(tileSet, charIndex, 0, charX, charY, ctx);
  });
  let char, charIndex, charX, charY;
  for(let i = 0; i < text.length; i++) {
    char = text.charAt(i);
    charIndex = chars.indexOf(char);
    charX = x + i * (tileSet.tileWidth + 1);
    charY = ['g', 'j', 'p', 'q', 'y'].indexOf(char) > -1 ? y + 2 : y;
    this.drawTile(tileSet, charIndex, 0, charX, charY, ctx);
  };
};

export default Graphics;

src/map.js

@@ -1,4 +1,13 @@
import { randomBetween } from './utils';
const Y_FROM_FLOOR = [128, 112, 96, 80, 68];
const GROUND = 0;
const COLUMN_ROOT = 1;
const COLUMN_MID = 2;
const COLUMN_TOP = 3;
const CLOUD_RIGHT = 8;
const CLOUD_LEFT = 7;
const PLATFORM = 9;
const HEIGHTS = [-100, 13, 29, 45, 61];

export default class Map {
  constructor(tiles, mapstring) {
@@ -13,41 +22,36 @@ export default class Map {
  _randomCloud() {
    return {x: randomBetween(-6, 160), y: randomBetween(0, 120), speed: randomBetween(0.05, 0.2)};
  }
  update(time) {
  _updateCloud(cloud, time) {
    if (cloud.x > -40) {
      cloud.x -= time.delta * cloud.speed;
    } else {
      cloud.x = 160;
      cloud.y = randomBetween(0, 120);
      cloud.speed = randomBetween(0.05, 0.2);
    }
  }
  update(time, delta, ticks) {
    this.x -= time.delta * 0.1;

    this.clouds.forEach((cloud) => {
      if (cloud.x > -40) {
        cloud.x -= time.delta * cloud.speed;
      } else {
        cloud.x = 160;
        cloud.y = this._randomCloud().y;
        cloud.speed = this._randomCloud().speed;
      }
    });
    for(let i = 0; i < this.clouds.length; i++) {
      this._updateCloud(this.clouds[i], time);
    }
  }
  whatsHere(offset) {
    let heights = [-100, 13, 29, 45, 61];
  heightHere(offset) {
    let index = Math.floor((-this.x + offset) / this.tiles.mapTiles.tileWidth);
    let tile = this.stage[index];
    return {height: heights[tile]};
    return HEIGHTS[tile];
  }
  render(graphics, ctx) {
    const y = [128, 112, 96, 80, 68];
    const GROUND = 0;
    const COLUMN_ROOT = 1;
    const COLUMN_MID = 2;
    const COLUMN_TOP = 3;
    const PLATFORM = 9;
    const CLOUD_LEFT = 7;
    const CLOUD_RIGHT = 8;
    let leftmostTile = Math.floor((-this.x) / this.tiles.mapTiles.tileWidth);
    let rightmostTile = leftmostTile + 10;

    this.clouds.forEach((cloud) => {
    let cloud;
    for(let i = 0; i < this.clouds.length; i++) {
      cloud = this.clouds[i];
      graphics.drawTile(this.tiles.mapTiles, CLOUD_LEFT, 0, cloud.x, cloud.y, ctx);
      graphics.drawTile(this.tiles.mapTiles, CLOUD_RIGHT, 0, cloud.x + 16, cloud.y, ctx);
    });
    };

    this.stage.forEach((t, index) => {
      if (index < leftmostTile || index > rightmostTile) {
@@ -61,7 +65,7 @@ export default class Map {
      case '2':
      case '3':
      case '4':
        graphics.drawTile(this.tiles.mapTiles, PLATFORM, 0, x, y[t - 1], ctx);
        graphics.drawTile(this.tiles.mapTiles, PLATFORM, 0, x, Y_FROM_FLOOR[t - 1], ctx);
        break;
      }
    });

src/timer.js

@@ -1,7 +1,9 @@
export default class Timer {
  constructor(game, timeStep) {
    this.runTime = 0;
    this.ticks = 0;
    this.time = {};
    this.time.runTime = 0;
    this.time.ticks = 0;
    this.time.delta = 0;
    this.started = false;
    this.timeStep = timeStep;
    this.game = game;
@@ -18,12 +20,12 @@ export default class Timer {
    let frameTime = newTime - this.currentTime;
    this.currentTime = newTime;
    while (frameTime > 0) {
      var delta = Math.min(frameTime, this.timeStep);
      frameTime -= delta;
      this.runTime += delta;
      this.game.update({delta, ticks: this.ticks, runTime: this.runTime});
      this.time.delta = Math.min(frameTime, this.timeStep);
      frameTime -= this.time.delta;
      this.time.runTime += this.time.delta;
      this.game.update(this.time);
    }
    this.ticks++;
    this.time.ticks++;
    this.game.render();
  }
}