When the April Codepen Challenge turned up with a retro gaming theme I took the opportunity to combine some of my hobbies and get hands on with the latest web technologies by submitting an entry to each week of the challenge.
Here's what happened next...
Week 1: Pacman
I eased in with a fairly simple pen by taking a slightly different perspective on the pie shaped hero's struggle and considering the psychological effects of being trapped in a maze with a bunch of ghosts for nearly 40 years. What dreams may come to this tortured soul?
More interestingly perhaps, what web technology would be best to render those fevered dreams.
In order to do a basic performance comparison I used Mr Doob's fantastic stats.js library to show a frame count for each experiment.
I started off with the brilliant Pixi.js. This of course led to a buttery smooth render pinned to 60fps on all the devices I tested on.
Next I recreated the scene using simple DOM elements. This version struggled to keep up with the Pixi version and stuttered on some older devices - pretty much as expected.
That said I was impressed with the level of performance available via simple DOM manipulation and suspect that even better performance could be achieved via hardware accelerated CSS 3D transforms.
Finally I did a version with plain canvas and vanilla JS. This one kept up pretty well with Pixi, maybe just a frame or two behind on some devices.
Also as you can see there's not much difference in code size.
What I took from this experiment is that while the underlying technology selection is a critical factor in performance for simple scenes like this a library is very likely overkill.
Of course, as scene complexity increases with multiple layers and different objects to track and animate, a library like Pixi that performs non-trivial rendering optimizations will really come into its own.
Week 2: Donkey Kong
I used the Donkey Kong challenge to play with some visual styling techniques.
I started off with CSS and an example from The Shapes of CSS. This technique worked well for the basic shape but fell down when combining different techniques to give a more sophisticated overall style.
As you can see, at different zoom levels the joins between the different styled pseudo elements can break the overall effect somewhat.
The next step was to mask regular DOM element content using an SVG clip path. This seemed promising at first but proved tricky to get right, particularly when trying to implement a scalable view.
I didn't embed these examples as they seem to have developed a type of shyness where they won't render at 100% zoom anymore. ¯\(ツ)/¯
See the full collection of the week 2 experiments here.
My next approach was to put all content in SVG and apply a mix of SVG and CSS styling. This provided the best combination for this pen as the result scaled nicely and achieved the desired graphical style - or at least would with some more tweaking.
The major trade-off in this approach is the loss of HTML for content so this approach should only be chosen with consideration the content to be displayed in mind.
I was able to use the approach from the last experiment to implement a scalable version of the iconic Donkey Kong high scores screen rendered more or less with the desired CRT tube effect.
I also added some background music using the excellent tone.js in an embedded pen which was also new for me but worked perfectly.
I didn't embed the resulting pen as the audio plays automatically but you can check it out here.
Due to Chrome's new heavy-handed autoplay policy changes, audio stopped playing on the final DK pen. I had to add a mute/unmute button that the user can click to get the audio playing safely. At least now I can embed this pen without pestering readers with unwanted audio.
Week 3: Paperboy
For Paperboy I decided to recreate the classic's pseudo 3D isometric style using DOM and CSS.
My first attempt was a fork of @rukh's magnificent CSS 3D house pen that basically just duplicated a number of instances of the house and added some random animation to the doors open and closing.
This gave me the idea that maybe the paperboy is late and the street's residents are looking out for him.
I wasn't happy with this approach as the 3D effect was a little too realistic with a proper perspective that didn't reflect the original paperboy scene.
I probably could have achieved the correct isometric perspective using the 3D transforms in this pen but I decided to use a faked 3D style with 2D transforms for a slightly more authentic aesthetic.
To finish off I added a cyclist blithely passing by the streets residents in a looping animation. Is this the paperboy? Why is he taunting the residents? Who can say...
There was nothing really significant that was new to me technology-wise in this week's experiments so it was mostly CSS practice but I did get to try out some of the new DOM manipulation convenience methods to replicate the houses on the street.
These are not yet available on all browsers so if you see an empty street that's why. I look forward to the residents arrival in Edge 17 when it lands on my PC in an upcoming OS update.
Week 4: Pong
Ok, so I'll admit it - I went a little off the rails on this one.
Truth be told, I started this at the beginning of the month in the hopes that my favorite genre, the retro space shooter would be represented in the months challenges. Alas it was not to be so some quick tweaks later and my pen was tailored to fit in seamlessly (ahem...) with the Pong theme.
For this experiment I wanted to use a combination of canvas and DOM in a layered, parallax view to create another pseudo 3D effect on mouse hover or device tilt.
This brought a number of challenges in terms of the technologies to be combined and resulted in the most JS heavy of the month's experiments which was great as it allowed me to play with many of the recent language enhancements.
In order to tie in more with the Pong theme I named the pilot "Major Pong" and gave her a script which either pops up in a comic style dialog or can be read aloud by the browser using the Web Speech API when audio is enabled via the provided control. Speech synthesis turned out to be surprisingly natural and fit well with the experiment.
My favorite part of the experiment however is the subtle CSS filter blur effect on the foreground elements when the Major hyperspaces between sectors. Check it out.
I'm glad I took the time out to do a little creative coding and test drive some of the latest tech the web has to offer. Not only did I learn a bunch of stuff but had a lot of fun too.
Codepen is a great resource for this and I would encourage anyone interested in the web to try it out and share your creation with the community.