A breakout clone that is controlled with a rotating dial – like the original arcade version! Try it:

You only need* a USB volume knob like this one:

*) Technically, you could also play the game with your multimedia keyboard’s volume keys. It won’t be much fun, though, without that dial feeling and accelleration…

Idea

I got the idea when I stumbled upon the fact that modern browsers, apparently, receive dial changes as key input events: Volume up, volume down, mute. Not the system’s global volume settings, though! Only relative change events, and only when the browser tab is in focus.

Try it – press some keys and turn the volume knob (JavaScript required):

This can be used in truly stupid ways – but you can also make a game out of it. You decide what’s stupider. :)

Implementation

Plain old JavaScript/2D canvas grunt work, with hand-pixelled graphics and some audio samples. Fun!

Little obstacles and learnings:

• Getting the collision code right wasn’t as easy as I thought. Still might act weird…
• Paddle accelleration. With the naïve approach of moving the paddle directly with the dial, the game felt very sluggish, and it became hard to play. I’ve added some code that speeds up the paddle movement depending on the last n dial rotation steps.

• Ditched the idea to include a sound loop in the game. Apparently, Chrome can’t do clean audio loops without gaps (while Firefox can; yes, I’ve tried OGG, AAC, wave files). howler.js can do it, but I didn’t want to include an external library just for that, and I haven’t researched how howler does it. I think I’ve seen a nasty setTimeout with the exact sample length somewhere…?
• Parallel sample playback: Playing back the same sample in parallel (“brick destroyed” sounds in quick succession) requires multiple Audio elements – doh!
• The CSS setting for non-mushy upscaling is image-rendering: pixelated nowadays. (The game canvas is scaled up 4× the original size for that pixel look.)
• Sound availability. All browsers require some sort of interaction with the page before sound playback is allowed. Chrome is content with key events, i.e. turning the knob. Firefox requires a click! At least at the time of writing; who knows what tomorrow’s browsers bring. Maybe the volume change key events will be dropped altogether?
• Hard to stop! “Hmm, what about a social media share gadget? Or little extras that fall down from time to time? Extra lives, wider paddle, shoot mode: We could use the mute function to shoot!” etc. Might revisit these ideas when I’m bored…

Source code: see page source (Ctrl+U resp. “View source”) or here: knob-out.js

Happy knobbing!