2048 Game - TypeScript & Phaser Edition

A modern, feature-rich implementation of the classic 2048 puzzle game built with TypeScript and Phaser 3.

Features

Core Gameplay

• Classic 2048 mechanics - Slide tiles to merge matching numbers
• Smooth animations - Fluid tile movements with elastic easing
• Win condition - Reach 2048 to win (with option to continue)
• Game over detection - Automatic detection when no moves available

Controls

• Keyboard: Arrow keys or WASD
• Touch: Swipe gestures on mobile/tablet devices
• Responsive: Works on desktop, tablet, and mobile

Visual Features

• Beautiful color scheme - Gradient tiles with distinct colors for each value
• Particle effects - Visual feedback on tile merges
• Smooth transitions - All animations use optimized easing functions
• Score animations - Dynamic score updates with visual feedback

Game Features

• Score tracking - Current score and personal best
• LocalStorage persistence - Best score saved between sessions
• New game button - Quick restart at any time
• Win/Game Over overlays - Clear game state communication
• Continue playing - Option to play beyond 2048

Installation

Prerequisites

• Node.js (v16 or higher)
• npm or yarn

Setup

1. Clone the repository

   git clone <repository-url>
   cd 2048-game

2. Install dependencies

   npm install

3. Start development server

   npm start

   The game will open automatically in your browser at http://localhost:8080

4. Build for production

   npm run build

   The production build will be in the dist/ directory

How to Play

Objective

Combine tiles with the same number to create larger numbers. Reach 2048 to win!

Rules

1. Use arrow keys (↑ ↓ ← →) or WASD to move tiles
2. When two tiles with the same number touch, they merge into one
3. After every move, a new tile (2 or 4) appears in an empty spot
4. The game is won when a 2048 tile is created
5. The game is over when no moves are possible

Tips

• Keep your highest tile in a corner
• Build tiles in a specific pattern (e.g., snake pattern)
• Don't move your highest tile unless necessary
• Plan ahead - think about where new tiles might appear

Project Structure

2048-game/
├── src/
│   ├── scenes/
│   │   ├── BootScene.ts       # Asset loading and initialization
│   │   └── GameScene.ts        # Main game scene
│   ├── game-objects/
│   │   ├── Tile.ts             # Individual tile with animations
│   │   └── Grid.ts             # 4x4 grid manager
│   ├── managers/
│   │   ├── GameManager.ts      # Core game logic
│   │   ├── InputManager.ts     # Input handling (keyboard/touch)
│   │   ├── ScoreManager.ts     # Score tracking & persistence
│   │   └── AnimationManager.ts # Particle effects
│   ├── ui/
│   │   ├── ScoreDisplay.ts     # Score UI components
│   │   ├── GameOverlay.ts      # Win/lose overlays
│   │   └── Button.ts           # Interactive buttons
│   ├── utils/
│   │   ├── Constants.ts        # Game constants
│   │   └── ColorScheme.ts      # Tile color mappings
│   ├── config.ts               # Phaser configuration
│   └── main.ts                 # Entry point
├── public/
│   ├── index.html              # HTML template
│   └── assets/                 # Game assets (if any)
├── package.json
├── tsconfig.json
└── webpack.config.js

Technical Details

Architecture

• TypeScript - Type-safe development with strict mode
• Phaser 3 - Professional game framework for 2D games
• Webpack - Module bundling and hot reload
• Object-Oriented Design - Clean separation of concerns

Performance

• 60 FPS animations - Smooth gameplay on all devices
• Efficient rendering - Canvas-based rendering with Phaser
• Minimal DOM manipulation - Game runs entirely on canvas
• Optimized algorithms - Efficient grid traversal and collision detection

Animations

• Tile spawn: Elastic bounce-in (400ms)
• Tile move: Cubic easing (250ms)
• Tile merge: Pop effect with scale (150ms)
• Score updates: Smooth counter animation
• Particle effects: Dynamic effects on merges

Browser Support

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Mobile browsers (iOS Safari, Chrome Mobile)

Development

Available Scripts

# Start development server with hot reload
npm start

# Build for production
npm run build

# Watch mode for development
npm run dev

Adding Features

The codebase is designed for easy extension:

• New tile animations: Modify Tile.ts
• Different grid sizes: Update Constants.ts (GRID_SIZE)
• Custom color schemes: Modify ColorScheme.ts
• New game modes: Extend GameManager.ts
• Sound effects: Add to BootScene.ts preload and trigger in game events

Credits

• Original 2048 game by Gabriele Cirulli
• Built with Phaser 3
• Developed with TypeScript

License

MIT License - Feel free to use this code for learning or in your own projects!

Future Enhancements

Potential features for future versions:

• Sound effects and background music
• Multiple grid sizes (3x3, 5x5)
• Undo functionality
• Hints system
• Achievements system
• Leaderboard (online)
• Different themes/skins
• Tutorial mode

---

Enjoy the game! Try to reach 2048! 🎮