If you've ever wanted a quick mental break during a coding session, you already know the appeal of simple puzzle games. 2048 is one of the most addictive number puzzles out there — and I recently added a fully playable version to my toolkit site, built with nothing but vanilla JavaScript.
Why 2048?
2048 is deceptively simple: slide numbered tiles on a 4×4 grid, merge matching numbers, and try to reach the tile labeled 2048. No ads interrupting gameplay, no forced sign-up wall, no app download. Just open the page and play immediately, whether you're on desktop or mobile.
How It Works Under the Hood
The core game logic is built around a few key functions:
Board representation: a simple 2D array (4x4) tracks tile values
Movement logic: instead of writing four separate functions for up/down/left/right, the board is rotated before and after each move, so only one "slide left" function is needed
Merge detection: adjacent equal values combine into one, doubling in value
Win/lose detection: checks run after every move to detect the 2048 tile or a full, unmovable board
Here's a simplified look at the row-merging logic:
Javascript
function slideRowLeft(row) {
const filtered = row.filter(v => v !== 0);
for (let i = 0; i < filtered.length - 1; i++) {
if (filtered[i] === filtered[i + 1]) {
filtered[i] *= 2;
filtered.splice(i + 1, 1);
}
}
while (filtered.length < 4) filtered.push(0);
return filtered;
}
Rotating the board 90 degrees before running this function lets you reuse it for every direction instead of duplicating logic four times — a nice trick for keeping game logic DRY.
Mobile-First Controls
Since a lot of casual gameplay happens on phones, touch swipe detection was a priority. The implementation tracks touchstart and touchend coordinates, calculates the delta, and determines swipe direction based on whichever axis moved further:
Javascript
const dx = touchEnd.x - touchStart.x;
const dy = touchEnd.y - touchStart.y;
if (Math.max(Math.abs(dx), Math.abs(dy)) > 30) {
// determine direction based on larger axis
}
Keyboard arrow keys work identically for desktop players.
Try It Yourself
You can play the live version here: games.nashs.online
It's part of a small collection of free browser games I'm building out — no installs, no accounts, just instant play. If you're into lightweight game dev or vanilla JS projects, I'd love to hear your thoughts or suggestions for the next game to add.
Tags: #javascript #webdev #gamedev #beginners
Top comments (0)