Creating a simple game of Tetris

February 20, 2025

Experience the classic puzzle game Tetris, brought to life using modern web technologies! Built with HTML, CSS, and JavaScript, this version recreates the iconic gameplay where players stack falling tetrominoes—L, Z, T, O, and I shapes—to clear rows and rack up points. The HTML structure lays out a simple grid and score display, styled with CSS to deliver a clean, retro-inspired look with a 10x20 playfield of colorful blocks. JavaScript powers the game logic, handling tetromino movement, rotation, collision detection, and row clearing, all triggered by arrow key inputs. Perfect for learning web development, this project combines DOM manipulation, event handling, and CSS styling to craft an addictive, browser-based challenge!

Developing a Tetris game using HTML, CSS, and JavaScript is a rewarding journey that blends creativity with technical skill, offering a hands-on way to explore web development fundamentals. The project begins with crafting a simple HTML structure: a container for the game, a heading, a grid element to house the playfield, and a score display. This lean foundation sets the stage for the game’s visual and interactive components. CSS steps in to style the grid—a 200px by 400px rectangle representing a 10x20 block playfield—where each square is a 20x20px div. The black background and blue tetrominoes evoke a retro aesthetic, while flexbox ensures the layout stays centered and responsive. This visual simplicity belies the dynamic behavior soon to be added, making the design both functional and nostalgic.

The heart of the game lies in the JavaScript code, which orchestrates the logic and interactivity. The script starts by dynamically generating 200 grid squares plus an invisible “floor” of 10 taken squares for collision detection, all appended to the DOM. Tetrominoes—five classic shapes (L, Z, T, O, I)—are defined as arrays of indices, with each shape supporting four rotations. Functions like draw() and undraw() manipulate the DOM by toggling the tetromino class, rendering the pieces on the grid. Movement is handled through event listeners tied to arrow keys: left and right shift the piece horizontally, up triggers rotation, and down accelerates the drop. A setInterval timer drives the tetromino’s descent every second, with moveDown() checking for collisions via the freeze() function. When a piece lands, it’s marked as taken, and a new tetromino spawns, keeping the game flowing.

Beyond basic movement, the code tackles core Tetris mechanics like scoring and game over conditions. The addScore() function scans the grid for completed rows, removing them and shifting the remaining blocks down—an elegant use of array splicing and DOM re-rendering. Each cleared row adds 10 points, updating the score display in real-time. The gameOver() function monitors the spawn point; if a new tetromino overlaps a taken square, the game halts, displaying the final score. Edge cases, like preventing pieces from moving off the grid or through occupied spaces, are managed with boundary checks in moveLeft() and moveRight(). This blend of DOM manipulation, array logic, and event-driven programming makes the development process a microcosm of web development challenges, resulting in a fully playable Tetris game that’s both a technical achievement and a nod to gaming history.

See for yourself!