Wednesday, 10 May 2023

Sperminator: A TeochewThunder Project

Yet another project is complete!

Years ago, back in 2015, I embarked on a learning project to experiment with mobile technology. Halfway through my journey, I began toying with Android's built-in gyrometer. This resulted in me making a simple compass app.

Hey, don't laugh. We all gotta start somewhere, right?

Well after that was done, I had another thought. What if I made a scrolling game where I had to evade obstacles by tilting the phone? What if the game landscape was a birth canal and the player was a tiny sperm wriggling across it?

The idea was corny. Silly. Utterly ridiculous. And so me.

Thus, the first version of Sperminator was born.

Sperminator v 1.0

At the time, I was still deeply mired in classic HTML, CSS and JavaScript. I used Chinese to provide instructions and text, to take up less screen space. I created all manner of stage bosses, including one that looked like Captain Jack Sparrow. In fact, the player sprite itself looked like Captain America!



Every animation sprite was basically CSS3, painfully battered into submission. I ran into all sorts of code design problems because I was basically coding on the fly, with no thought to scope. My naming conventions were horrible. That was where I was as a JavaScript coder. I was more concerned about getting it to work, than about proper practices.

For months, I slaved over my vision. And finally it was done.


I exported it to the Android platform, and got people to play it. For months, I had test and feedback groups in WhatsApp. I even got a kick out of having people play it and telling them, completely tongue-in-cheek, to "eat the sperm". When I went for job interviews, this was what I exhibited to prove I could code.

Yeah, I sure got a whole lot of mileage out of that one.

Months went by. A year. My old phone died, and as I discovered new technologies to play with, whatever meager skill I'd picked up with Android deployment, atrophied. I was having career problems, what with the companies I was in, shutting down and all. Suffice to say, I had bigger fish to fry. Much bigger. The existential kind.

And thus my little foray into writing an Android game, experienced death via atrophy.

Sperminator v 2.0

By the time I got back to this in 2020 or so, I had picked up new things. My JavaScript was arguably better. I was ready to give this a second go.

The first thing I did was scrap the CSS animation, and instead make everything SVG based. This gave me a whole lot more leeway to add details to the graphics I had not been able to previously without a whole lot of pain.





My JavaScript was more structured. I put things in objects, with methods, and called them without running into scope problems. To save development time, I used jQuery.


One of the biggest and most obvious things I changed, from a technical perspective, was that I no longer bothered about exporting it to Android. I let it play on the browser. My wife (I was married by that point), helped me take videos of the on-screen animation while I played the game. I don't think she thought much of my work, to be honest, but she was probably glad that these are the nerdy things I occupy myself with.

And in 2022, after some cleanup, this is what we have. It not only looks better, it moves better and I have little to no cross-browser issues.




The gameplay was improved as well. I reproduced the rules from Version 1.


Life: Represented by a red bar. It is reduced by bumping into bacteria. If it is reduced to 0, Sperminator is dead and the game is over. It can be replenished by grabbing Cross icons.
Energy: Represented by an orange bar. Going into Turbo mode (moving fast) and bumping into other sperm reduces it. If it is reduced to 0, Turbo mode is no longer possible. It is replenished by grabbing Lighting Bolt icons.
Star Power: Represented by a yellow bar. Constantly goes down. Once it is full, Sperminator gains the ability to replenish Life by "eating" other sperm. It is replenished by grabbing Star icons.
Shield: Represented by a blue bar. Once a Shield icon is grabbed, the bar is full and starts draining. Until it reaches 0, Sperminator is immune to bacteria and other sperm.



And the bosses! I went for a spiky-haired punk, the Jack Sparrow one from Version 1, and a bad bitch. I think the dialogue was improved too.




Epilogue

Sometimes it's rewarding to revisit a project and make improvements. In addition to discovering what you were capable of despite limited knowledge, you get to add on to what you did previously, now armed with both experience and more knowledge. The stark difference between Version 1 and Version 2 of Sperminator, is testament to this.

Hope it went swimmingly for you,
T___T

No comments:

Post a Comment