DEV Community

loading...
Cover image for I added a JavaScript arcade game to my portfolio's homepage

I added a JavaScript arcade game to my portfolio's homepage

Chris Greening
Freelance Python developer | Probably programming right now | Coding, hiking, and rollerblading
Updated on ・3 min read

I love old video games.

One of my fondest memories as a kid is going to a diner on Long Island with my grandparents every Friday evening and playing Galaga (still my all time favorite) at a beat-up old arcade cabinet in the diner's entrance.

My dad would give me $1 worth of quarters and I'd stretch them for an hour racking a higher score each time I played.

I love old video games so much that I recently spent dozens of hours adding one to my portfolio's homepage just for the heck of it using JavaScript and Paper.js.

Alt Text


A brief, wistful origin story 🐍

At heart I am a Python developer. The first program I ever wrote (aside from hello_world.py) was a Zork-style fantasy text adventure I imaginatively named Dungeon!.

Dungeon text adventure homescreen showing title and author name Chris Greening

The code was ugly. It was monolithic. It was 1,333 lines of spaghetti.

I loved every second of it.

Every time I didn't know something I would hit the web, look it up, and duct tape whatever I learned into my Frankenstein's monster dungeon.py 'til it worked.

To put it in perspective, here is a short snippet of the original source 😅:

Alt Text

To this day, Dungeon! is perhaps my proudest and most important piece of code I have ever written.

The reason I bring this story up is because it shows how I approach learning new skills in software development (and life in general).


Implementing the JavaScript arcade game

I will be the first to admit I am not great at JavaScript.

That's not to say I'm terrible but I don't know React, Vue, Angular, or many other JavaScript frameworks or libraries.

I just know enough to get by.

All I knew when I first started developing my portfolio was that I wanted an arcade game front and center and I was going to figure out how to do it.

Luckily one of the few libraries I did know of is the vector graphics scripting lib Paper.js.

Even more lucky is it comes with an example of an Asteroids clone when you download the source files... the perfect place to start.

Alt Text


Fast forward to now

I'll spare you the boring details (at least a couple dozen hours worth) of me trying 10,000 ways that didn't work but I'm proud of the way that finally did:

Alt Text

So far I've implemented optional sound effects, a night mode toggle, and a CRT filter.

Alt Text

I'm excited to keep adding features as time goes on and it's inspired me to dive further into web development and formally learn (and love) JavaScript.

Give me feedback!

Check my site out for yourself and let me know what you think in the comments below! I'd also love to hear about the projects you're personally proud of ❤️

www.christophergreening.com

Side note: Unfortunately the game itself isn't (currently) playable on mobile 😅 but the site itself is mobile-friendly and you can mess around with nightmode, CRT filter, etc.

Discussion (11)

Collapse
daviddalbusco profile image
David Dal Busco • Edited

Thank you for the share Chris, I love to read such blog post in which devs share their experience and stories 👍.

Your homepage and, game are slick! I remember playing it as a child too, a friend of my parents gave us their old Vic 20. Nothing like loading a game from a ... tape 😅.

Collapse
chrisgreening profile image
Chris Greening Author

Jealous!!! My dad had a friend back in the day that was the coolest kid on the block because he had a VIC before everyone else lol

I've been kicking around getting a C64 at some point in the near future, there's a niche community that's still developing software on these old machines and I want to be a part of it lmao

Collapse
daviddalbusco profile image
David Dal Busco

Haha I still got the Vic 20 somewhere in the attic at my parent's place 😜.

Developing game or else on C64 sounds like the coolest plan ever! Looking forward to your next blog posts 😉.

Collapse
vishal2369 profile image
Vishal2369

Website is awesome.
But how u made photos in that many shapes?

Collapse
chrisgreening profile image
Chris Greening Author

Thank you so much! I used Three.js for the photography portfolio

They have some great examples on their website, I used this one as a base and modified it to dynamically render tags and do a bunch of other neat things

Collapse
gizmotronn profile image
Liam Arbuckle

Hey @chrisgreening ! Looks amazing...

I'm interested in seeing how flask can be used for personal sites, would you be in favour of open-sourcing your portfolio on gh?

Collapse
chrisgreening profile image
Chris Greening Author

I plan on open sourcing it sometime soon! There's just a bit of work I wanna do on it before its ready to be released; I'll let you know here when I do 😄

Currently I'm mostly using Flask for managing my photography portfolio that's also hosted on the site. I have user auth setup for an admin account that let's me upload/edit/delete photos:

Cat sleeping in sunshine

I also have a simple contact form on the site that sends me emails.

The plan is to eventually add a blog section and portfolio section that will be managed through Flask and then from there whatever other creative ideas I can come up with

Collapse
youpiwaza profile image
max

I'm not gonna lie, it's pretty cool :)

Maybe add the ability to hold space bar to keep firing ? ^^

Collapse
chrisgreening profile image
Chris Greening Author

ayy didn't even think about that, great idea!!

I'll look into adding that w my next update

Collapse
adam_cyclones profile image
Adam Crockett

Initial reaction big smiles, good for you

Collapse
chrisgreening profile image
Chris Greening Author

Thanks so much Adam!! :D