Building an arcade game within my portfolio
I'm gamifying my website to get more client work
Issue #30
Hey! I’m Alyssa X, a serial entrepreneur building 12+ products by myself. This email is part of my maker journey, which you’re subscribed to. Feel free to forward it to others if you find it interesting! You can support me through GitHub Sponsors, I’d really appreciate it! ❤️
Hey all,
It’s been a while since I last wrote for the newsletter. I’ve been busy with life, trying to think of what to do and what to work on. Recently I’ve been rebuilding my portfolio from the ground up, so I thought I would share my progress with you.
Before I do that though, it would be great if we could keep in touch (with the Twitter chaos, it’s all a bit worrying), here’s where you can find me:
Redoing my portfolio
I spent the past few months thinking of products to build. I had many great ideas, but ultimately there was nothing that appealed to me as a way to monetize and make side income at the moment.
Instead I decided to focus more on contract work through freelancing. In order to get more opportunities I figured I should make it more prominent, so I thought I could redo my portfolio to attract potential clients.
So I made some designs:
I wanted something very simple like I have right now, just better designed with some images and videos (which would go on each of the different products). I also thought it needed a call to action, for now it says “Hire me” but I’m trying to think of ways to make it clear what is it that I am available for, so I get the right opportunities in my inbox.
That said, I also wanted the site to stand out a bit. I decided I could add a dedicated page to share some of the products I use on the daily, which I designed:
I’ve seen other people do this, and I thought it was kind of cool. I’m also curious about affiliate / referral programs so I thought this could be a great way to test them out (with a disclaimer, of course). This way I could monetize my own site.
Despite adding this new page, the portfolio still felt pretty basic. I not only wanted it to be unique, but also fun and interactive, something memorable. So I came up with a bit of a crazy idea. What if my portfolio had a game in it?
My plan was simple. Create a game that’s simple enough to play, works across platforms, and is easily shareable. I figure if people share the game around, they would be leading people to my portfolio, and get me more leads. Plus if the game was good enough I could put it on Product Hunt as a product of its own. Pretty neat!
Building a “portfolio game”
At first I was a bit overwhelmed with all the possibilities. I decided I needed to narrow this down (do I build a RPG, a platformer, arcade game, story-driven game…?). Based on the criteria I had set, the game needed the following:
Replayability. It couldn’t be too long, and it needed to be different enough on each playthrough.
A hook. I figured I needed something to keep players captivated, a score of sorts that they would have to beat. If I made that score global there could also be more competition and shareability.
Responsive, working on different devices. This one simplified things a lot. The game bounds had to be flexible so it would be easy to implement for different resolutions, and the controls had to be simple to work on mobile, so no keyboard or joystick, if possible working with just one finger.
Simple artstyle. I wanted it to fit with the website, so it had to be minimal. I’m also not a great artist, so it had to be something I could put together in Figma.
Fast-paced, fun. While I do love slow paced story driven games, I felt like if I wanted people to stay on my site the game had to be flashy, fast, and fun.
With that in mind, I ended up with an arcade type of game, where the objective is to survive the longest amount of time, while collecting items and avoiding enemies. Here’s a quick Figma concept I made:
Doesn’t look like much, and that’s a bit of the point. I wanted to focus on gameplay, keeping everything else fairly simple. I put a timer on the center as it will be the main thing for the game, with players trying to beat their old time. They can control a ball with their cursor (more on that later), while getting a star shape that’s positioned randomly in the canvas. Then there’s different sorts of enemies:
Spikes, which spawn at the top and left edges of the screen (I could do the other 2 edges to add difficulty) and move towards the opposite edge.
Bombs, which spawn randomly in parts of the canvas, and have a timer (using a radial gradient) that when it runs out triggers an explosion (if you touch the bomb or are in the radius of the explosion, you take damage).
Projectiles, spawning at the edges of the screen, they follow the ball for a few seconds before exploding.
I have other enemies in mind, such as lasers that go from edge to edge of the screen, or portals for teleportation, among others.
In order to make the game fun I also thought I would make it get progressively harder, so only certain types of enemies appear at the start, in smaller numbers and slower speeds. I’d like to do a wave system too where the game informs you about any new game mechanics at any time (see in the concept image).
I did some prototypes within Figma to test it out and it all looked pretty good, so I decided it was time to move on to the implementation.
Implementing my portfolio
I decided to do things a bit different this time. I felt the website would be too simple for me to build in jQuery, so instead I decided to use Next.js for it, deploying in Vercel. Lately I’ve been following a few courses (I highly recommend this one for full-stack development specifically, if curious) to try to get better at development overall, so I figured I should test out my skills.
I set it all up, and to be honest at first I was a bit intimidated. I think having the code divided into lots of tiny components is not my preferred way of working, and it does take longer than simply scrolling to a certain section like I would with plain Javascript, but I quickly got the hang of it and up to speed.
I first set up the portfolio itself, with a layout and the 2 pages for my products and the affiliated ones. It didn’t take long at all to implement:
I decided to add videos / GIFs as the thumbnails for my products to make them more eye-catching, and have them only play on hover (not to overwhelm the user). I still need to make copy for each product and populate it all accordingly, but I can always do it later as it’s pretty easy to do.
Then I moved on to the game itself, which was the harder part. Usually when I create games in Javascript, I do so using HTML5 canvas, which works great for all sorts of things (I’ve used it before to create platformer games, or RPGs, among others). There’s also lots of libraries and frameworks you can use with it to make it easier to make games.
That said, I wanted a challenge, so instead I decided I would make the game without canvas.
The first thing I worked on was the player. Originally I wanted it to be the mouse, so the user could just move it around with ease, but I realized it caused problems when detecting collisions if the player moved too fast.
So instead I came up with a mechanic to have the cursor guide a ball with a maximum speed, so it would always be able to detect collisions:
The next things were very quick to add. First was the spike enemies, which I spawned randomly using the screen width and height, and then animated towards the opposite edge of the screen. Then I added the collectible for the player to get, spawning at random as well. I also made a very simple UI with the timer, score, and lives, based on the Figma designs:
It already looked way more fun. I made sure to add some screen shake effect when the player gets hurt, and immunity to give the player some time before the start of the game and after getting hit by enemies.
Next up I added the other types of enemies, the bomb was kind of fun to make, I had this weird idea of using a radial gradient around a red square, moving clockwise to determine when it’s going to explode. Thankfully through CSS animation I got it to work, then I just scaled it up and used the bounds of the explosion to determine if the player got hit. Of course some shake too to give the explosion some weight:
Finally I added the projectiles, to make the game even more chaotic. They follow you around for a bit before exploding. I still want to tweak this one a bit (plus add the same shake effect as the bombs), but I think it’s pretty cool:
In order to make the game more fun I also added music and sound effects, which I think make a big difference. I sourced them from FreeSound and Pixabay since they’re free to use (with credit). Here’s how it all sounds like put together:
Anyway, I still have to add more to the game and finish the rest of the portfolio. Hopefully I will have this all ready in a week or two. This issue has been quite long (sorry) so I will leave out a few things for the next one.
See you,
Alyssa X
Sweet! Very creative. How do you measure if this has gotten you more client work?