Back to Projects

2048 Game

A fully functional implementation of the classic 2048 puzzle game built entirely with vanilla JavaScript, HTML, and CSS — no frameworks, no libraries, no shortcuts. Pure fundamentals.

htmlcssjavascript
2048 Game

The Problem

Implementing the tile merging logic correctly is deceptively tricky. The rules for how tiles combine, the order in which merges happen in a single swipe, and the edge cases around the grid boundaries all need to be exactly right or the game feels broken. Doing this cleanly in vanilla JS — without a framework to lean on — required clear thinking about state management and game loop architecture from the start.

The Solution

Built the complete game engine from scratch: grid state management as a 2D array, directional swipe logic for all four directions, tile merging rules with correct precedence, score tracking, and new tile spawning with proper probability weighting. Animations are handled entirely in CSS for smooth, performant tile movement. Win and game-over detection are both handled cleanly without edge case bugs.

// what I learned

Vanilla JS projects are humbling in the best way. Without a framework abstracting state management, you have to think clearly about data flow and DOM updates yourself. This project reminded me that deep framework knowledge is valuable, but engineers who understand the fundamentals beneath the frameworks write better code in every context.

Related Projects

All Projects -