2048 Game using HTML, CSS & JavaScript

Rebuild the iconic 2048 sliding puzzle game with just HTML, CSS, and JavaScript — no frameworks, no libraries. This version works perfectly in the browser and includes fully dynamic tile generation, merge animations, and win/loss detection.

🕹️ How to Play the 2048 Game

The goal of the game is simple: reach the 2048 tile by combining matching numbers.

🧠 Basic Rules:

1. Use your arrow keys (← ↑ ↓ →) to move the tiles in any direction.

2. When two tiles with the same number touch, they merge into one.

   • Example: 2 + 2 = 4, 4 + 4 = 8, and so on.

3. Each move spawns a new tile (2 or 4) on the board.

4. Your score increases every time tiles are merged.

5. You win when you create a tile with the number 2048.

6. The game ends when there are no more possible moves.

🎯 Pro Tips:

• Focus on keeping your highest tile in one corner.

• Avoid randomly swiping—plan your moves ahead.

• Try to keep the board organized so tiles don’t block each other.

🎮 Game Mechanics:

• Combine matching tiles by sliding them in any direction

• Reach the 2048 tile to win

• Game ends if no moves are left

• Optional restart and score tracking

🧰 Technologies Used:

• HTML5 – Grid layout for tiles

• CSS3 – Responsive styles, animations, and colors

• JavaScript – Game logic, keypress handling, dynamic grid updates

✨ Features:

• Fully playable 4×4 tile board

• Smooth slide and merge animations

• Score counter (optional high score tracking)

• Keyboard arrow key controls

• Mobile-friendly UI

🎯 Learning Objectives:

• DOM manipulation and dynamic element updates

• Handling keyboard events

• Implementing tile merging logic

• Responsive layout techniques

🛠 Customization Ideas:

• Change theme to dark mode or neon

• Add undo or time challenge mode

• Save progress using localStorage

• Upgrade to 5×5 or 6×6 board