I added a JavaScript arcade game to my portfolio's homepage
Tags: showdev, javascript, webdev, blogging
Published: 2021-06-08 22:44:14

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](www.christophergreening.com) just for the heck of it using JavaScript and [Paper.js](http://paperjs.org/).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/02mokf60uu3s8ejuj3h8.gif)

{% embed https://www.christophergreening.com %}

---

## A brief, wistful origin story :snake:
<a href="#a-brief-wistful-origin-story"></a>

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1w3b30x9mwxt1y1n9vi2.png)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w31zhf50mrw7h9h2kprc.png)

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](http://paperjs.org/download/). 

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zx7qenybfzl54arsswjt.gif)

---

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mabyv33f8rtqy9kjh427.gif)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/esi9tl6ylkcy1ganc6ai.gif)

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

{% embed https://www.christophergreening.com %}