I started mak­ing this thing as a one-day ex­per­i­ment: a fun lit­tle browser-game I could craft be­fore com­mit­ting to the ever­loom­ing nev­erend­ing self-judo one-man-death­wres­tle called ex­ams. But it in­stead ended up spread­ing out sparse as in­tense hour-long cod­ing ses­sions through­out the Quarantine months.

This is how it turned out fi­nally:

To play this game in your browser, click here.

Before start­ing, the ques­tion was how I would sim­u­late the mo­tion of an oc­to­pus in the ocean. So I started with a pro­to­type in javascript. After some trial and er­ror, and some prim­i­tive physics, I had the rough be­hav­ior of the oc­to­pus down.

It worked as I’d en­vi­sioned but looked rather drab. So I found a place­holder an­i­ma­tion on Dribbble by Narubalie and put it in. At this stage I had to write an an­i­ma­tion-player for the game, be­cause HTML5 canvas can’t di­rectly play a gif.

Next I wrote an AABB col­li­sion de­tec­tion sys­tem (meaning non-ro­tat­ing rec­tan­gu­lar bound­ing boxes can now de­tect when they over­lap). So now I could fi­nally make a lit­tle is­land for the oc­to­pus to land on.

Next up is ob­vi­ously an an­gry en­emy an­gler fish. I found a cool an­i­ma­tion on Tum­blr made by Blabberf, and coded it’s mo­tion.

Now I wanted the oc­to­pus to be able to ex­plore the ocean out­side of the rec­tan­gu­lar box it’s con­fined in. So I wrote a cam­era sys­tem that will fol­low the oc­to­pus wher­ever it goes. I was also ex­per­i­ment­ing with dif­fer­ent speeds at this time so it might seem jumpy in the video.

Then I wrote the level man­age­ment sys­tem and made new com­po­nents (text, sta­tic im­age, etc) to build the UI of the game with. I found a nice oc­to­pus icon made by FreePik from flati­con.com for the ti­tle screen.

At some point, I re­al­ized that I could de­cou­ple the game code from the game en­gine code, so I did. Then, just for kicks, I made a Flappy Bird clone using only the Engine code, which was rather fun.

Now I wanted to an­i­mate my own main char­ac­ter in­stead of us­ing some ran­dom im­age on the in­ter­net. So I stud­ied a lot of videos on oc­to­pus mo­tion, and got to work on Piskel app, which is a nice browser-based pixel art soft­ware. After la­bor­ing over the mo­tion for days, this is what I came up with:

You’ll no­tice that this oc­to­pus is far more ex­ag­ger­ated in mo­tion than the pre­vi­ous one, which is in­ten­tional, and I’m rather proud of this.

Next, I made the an­i­ma­tion of the oc­to­pus crawl­ing on the floor.

You might no­tice that the sprites are lack­ing col­ors. That’s be­cause I’m not a good artist, and col­ors are dif­fi­cult.

Next I coded a quick back­ground par­al­lax sys­tem and a min­i­mal emit­ter sys­tem to emit bub­bles con­vinc­ingly. This is the end re­sult.

Then I burned out. And now I can’t bring my­self to even look at the code. Maybe you can, though. So check out the code on GitHub.

Conclusion

I worked on this pro­ject with­out much plan­ning, or de­sign. So it was in­ter­est­ing to see the ab­strac­tions al­most form them­selves, and to see the ar­chi­tec­ture emerge spon­ta­neously from be­neath the in­signif­i­cant lines of code as I typed them.

Right in front of my eyes, the co­or­di­nate-based mo­tion wrapped it­self in a physics in­ter­face and neatly ex­posed meth­ods like applyForce (magnitude, angle). The Spritesheet an­i­ma­tion sys­tem amal­ga­mated with Motion and Collider to from a high level Character ob­ject for my ben­e­fit. Components or­gan­ised them­selves into cat­e­gories like drawables and managers, which al­lowed for other in­ter­est­ing ex­per­i­ments like duck-typ­ing-aided com­po­si­tion.

Not to mean that it is per­fec­tion, of course. Far from it. On the en­gine side, the API is painful, there’s a lot of ves­ti­gial code, scenes are not iso­lated (and col­lid­ers leak through by de­fault), there is no ob­vi­ous way to han­dle in­stan­ti­a­tion of mul­ti­ple ob­jects, and there’s a lot of co­he­sion among com­po­nents. On the game side, the con­trols are ter­ri­ble, the world is in­com­plete, and mov­ing around is clumsy at best. The only con­so­la­tion is that my next game will be eas­ier to make be­cause of this ex­er­cise.