A Game Engine From Scratch in JavaScript Part 3 – Breakout

I wanted to make sure this engine would be comparable or maybe even easier to use than some of the other engines out there, with the ability to build a variety of game types and not just the game I was hoping to build. For this, I decided to go with Breakouts, which is a website that aims to help other developers compare and choose a game engine. So here’s my attempt…

It’s a work in progress, please check back soon for the full article:

View post on imgur.com

This GIF was recorded at 20 FPS; the game runs at 60.

Working: sound effects, level progression, game states, mouse/keyboard input, collision (a bit buggy), ball-bounce physics (a bit crude), sprites, spritesheets, sprite animations, rendering layers, async module/asset loader, fixed timestep. These are all provided by the core engine.

Not Working: power-ups, variable timestep, improved physics.

The walls consist of 4 entities without a sprite or text property, so they don’t do much until we set their hasPhysics property to true:

north_wall.hasPhysics = true;

Once we do that, the wall becomes part of the physics pipeline, and a callback event will fire whenever the wall experiences a collision. We subscribe to the callback event in our game module like this:

north_wall.on(“collision”, function() {
});

Observing the callbacks with console.log(), I could see walls colliding with other walls, not good! Since the north wall overlaps the east and west walls, they were colliding all the time. So I added two properties to the base entity – tags and ignores. We then set all walls like this:

north_wall.tags.push(“wall”);
north_wall.ignores.push(“wall”);

This tells the wall to ignore any other entity with a “wall” tag during collision checks.

(WIP)