Skip to main content

"AI 2048: Learning Through Reinforcement"

"Watch an AI learn to play 2048 through reinforcement learning with real-time neural network visualization"

ReactTypeScriptTensorFlow.jsCanvas APIReinforcement Learning

AI 2048

AI 2048 Game

Score
156
Best
1304
Moves
28
2
4
4
32
2
2
2
8
4
↑ 25.0%
↓ 25.0%
← 25.0%
→ 25.0%

Score

156

Best

1,304

Moves

28

AI is playing. Watch it learn and improve its strategy!

AI Performance Metrics

Total Games

1

Highest Tile

128

Win Rate

0.0%

Avg Moves

132

Exploration Rate

90.0%

Weight Changes

No changes yet

Recent Episode Rewards

Episode 1Average: 217.7Episode 1

The AI uses reinforcement learning to improve its strategy over time.

Rewards are based on successful merges, score increases, and game survival.

Green bars represent positive rewards, red bars represent penalties.

Model Management

Models are saved in browser storage.

Save your progress to resume training later!

About This Project

Inspired by Gabriele Cirulli's viral 2048 game and the subsequent AI solutions that achieved superhuman performance, this is my personal attempt at creating a learning AI from scratch. When Cirulli released 2048 in 2014, it captivated millions and soon became a benchmark for AI researchers to test reinforcement learning algorithms. This project is my learning experience in implementing these techniques, featuring real-time visualization of the neural network's weights and decision-making process as it learns to master Cirulli's elegant puzzle game.

Features

  • Manual and AI Modes: Play yourself or watch the AI learn
  • Reinforcement Learning: The AI improves its strategy through experience
  • Neural Network Visualization: See weight changes in real-time as the AI trains
  • Performance Metrics: Track games played, win rate, average score, and more
  • Speed Control: Adjust AI play speed from slow to instant
  • Glassmorphic UI: Modern design with backdrop blur effects

How the AI Works

The AI uses a deep Q-learning network with:
  • Input: 16 neurons (4x4 grid state)
  • Hidden Layers: 3 layers (256, 128, 64 neurons)
  • Output: 4 neurons (up, down, left, right actions)
The reward system encourages:
  • Tile merges and score increases
  • Maintaining empty cells
  • Achieving higher tiles
  • Survival (avoiding game over)

Technical Details

  • Built with React and TypeScript
  • TensorFlow.js for neural network implementation
  • Canvas API for weight visualization
  • Tailwind CSS with glassmorphic design
  • Real-time training without blocking the UI
The neural network visualization shows:
  • Weight matrices between layers as heatmaps
  • Blue for positive weights, red for negative
  • Brighter colors indicate recently changed weights
  • Move probability bars at the bottom