DEV Community

Cover image for I added a JavaScript arcade game to my portfolio's homepage
Chris Greening
Chris Greening

Posted on • Edited on

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

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

Chris Greening - Software Developer

Hey! My name's Chris Greening and I'm a software developer from the New York metro area with a diverse range of engineering experience - beam me a message and let's build something great!

favicon christophergreening.com

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 ❤️

Chris Greening - Software Developer

Hey! My name's Chris Greening and I'm a software developer from the New York metro area with a diverse range of engineering experience - beam me a message and let's build something great!

favicon christophergreening.com

Top comments (15)

Collapse
 
juliecodestack profile image
JulieS

Great work! The effect may be even better if you make the arrow sign(the one in the middle of the screen, which send points outside) more explicit. At first I don't know how to play the game because I didn't notice the arrow sign haha. Maybe It's because I haven't play the arcade game before. After reading your post, I notice the position of arrow sign and The game is fun.

Collapse
 
vulcanwm profile image
Medea

woah this is amazing, and it’s great to know I’m not the only one who uses Flask for portfolio sites!

Collapse
 
chrisgreening profile image
Chris Greening

Thank you so much Medea! :D

lol yeah I really love Flask, I use it for a whole bunch of things! Definitely an essential tool in my Python toolbox

Collapse
 
vulcanwm profile image
Medea

same! it's reached a point where when i can't be bothered to write the code for 5 projects on my portfolio, so i just use flask and jinja to render the templates with a dictionary for my projects lmao

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

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

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
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

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

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

Thanks so much Adam!! :D