Reduce object allocation / garbage creation

Author: walsh9

dist/bundle.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';

dist/bundle.js.map

@@ -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/character.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/graphics.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();
   }
 }