Hi to all!

I've created a simple SpaceInvaders with only JavaScript and CSS game using only CSS, javascript and HTML.

The result was really interesting, and I wanted to move forward to something more complex, like animated sprites and collision detection, using typescript instead of javascript, emulating the Unity 3D engine lifecycle methods and behaviours.

Step 1 - converting js to ts

This was the easiest step, I've installed webpack and created a webpack.config file to compile ts files into js and to copy static files under the build/ folder.

Step 2 - using background-image property instead of emoji content for sprites

I've tried to replace the emoji with a background-image property for enemies and player.

The result?

Really bad! My FPS drops down to 1/5 maximum FPS instead of 55/60 FPS!

So I've moved to html canvas!

Step 3 - HTML canvas

This step was one of the harders, I've recreated the entire sprite and game management using Transforms and generic classes, to handle my sprites position and scaling by an easy way.

So I've created a GameObject generic class, and it's factory to handle sprite creations and rendering.

The result?

Not bad at all, but still glitchy because I was using the 2d canvas rendering context, which is less performant than the WebGL content.

Step 4 - Moving to ThreeJS and start creating a real Engine

The final solution was to use WebGL, and to use it easily I've included ThreeJS into my project. Just a few reworks and the game works really good!

The result?

Amazing! The game is running at 60 FPS!
Here there is the result video!

Conclusions

I've created a simple HTML Game Engine! Using the Unity C# lifecycle methods and other Game Development behaviours, and I want to improve it in my free time.

If anyone wants to collaborate the repo is free to use here.

I'll publish a playable demo when I've done the game ^^