I've started working on a simple interactive version of my portfolio using Phaser.js.

Motivations

• I wanted to learn how to use a JS framework to build simple games, as I'm planning to make one of my own in the near future.
• I wanted to start learning some common patterns and best practices for game development (e.g., state management, event handling, creating an inventory system, etc.).
• I thought the idea of having a gamified version of my portfolio would be fun. Being fun is generally enough of a reason for me to do something.
• Making a game, however small, allows me to exercise those creative muscles that I often feel are atrophying in daily life. It allows me to practice those skills and passions that I find I have less and less time for: music, sound design, art.
• I'd like to experiment with the concept of micro-frontends and having two versions of my portfolio (standard and game-like) seemed an okay use case. I'm fully aware it's total overengineering and overcomplicating things, but the whole point of personal projects is to learn new concepts, skills and experiment.

Learning experience

• Some skills and patterns transfer nicely from "standard" programming to game development, whereas others are purely game specific.
• The Phaser docs are, in my opinion, not very user-friendly. In fact, I think they need a major overhaul. I checked them a few years ago for the first time and they haven't improved at all. On the other hand, this might be an opportunity to contribute, perhaps?

Progress so far

• Learned how to structure the game in different Scenes. Created a "Character Selection" and a "Town" scene. Working on adding scenes for buildings that can be entered.
• Learned to how import, load and add assets, both custom (e.g., music, sound effects) and pre-made (e.g., textures)
  • You can listen to some preview music on my SoundCloud
• Learned to extract spritesheet frames for animations
• Worked on object management and physics interactions (WIP)

Future plans

• Finish the game (smartarse...)

Jokes aside:

• Add custom music to each scene.
• Complete each scene.
• Add at least one NPC and some dialogue.
• Refactor, simplify and optimise code.
• Deploy in a way that it's compatible with the micro-frontends approach.

Sources

• Phaser.js docs
• Phaser.js forum (there is also an official Discord, but I haven't used that yet)
• StackOverflow (surprisingly, huh?)
• Claude.ai - to be used in moderation. The advantage is that it's a million times better than the official docs and it's obviously been trained on thousands of lines of game code out there.