Making a basic browser-based game may not be as hard as you think. I suggest that you solve one problem at a time. If you take an object-oriented approach, you combine all of your solutions into a complete game. Taking this approach will make it easier for you to add features later. I started writing this in TypeScript, which was fine, but I switched to writing ES6.
Making the map
I first got the idea from EJS, so I decided to create the map from the graphic on that site. It has some land, some lava, some coins, the sky, and a player. I wrote some HTML/CSS, and it looked okay (which means it was terrible) but fine for what I needed. I ended up redoing the HTML/CSS later, and now it looks good. I was able to redo the HTML since I was using the same concept from the first attempt. If the player is over a coin, he earns a point. If the player is over the lava, he gets hurt.
Playa’s gotta play
I bound the keydown event to a method in my class. This gives it access to all the properties and methods in the class. If the player moves up, it gets his current position and moves it up a little bit. Left, move player left, and so on. The Element.getBoundingClientRect() method is what helped me the most. It allows me to tell if one element sharing the same space as another element. Now the player can earn some coins to take out his girlfriend. The player does need to be careful because there is lava which will take away all the coins.
Sometimes the person controlling the player might intentionally try and go off the screen. We can’t let that happen so we need some checks in place to prevent it. Relying on our friend, Element.getBoundingClientRect(), allows us to prevent the player from going places we don’t see fit. Imagine the player is wearing a shock collar like one a dog may wear. It prevents unexpected moves.
At first I thought this was going to be really difficult to accomplish. I haven’t implemented this at the time of writing this post. Here is how it will work:
- I’ll create a setInterval if the gravity property is true
- Every X seconds it’ll check if the user is in the air
- If the user is in the air, the user will be moved down
- This will repeat while the game is active
I’m pretty sure real life gravity works in a similar way, but I’m not a physics expert.
Some tasks may seem impossible, but they might not be. They might just take more time than you think it’s worth. The more you practice the impossible or difficult, the better you’ll get, and those tasks won’t seem as impossible anymore.