All projects
Web Game
2024–2026 Actively maintained

Game 2048

A responsive 2048 puzzle game with smooth tile animations, undo support, persistent high scores, and touch-friendly controls.

Live demo Source code

The core 4x4 gameplay experience with responsive tile movement and score tracking.

Project overview

Game 2048 is a modern web implementation of the classic sliding tile puzzle. Players combine matching numbers on a 4x4 board and try to reach the 2048 tile through careful moves and planning.

The experience is designed to feel immediate on both desktop and mobile, with keyboard controls, touch gestures, responsive board sizing, score feedback, and clear win and game-over states.

Its core gameplay is separated from the React view layer through a framework-agnostic TypeScript engine. A custom store exposes read-only snapshots to React, while stable tile identities allow the interface to animate movement and merges naturally.

This solo project began as an early TypeScript learning project in November 2024 and was substantially restructured in August 2026 to clarify the game engine and create a smoother animation layer.

Objectives

  1. 01

    Build faithful 2048 mechanics

    Implement sliding, merging, score updates, random tile spawning, win detection, and game-over detection with predictable behavior.

  2. 02

    Keep the engine independent

    Separate board rules and state transitions from React rendering so the gameplay core stays testable and framework-agnostic.

  3. 03

    Make movement feel fluid

    Give tile movement, spawning, and merging enough visual feedback without turning animation logic into application logic.

  4. 04

    Support different play styles

    Offer a responsive board with keyboard controls for desktop and swipe gestures for touch devices.

Key features

Classic 4x4 gameplay

Slide and merge numbered tiles in four directions while working toward the 2048 tile.

Score and high score tracking

Update the current score in real time and persist the best score locally in the browser.

Undo and new game controls

Restore the immediately previous board state or start a fresh game through focused action controls.

Keyboard and touch input

Play with desktop arrow keys or mobile swipe gestures using the same game engine.

Win and game-over states

Use modal feedback to make reaching 2048 and running out of valid moves easy to understand.

Animated tile presentation

Use stable tile identities and layout animation to make movement and merges feel continuous.

Challenges and decisions

Animating a changing 2D board

Challenge

Tiles move and merge inside a matrix, but React animations need stable elements and predictable identity across renders.

Decision

Flattened the board into uniquely identified tile objects and used Framer Motion layout animations to follow position changes without manual transform choreography.

Keeping game rules outside React

Challenge

Putting board logic directly inside components or hooks would couple gameplay behavior to rendering and create unnecessary re-renders.

Decision

Built an independent GameStore with an observer-style update flow and connected it to React through useSyncExternalStore and immutable snapshots.

Making desktop and mobile input consistent

Challenge

Keyboard events and touch gestures have different interaction models but must produce the same deterministic move behavior.

Decision

Normalized both input paths into the same store actions so the engine remains unaware of the device or control method.

My contribution

  • Architected the framework-agnostic TypeScript game engine around Board, Line, Tile, and GameStore responsibilities.
  • Developed the React frontend and custom hooks that synchronize engine snapshots with the rendered board.
  • Designed the tile animation layer so movement and merges could remain fluid without duplicating game rules in UI code.
  • Configured the pnpm workspace, Vite build process, and GitHub Actions deployment to GitHub Pages.
  • Reworked the project in August 2026 to clarify the engine boundaries and improve the overall animation experience.

luongductrong2004@gmail.com

© 2026 Made with ❤️ by Duc Trong Luong