fourward thinking
After making Snake, I decided to go for a more complicated arcade classic: Tetris.
Style-wise, it’s the same box-shadow heavy aesthetic you’ve seen before. And logic-wise, it’s fairly simple: a large grid whose squares are lit up different colors as a setInterval() moves “blocks” down the coordinate system.
So let’s talk about player inputs. You’ll notice some <button>s on the side of the screen, laid out like an arrow pad.
As it turns out, both clicks and keydowns will trigger the action.
I used standard arrow symbols (whose HTML encoding I found here) to avoid loading in a library, and to reinforce the fact that you can also use your arrow keys for this.
Maybe I should break out Snake again - and make it so you can play on mobile, with similar onscreen controls. Hm…
tl;dr: give users multiple input options; use simple symbolism to reinforce functionality; Tetris is great precisely because it is simple to play
project: blockDescender














