Oxymora

Quest of the Rainbow Arsonist

Comment

Inspiration

TeeWorlds (2007), Super Meat Boy (2010), Terraria (2011), BattleBlock Theater (2013), Starbound (2016). At first glance, these 5 titles share very little with each other. They're all video games, they all feature platforming mechanics... Oh, and one more thing: They're all developed with Windows/MacOS users in mind.

With the exception of Starbound, all of these games are relatively old, having been around with me since I was still a middle schooler starting off with Computer Science and Web Development. These were both my forms of entertainment, as well as my introductions into what fantastic UI/UX looks like.

Times have changed significantly since that time. The HTML5 cache manifest for offline data storage was introduced & deprecated, the HTML5 canvas has become more powerful and more efficient, several services such as Heroku & GitHub Pages now allow for quick and easy hosting for personal projects. Just a few years ago, free hosting meant setting up with Google Cloud on Google App Engine or using a super shady 000WebHost.

Yet, despite all of these changes, the most we've seen with in-browser gaming has come from the dying Adobe Flash, or the Unity web plug ins. The only HTML5 web games out there are typically top-down, mechanically simple "*.io" games, designed more for a quick fix than a construction of worlds.

With a little ingenuity & a lot of naivety, I want to challenge that. I want to build a proof of concept of what is possible in my time at PennApps, and grow that over time into a whole new game, and demonstrate the potential of world building through the web-based medium that has captured my attention for as long as video games have.

What it does

A fast-paced & mechanically challenging boss fight between Oxymora, the Rainbow Arsonist, and Jeeeeney, the absolute emodiment of my irrational fear of a rogue genie from Aladdin.

WASD keys are used to conjure and throw potion-infused fireballs in any of the four cardinal directions, the space bar is used to jump/fly, the two brackets [ and ] are used to cycle between potions (of which there are only two). The blueish-white potion is an ice-based projectile; use this for higher damage and higher velocity. The green potion is a health-restoration projectile, or, as I like to call it, the Healing Gun.

There is a little randomness in the timing of the attacks and in the movements of the boss, but the game was continually playtested for balance. Learning the attack pattern is possible: watch for openings. When transparent, the boss can't receive or deal damage. Look for the holes in the bullet hell. The pattern is there.

How I built it

The game is a technical demo of the capabilities of pure HTML5 and JavaScript. Both the graphics engine and the physics engine are in-house solutions, no frameworks were involved. The sprites & sound effects are free assets sourced from Itch.io for the sake of time, tweaked and modified by hand in Pixlr, an appropriately browser-based photo editor.

Challenges I ran into

HTML5 presents several challenges in regards to performance. First and foremost, sprites cannot be flipped or rotated without significant performance drops, so flipped/rotated sprites were all created with Pixlr. By choice, I developed the physics & graphics engines from scratch for the project, which admittedly felt like biting off a lot more than I could chew.

Accomplishments that I'm proud of

Developing Oxymora pushed me far out of my comfort zone as a developer. With zero reliance on frameworks or JavaScript libraries, I maintained a steady and grueling pace in creating the mechanics of the game and the engines that powers it. All in all, I'm just proud that I'm capable of creating games that I enjoy just as much as the ones I often indulge in.

What I learned

  • Working with sprites & animating them using HTML5 canvas
  • Optimizing assets and operations for increased performance
  • Developing fluid and intuitive in-game physics

What's next for Oxymora

By the end of the 24 hours, most of the code was very, very wet (as in, opposite of Don't Repeat Yourself and keeping code dry), and large strands of spaghetti. In the future, I not only want to expand the world of Oxymora, but also refine the engine that it was built upon. Though it draws inspiration from Terraria, I'd very much like to avoid building a massive world on top of a messy framework. The in-house physics engine will aid in creating the multiplayer game that I've dreamed of making, as understanding the physics will help me extrapolate player movement even in spite of higher latency, as well as mitigate cheating by detecting anomalies.

Built With

Share this project:

Updates