When I was a wee lad, I spent an ungodly amount of time playing video games, any free time I had I spent playing games. And eventually I went further than just playing them, I started modding them.
Adding cars and anime characters to GTA San Andreas was some of the more fun times I've had.
But while doing all that and repeatedly bricking the game. I thought to myself, If I can mod a game, surely I can create my own. And that got me interested in coding with the ultimate goal of making a game myself, even if that meant working at a game development studio one day.
Many years later I land a great job as a Web Developer. Life happens and bills need paying, so I was happy with this, and the dream of being a Game Developer had been put to rest a long while ago. I enjoy being a web developer. I get to build applications and dashboards that track financials and show how money moves in and out of wallets. Allowing users to know if they can afford their next purchase, and how much money they have, and how much money they've spent and I'm boring myself just talking about this...
I've spent years looking at transactions, charts and dashboards. But in recent years that little voice in my head begun to talk to me again, but in a sane way, telling me to give the game dev thing another try.
And now that I'm older, wiser, and I write more code in a day than the kid me ever has, surely I have a better chance of getting it right, right?
The obvious thing at this point would be to learn a game engine, Godot; Unity; Unreal. something along those lines. And I will get to that, but in the meanwhile I had another idea. I am a web developer, I thought to myself in a sane way, I know TypeScript, I assured myself, I know React, I hoped to myself, and I've deployed a website before, I told my wife. So my game plan is simple. I will start with what I am most familiar with.
Instead of simultaneously learning a new programing environment, a new engine, a new rendering system, a completely different development workflow, and losing my sanity along the way, why not make my first game on the web.
Another advantage of this is that it makes things easy for everyone, yes you included. All you have to do is visit a website, no download, no install, no signup, just visit a website enter a name and paly the game. So simple, so easy.
I wanted the game to be something simple too, something I could solo build, something I can finish too. The idea come from another game I'd played. In the game you press a button for as long as you can. Whoever pressed the button the longest wins, that's it. When I played it the first time I thought that's interesting, and then a few seconds later I thought this is boring. And that's where I got the idea. What if I kept the interesting part, the competition around pressing a button, but got rid of the boring part, staring at a button for 4min straight. So I need something for your eyes to look at, something for your brain to think about, something for your eyes to listen to, and some kind of risk and reward structure.
So I made a hot-air balloon game, called taptaptap. The game is simple, you get a hot-air balloon. You press the big red button. The balloon raises higher. Simple, but their is a catch. Every time you press the button the balloon generates heat, the faster you tap, the hotter the balloon gets. If it gets to hot the balloon EXPLODES. So now there's a problem, you want to tap tap tap and click as quick as possible, but tapping too quickly will result in a burst balloon. You can slow down and let the balloon cool off, but you'll lose points and someone else will overtake you.
I've also added multipliers that can help you climb faster without needing to tap the button so much. And because it's multiplayer, there's a leaderboard. Just for some healthy competition.
Now, how did I make this game? Like I said earlier, I used the tools I know Next.js; React; Typescript; and some CSS magic. It's very unconventional, but Tony Stark built the Arc Reactor in a cave with a box of scraps.
The game is basically a regular web UI. The sky is a CSS gradient. The clouds and stars are DOM elements. The balloon is a React element. The UI is React, and the giant red button is unsurprisingly a button.
With all that, this game still took me many months to get going, even with help from some AI agents, free version aren't exactly the most helpful. The first version was nowhere near what you see today, and even after I finally got the game live it still wasn't finished, in fact it's currently still not finished. But it's not crashing, at least not on my machine.
There are still bugs I need to fix, and things I want to improve.
The end goal is not to make a web game. My goal is to make a mobile game, and eventually a PC game. That's where I'm ultimately heading. I don't know exactly what that game will be yet, I have some ideas. I don't know which engine to use, the one that does what I need it to sounds like the best option. And I don't know how long it will take, GTA 6 will be out before my game at this point.
let me know what you think of the game which can be found here: taptaptap.click
And whoever gets to the top of the leaderboard will get a shoutout in my next post.
That's it from me, thank you for reading.
Top comments (0)