### Install Sass Gem

Source: https://github.com/gabrielecirulli/2048/blob/master/CONTRIBUTING.md

This command installs the Sass gem, a dependency required for compiling SCSS files to CSS. It requires Ruby to be installed on your system.

```shell
gem install sass
```

--------------------------------

### Initialize and Run 2048 Game - JavaScript

Source: https://context7.com/gabrielecirulli/2048/llms.txt

This snippet demonstrates the complete initialization of the 2048 game by orchestrating the GameManager with the Input, Actuator, and Storage managers. It handles game setup, state restoration, input binding, and rendering.

```javascript
window.requestAnimationFrame(function() {
  var game = new GameManager(
    4,                       // Grid size
    KeyboardInputManager,    // Input handler class
    HTMLActuator,           // Display renderer class
    LocalStorageManager     // State persistence class
  );
});
```

--------------------------------

### Compile SCSS to CSS with Sass

Source: https://github.com/gabrielecirulli/2048/blob/master/CONTRIBUTING.md

This command compiles SCSS files into CSS. It watches for changes in `style/main.scss` and automatically recompiles the CSS. Ensure you have the `sass` gem installed.

```shell
sass --unix-newlines --watch style/main.scss
```

--------------------------------

### Initialize and Control 2048 Game with GameManager

Source: https://context7.com/gabrielecirulli/2048/llms.txt

The GameManager orchestrates all game logic, including tile movement, merging, scoring, and win/loss detection. It initializes the game, handles player input for moving tiles, and manages game state.

```javascript
var game = new GameManager(4, KeyboardInputManager, HTMLActuator, LocalStorageManager);

// The GameManager automatically:
// - Creates a 4x4 grid
// - Adds 2 starting tiles (90% chance of 2, 10% chance of 4)
// - Loads previous game state if available
// - Binds input events (arrow keys, WASD, vim keys, touch swipes)
// - Updates display through the actuator

// Example: Manual game restart
game.restart();
// Clears storage, resets grid, score, and game state

// Example: Continue playing after winning
game.keepPlaying();
// Allows player to continue past 2048 tile

// Example: Move tiles (normally triggered by input)
game.move(0); // 0=up, 1=right, 2=down, 3=left
// Moves all tiles in direction, merges matching tiles, adds random tile
// Updates score, checks for win (2048 tile) or loss (no moves available)
```

--------------------------------

### Manage Game State Persistence - JavaScript

Source: https://context7.com/gabrielecirulli/2048/llms.txt

The LocalStorageManager handles saving and retrieving the game's state, including the grid, score, and high scores, using the browser's localStorage. It provides a fallback to in-memory storage if localStorage is unavailable, ensuring game continuity.

```javascript
var storage = new LocalStorageManager();

// Save and retrieve best score
storage.setBestScore(4096);
var bestScore = storage.getBestScore();

// Save complete game state
var gameState = {
  grid: {
    size: 4,
    cells: [[null, {position: {x:0,y:1}, value:2}, ...], ...]
  },
  score: 1024,
  over: false,
  won: false,
  keepPlaying: false
};
storage.setGameState(gameState);

// Retrieve saved game state
var savedState = storage.getGameState();

// Clear saved game
storage.clearGameState();
```

--------------------------------

### Handle Keyboard, Touch, and Button Input - JavaScript

Source: https://context7.com/gabrielecirulli/2048/llms.txt

The KeyboardInputManager captures and normalizes input from various sources including keyboard presses, touch gestures, and button clicks. It supports arrow keys, WASD, Vim keys, and swipe gestures, emitting 'move', 'restart', and 'keepPlaying' events.

```javascript
var inputManager = new KeyboardInputManager();

inputManager.on("move", function(direction) {
  // direction: 0=up, 1=right, 2=down, 3=left
  console.log("Move in direction: " + direction);
});

inputManager.on("restart", function() {
  console.log("Restart game");
});

inputManager.on("keepPlaying", function() {
  console.log("Continue after winning");
});
```

--------------------------------

### Manage 2048 Game Board with Grid

Source: https://context7.com/gabrielecirulli/2048/llms.txt

The Grid class manages the 4x4 game board, tracking tile positions and providing essential grid operations. It allows for inserting tiles, checking for available cells, and serializing/restoring grid state.

```javascript
// Create a new empty 4x4 grid
var grid = new Grid(4);
// grid.cells = [[null,null,null,null], [null,null,null,null], ...]

// Add a tile to the grid
var tile = new Tile({x: 0, y: 0}, 2);
grid.insertTile(tile);
// grid.cells[0][0] now contains the tile

// Check if cells are available
if (grid.cellsAvailable()) {
  var randomCell = grid.randomAvailableCell();
  // Returns random empty cell like {x: 2, y: 3}
}

// Get available cells
var availableCells = grid.availableCells();
// Returns array: [{x: 0, y: 1}, {x: 1, y: 2}, ...]

// Check specific cell
var isAvailable = grid.cellAvailable({x: 1, y: 1});
var cellContent = grid.cellContent({x: 1, y: 1});
// Returns tile object or null

// Iterate over all cells
grid.eachCell(function(x, y, tile) {
  if (tile) {
    console.log('Tile at (' + x + ',' + y + '): ' + tile.value);
  }
});

// Serialize grid state for storage
var gridState = grid.serialize();
// Returns: {size: 4, cells: [[{position: {x:0,y:0}, value:2}, ...], ...]};

// Restore from saved state
var restoredGrid = new Grid(4, gridState.cells);
```

--------------------------------

### Represent and Track Individual Tiles with Tile

Source: https://context7.com/gabrielecirulli/2048/llms.txt

The Tile class represents a single numbered tile on the game board. It manages the tile's position, value, and state, including tracking its previous position for animations and recording tiles it merged from.

```javascript
// Create a new tile at position (2, 3) with value 4
var tile = new Tile({x: 2, y: 3}, 4);
// tile.x = 2, tile.y = 3, tile.value = 4
// tile.previousPosition = null
// tile.mergedFrom = null

// Save current position before moving
tile.savePosition();
// tile.previousPosition = {x: 2, y: 3}

// Update to new position
tile.updatePosition({x: 2, y: 2});
// tile.x = 2, tile.y = 2
// tile.previousPosition still = {x: 2, y: 3} for animation

// Serialize tile for storage
var tileData = tile.serialize();
// Returns: {position: {x: 2, y: 2}, value: 4}

// Example: Creating merged tiles
var tile1 = new Tile({x: 1, y: 1}, 2);
var tile2 = new Tile({x: 1, y: 2}, 2);
var mergedTile = new Tile({x: 1, y: 1}, 4);
mergedTile.mergedFrom = [tile1, tile2];
// mergedFrom tracks the two tiles that combined
```

--------------------------------

### Render Game State with Animations - JavaScript

Source: https://context7.com/gabrielecirulli/2048/llms.txt

The HTMLActuator is responsible for rendering the game's state to the DOM. It handles tile movements, merges, score updates, and displays win/lose messages with animations. It also manages CSS classes for different tile states and positions.

```javascript
var actuator = new HTMLActuator();

actuator.actuate(grid, {
  score: 1024,
  bestScore: 2048,
  over: false,
  won: false,
  terminated: false
});

// Clear game over/won messages
actuator.continueGame();

// Manual score update
actuator.updateScore(1234);

actuator.updateBestScore(5678);
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.