Lumenia – My First HTML/JS Web Game

Lumenia – My First HTML/JS Web Game

I’ve been wanting to create a basic game for a long time. Specifically a game you can play online since this is where I spend a lot of time.

Because I knew I wanted to be able to build it fairly quickly due to being a busy Dad, I purposefully thought about minimal ideas. And, not just because of time or being easier, I also have always loved minimal design.

Besides minimal, I’ve also always been drawn to zen, meditation, energy, light, goodness… I quickly latched onto “light.” We are all made up of the same things as stars. So, I thought that it would be cool if in the game you were light. A ball of light floating around and doing something.

At first I thought about a mini open world. Go anywhere as light. Do… things. But, was that minimal? And, especially when it comes to creating a mini web game, would that be possible and/or fun for me or others? Constraints can be more fun or challenging. Like, not being able to go back, or how in some games the screen auto scrolls.

As I’m tossing around ideas in my head and thinking, “keep it simple,” Pac-Man pops into my head. Boards… Stages… One screen at a time. That style is perfect for the web. Perfect to stick on any webpage without anything freezing or lagging. Perfect for my goals.

That’s when I decided on the main premise of the game. You would be glowing light, going around picking up pixels of light. Because, 1) they give you nourishment and 2) you could be saving the light from something else… from darkness, from… black holes! Yes, black holes would be the enemy.

After settling on the idea I searched for existing frameworks/libraries that could help make this a reality faster. I needed something open source. Quickly I found Phaser. They have a non-open source editor, but their core game making code is JavaScript, and open source. Perfect!

Now, I know JavaScript basics. And, I’ve built websites and other things online since 2005. But…

  1. I’ve never built a video game
  2. I don’t know JavaScript enough to make a game within this month/year
  3. My goal was to get this done quickly (I’m currently looking for a new job which takes a lot of time, plus a Dad, plus trying to run other websites)

The solution? Cursor. I know, there’s AI lovers and haters. Sorry, haters. I’m really enjoying this tool. Could I have instead used ChatGPT, Claude, or any free AI chat? Yes. Eventually they would have helped me to create this. But, Cursor has a way of doing AI code generation faster and more organized especially on my Mac. It still messes up. There’s still trial and error and troubleshooting. Just not as much.

Even with AI it still took a couple of days to make adjustments and work out kinks. But, I’m happy with the end result. And, maybe I’ll add more to it in the future.

Check it out here.

How to play

If you have a keyboard, you use the arrow keys to move around as a little ball of light collecting light pixels. These give you health/power/ammunition for future boss battles, and they are your points/score too.

If you are on a touch screen you use the on screen joystick.

Also on screen is one or more black holes. They pull in what is close to them. So, they eventually pull in the same light pixels you’re trying to collect and if you get too close they’ll try to pull you in.

If you hit a black hole, as long as you have some light pixels, you’ll be okay at first. Each hit takes half of your light pixels. So, if you hit a black hole 2, 3, or 4 times in a row, you have to start over at level 1. But, you didn’t “die.” You got sucked up into the black hole and so you start over in another dimension. Which is just starting back at level 1, with 0 light pixels, and a different background color (new dimension).

Every 5 levels there is a boss battle. A bigger black hole that moves, and it moves faster as it sucks up more light pixels. In a boss battle you have to shoot light pixels at the boss (or mega) black hole. Each boss battle requires more and more hits to defeat the mega black hole. You shoot light pixels you’ve collected. So you want to aim carefully because each shot reduces your score. On desktop you shoot by using the spacebar, and on a touchscreen by using a button to the right that appears only during boss battles.

I wanted it to be a little challenging but not so hard that it wasn’t fun. So, the first several levels are pretty easy, and even later levels can be easy once you get used to the game and learn a couple of important techniques.

If you get frustrated or just want a meditative game, there’s also zen mode. Tap the ॐ at the top left of the screen (if it fades away, hover/tap in that area). In zen mode there are no black holes. No bosses. Just floating around collecting light. Listening to calming music (by Infinite Third).

Tap the star at the top left to see a leaderboard. You have to sign up and log in to save progress and be on the leaderboard.

Can you defeat darkness? Play now.

·

·

Billy Wilcosky