Problem
A couple of days ago I built Tetris using canvas as the base visual.
Something tickled my ADHD and thought if I could do it in Unicode text.
Solution
I’ve googled Unicode tetris emojis but found nothing.
Then I’ve stumbled upon these Unicode characters/symbols?
- ⬛🟫🟧🟪🟥🟦🟨🟩
That’s exactly what I needed!
Because I’m a genius - the original code had the game logic and render logic separate.
Thus, all I need to do is to rewrite the render logic using ⬛🟫🟧🟪🟥🟦🟨🟩.
The base board will be a <div> of <div>s like so:
<div className="text-board board">
<div>⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛</div>
<div>⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛</div>
<div>⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛</div>
<div>⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛</div>
<div>⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛</div>
<div>⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛</div>
<div>⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛</div>
<div>⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛</div>
<div>⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛</div>
<div>⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛</div>
<div>⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛</div>
<div>⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛</div>
<div>⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛</div>
<div>⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛</div>
<div>⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛</div>
<div>⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛</div>
<div>⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛</div>
<div>⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛</div>
<div>⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛</div>
<div>⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛</div>
</div>Next, whenever we need to render gridState we will create an empty board of ⬛.
const newBoard = [];
for (let i = 0; i < 20; i++) {
newBoard.push(["⬛","⬛","⬛","⬛","⬛","⬛","⬛","⬛","⬛","⬛"]);
}Given a gridState (which is a 2D array of integers) we will update this newBoard:
function renderGridState(newBoard, gridState) {
for (let y = 0; y < 20; y++) {
for (let x = 0; x < 10; x++) {
if (gridState[y][x] !== 0) {
newBoard[y][x] = mapValue(gridState[y][x]);
}
}
}
}Once updated, we will render the DOM:
for (let y = 0; y < 20; y++) {
divs[y].innerHTML = newBoard[y].join("");
}This pretty much sums up building a text-based Tetris.
Here’s what it looks like:
