Concept & Inspiration
This week, I wanted to recreate Tetris but with a chaotic twist: I wanted to see what happens when you take a perfectly organized game and throw it into a world of messy physics. Instead of blocks snapping into place on a grid, they are governed by gravity, friction, and torque, meaning a slightly off-center landing can topple your entire stack. I was inspired by the way Ryoichi Kurokawa and Robert Hodgin use digital systems to create organic, unpredictable structures. The challenge isn’t just about where the blocks go, but how they balance, shift, and compress as the pile grows.
Since the blocks are no longer perfectly organized in a grid as in the game, which meant gaps are inevitable, I made it so that having a row 90% filled gets cleared.
Code Highlight
I am particularly proud of the checkRowsStrict() function. Because physics bodies don’t align to a grid, I divided the canvas into ten horizontal “bins” per slice. The system iterates through these sectors and uses Matter.Bounds.contains to verify if a physics body is physically occupying that space.
for (let i = 0; i < numBins; i++) {
let binX = i * binWidth + binWidth / 2;
// Check if any body in this slice covers this bin center
let isOccupied = bodiesInSlice.some(b => Matter.Bounds.contains(b.bounds, { x: binX, y: y }));
if (isOccupied) binsOccupied++;
}
if (binsOccupied / numBins >= 0.9) { // 90% threshold for a clear
clearRow(bodiesInSlice);
}
This approach bridges the gap between free-form movement and structured gameplay, forcing the player to pack blocks efficiently to reach the 90% occupancy threshold.
Milestones & Challenges
In this version, I was just testing if I could spawn blocks and have them stack. The physics are broken here: they bounce too much, and they don’t lock into a pile properly, which was the first major challenge I had to overcome by learning more about the matter.js library.
This milestone shows the first attempt at clearing rows. I hadn’t implemented the row clearing algorithm yet. It simply looked at the total width of blocks in a zone. It was a breakthrough because it was the first time the game became playable, even if the clearing was a bit too easy and lucky.
After I got that figured out, I added diversity to the block shapes and colors, gave the user control with the arrows, and the game was ready.
Reflection and Improvements
This project shifted my perspective from seeing physics engines as simple simulators to seeing them as gameplay generators. The most rewarding aspect was observing how complex strategies emerged naturally from basic gravity and friction. For future iterations, I plan to integrate p5.sound to map collision impacts to percussive digital noises, further leaning into a glitchy aesthetic. Additionally, I hope to implement Dynamic Fragmentation, where high-velocity impacts can break blocks into smaller pieces, adding another layer of realism to the project.
`