Backlot: Vanilla Javascript Game Engine

This is a small web-based game engine I've been developing, that uses standard vanilla Javascript.

The engine started with the first post on this website, where it was just the rendering loop. By my first js game engine it had developed the ability to take user input and control entities.

During the development of my top-down RTS game engine, the engine evolved a lot as it picked up physics, sprites, sound effects, more efficient rendering with culling, moving cameras, and more advanced entities. This is where it really evolved from just a handy toy to a small but useful (to me, at least) Javascript game engine.

This engine began to really solidify and polish into its current version by the time of working on axiom and my recent isometric experiment.

Demo Code

Here is a toy project built with Backlot that fakes a parallax view:

<script type="text/javascript">
  const game = new Game("game_canvas");
  game.set_fps_meter("fps_meter");

  class Wall extends Entity {
    constructor(x, y, width, height, angle){
      super(x, y, width, height, angle);
      this.add_physics_body({isStatic: true});
    }
  }

  class Player extends Entity {
    constructor(x, y){
      super(x, y, 32, 32);
      this.add_physics_body();
    }
    update(dt){
      super.update(dt);
      let x_offset = 0;
      let y_offset = 0;
      if(this.up) y_offset -= dt*500;
      if(this.down) y_offset += dt*500;
      if(this.left) x_offset -= dt*500;
      if(this.right) x_offset += dt*500;
      Matter.Body.setPosition(this.physics_body, {x: this.x+x_offset, y: this.y+y_offset});
    }
  }
  game.set_scene({
    world: new World(1920*3, 1080*3),
    setup: function(){
      this.player = new Player(0, 0);
      this.add(this.player);
      for(var i = 0; i < 10; i++){
        for(var j = 0; j < 10; j++){
          for(var l = 0; l < 3; l++){
            this.add(new Wall(-1024+(j*256), 0, 64, 512), 90+10*l);
          }
          this.add(new Wall(-1024+(j*256), 0, 64, 512), 25);
          this.add(new Wall(-1024+(j*256), 0, 64, 512), 200);
        }
      }
      this.add(new Wall(512, 0, 512+64, 512), 110);
      this.add(new Wall(512, 0, 512+64, 512), 90);
      this.add(new Wall(-512, 0, 512+64, 512), 110);
      this.add(new Wall(-512, 0, 512+64, 512), 90);
      this.game.engine.viewport.track(this.player);
    },
    handle_key(event, pressed){
      if(event.key == "w") this.player.up = pressed;
      if(event.key == "s") this.player.down = pressed;
      if(event.key == "a") this.player.left = pressed;
      if(event.key == "d") this.player.right = pressed;
    },
  });
  game.run();
</script>

Demo Programs

These demos are some of the projects built with some version of the Backlot code.

Top-Down RTS Game Prototype

Series of updates where I work to build a top-down tank game.

Axiom Shooter

Top-down shooter set in space with parallax environment features.

Isometric Prototype

An isometric prototype for a role-playing game.

Parallax

Experiment with parallax layers.

Second Version

Floodit Game

Game where the player changes the color of the flood to try to consume the whole board.

Plates Game

Game where the player tries to click on as many plates at once as possible.

Fantasy World Mapper

Tool for adding cities/towns/inns/roads to fantasy maps.

The Engine Code

The code for this engine is available on GitHub:

View Code