QWERTYBall
Online game, 2021
WHAT: QWERTYBall is a game like Breakout, where you “hit” the ball with the keys of your keyboard.
HOW: I built QWERTYBall in Vanilla Javascript as a project to learn programming.
WHY: I got the idea for the game years ago, but didn’t have the programming ability to build it. I thought it would be fun and it annoyed me that I couldn’t play it unless I learned how to build it.
WHO: This game is for anyone who thinks they can beat my high score of 32,000.
Visit QWERTYBall.com
Concept
Breakout is a classic video game with a simple concept: Keep a ball in play by hitting it with a paddle. My idea was to replace the paddle with the keys of your keyboard, which were transposed onto the screen.
In Breakout:
The ball bounces upward off paddle towards the blocks.
In QWERTYBall:
The ball bounces upward off spacebar towards the keys.
In Breakout:
The ball bounces downward off a block, destroying that block.
In QWERTYBall:
The ball bounces downward off a key, forcing the user to hit other keys to keep the ball from leaving the keyboard area.
After sketching it out, I noted two important differences between Breakout and my idea:
The primary goal isn’t to destroy blocks, it’s simply to keep the ball in play—you lose a life if the ball veers outside of the keyboard.
Since any key can hit the ball, every key is a paddle.
Planning
The game is pretty simple. I used Balsamiq to make a quick and dirty set of wireframes for the main screens. I initially called the game Keyboard Destroyer because I expected the user to bang on their keyboard in a frantic bid to keep the ball in play.
At rest
Initially, there’s just a list of high scores and an invitation to play.
Game starts
A ball appears at the center of the transposed keyboard, moving outwards.
Left bounce
As the ball heads to to top right of the screen, the user blocks the ball by holding down a series of keys.
Right bounce
Ricocheting off the top left, the ball heads to the right. The user blocks the ball again by hitting a group of keys.
Game over
I thought it would be cute to make the Return key the submit button for entering your name, but this was abandoned in favor of a simpler modal window.
Development
Transposing the keyboard onto the screen
Each key needed a reference name, a position described by row number and position number, a number of segments wide the key is, and a binary status indicating if the key were depressed or not.
For example, the ⌘ key is referred to as “MetaLeft”, it’s in Row 4, Position 3, and is 1.5 key segments long.
Collision Detection
I had to ensure that the ricochets were correct: A ball travelling north-east can only collide with the south-west side of a given key.
After the ball is hit by a key, all the keys need to be reset/un-pressed
What should happen if the ball is traveling over the letter “K” when the “K” key is pressed?
Sound Design
A game without sound is like a party without music.
I had to figure out the key moments where sound was needed: upbeat tones at the start of the game and upbeat tones when you hit the ball, and sad tones when you lose a life and lose the game.
Resizing the window
What if the user, for whatever reason, resized the window at some point? I had dreaded this problem, because re-drawing everything in the middle of a freaking game sounded daunting. But then I sat myself down to do it, and it wasn’t that hard at all!
Testing Mode
After a while, I realized I needed a “Testing Mode” where I could quickly verify that the game was working property, so I created a mode where I have only 1 life and the ball is sped up and a bunch of metrics are sent to the console.
Architecture
In the process of refactoring the code, I found it super helpful to make this flowchart explaining how all the logic worked. I also just love making flowcharts…
Visit QWERTYBall.com
Read more about the thinking behind QWERTYBall in the following posts: