Touch (or click!) on the left/right part of the frame to move left/right. The goal is to explode rocks and flying saucers. Play in full screen.

Background and motivation

To summarize the motivation of this project, I love making games and I’m really interested in web technologies. Recently, I decided to learn about shaders, something I’ve wanted to do for a long time. I found out interesting tutorials1 and it seems that Three.js is great for that. I also think making games for mobile phones is an interesting challenge with strong input and compute constraints. Besides, I’ve been reading about ECS (Entity Component System) and coroutines. So, I thought this project would be a good chance to try all these things together.

My goal was to do a small project in my free time over a few weekends. I wanted to mix different parts of game development and web technology. It was important for the project to be simple and fit into my spare time. This was a chance for me to learn new things and have fun 🚀

Key Features and Learning Points:

  • Shaders: I’d like to try on one hand vertex and fragment shaders, and on the other hand the EffectComposerof Three.js.
  • Particles: I wanted to have a visually appealing game, with a lot of effects like particles. So I wrote a small particle system, that ended in another shader.
  • Coroutines: I wanted a simple way to organise sequences of events in the game. Sush sequences happend all the time and can be quite complicated like you have a bullet, if it hits something, you want to have multiples actions happend: delete the bullet, delete the thing it collide with, create particles

Next steps:

In the next articles we will see:

  1. For instance on Ben Chung’s blog and on Lee Stemkoski’s three.js examples. ↩