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.
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!.
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 😅:
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.
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:
So far I've implemented optional sound effects, a night mode toggle, and a CRT filter.
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 ❤️
Top comments (15)
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.
woah this is amazing, and it’s great to know I’m not the only one who uses Flask for portfolio sites!
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
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
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 😅.
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
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 😉.
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?
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:
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
Website is awesome.
But how u made photos in that many shapes?
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
I'm not gonna lie, it's pretty cool :)
Maybe add the ability to hold space bar to keep firing ? ^^
ayy didn't even think about that, great idea!!
I'll look into adding that w my next update
Initial reaction big smiles, good for you
Thanks so much Adam!! :D