2048 Chrome Extension

A minimalist Chrome extension that lets you play the classic 2048 puzzle game in your browser toolbar popup. Built with HTML, CSS, and JavaScript.

Features

• Fully playable 2048 game (swipe or arrow key controls)
• Clean, modern UI modeled after the original 2048
• Supports Undo (revert your most recent move)
• Automatic save/resume: game is always preserved, even if you close or minimize the extension
• Restart button and live scoring
• No ads, no network required

Game Logic Overview

• Board Setup: A 4x4 grid represented by a JavaScript matrix (board). All cells start empty (0).
• Moves: Arrow keys or swipe gestures trigger moves in the four directions. Each move shifts all non-empty tiles, merges same-numbered adjacent tiles once per move, and adds a new tile (2 or 4) to a random empty spot.
• Merges: When two tiles of the same value collide, they combine into a single new tile with double the value, and this amount is added to your score.
• Undo: Before any move, the current board and score are saved. Pressing Undo reverts both to the previous state. Only one step of undo is supported.
• Game Over: The game ends when no more moves are possible (no empty cells and no adjacent equal tiles).

JavaScript Logic Breakdown

• All code is in popup.js and runs in the popup context.
• Key Variables:
  • board (array): The 4x4 matrix holding current tile values.
  • score (number): The current score.
  • prevBoard, prevScore: Hold the board and score state for undo.
• Initialization:
  • setupGame(): Fills the board with zeros, then randomly adds two starting tiles (2 or 4), resets the score and the previous state for undo.
• UI Updating:
  • updateUI(): Redraws the whole board and updates the score after any change.
• Handling Input:
  • handleKey(e): Captures arrow keys. Before making a move, deep copies current board and score to the undo history, then performs move in the pressed direction.
  • Valid moves are followed by adding a new random tile and updating the UI.
  • Sets game status text if the board is full and no moves are possible.
• Move Logic:
  • move(direction): Handles moving all tiles in the selected direction.
    • For each row or column (depending on direction), extracts the line, performs slideAndMerge(), and writes results back to board.
  • slideAndMerge(line): Slides non-zero tiles together, merges identical adjacent tiles (once per move), increases the score, and pads result back to correct length.
• Undo:
  • Before each move, prevBoard and prevScore are updated by deep copying.
  • undoMove(): If a stored previous board exists, restores it and the previous score, then redraws the board.
• Other Functions:
  • addRandomTile(): Randomly places a 2 or 4 on an empty cell after each valid move.
  • isGameOver(): Checks for a filled board and no possible merges.
• Game Flow:
  • The cycle is: Input → copy backup → move and merge → add tile → check game over → update UI.

How to Install

1. Download or clone this repository.
2. Open Google Chrome and go to chrome://extensions
3. Enable "Developer mode" with the switch in the top right.
4. Click "Load unpacked".
5. Browse to and select the chrome-2048 directory.

The extension icon (with 2048 text) will appear in your Chrome toolbar.

How to Play

1. Open the extension by clicking the "2048" icon in your Chrome toolbar.
2. Make Moves: Use your keyboard arrow keys to move tiles up, down, left, or right.
   • You can also click in the popup and press arrow keys.
3. Combine Tiles: When matching tiles touch, they merge and your score increases.
4. Undo: Press the Undo button to revert your last move.
5. Restart: Press Restart to start a new game at any time.
6. Win: Try to create a tile with the number 2048!

Note: Your game is always automatically saved! You can close or minimize the extension popup at any time, and when you reopen it, you'll resume right where you left off.

Enjoy the game — works offline and distraction-free, right in your browser!

---

Created by iridescent995