Practice Questions

const DIRECTIONS = {
  ArrowUp: { x: 0, y: -1 },
  ArrowDown: { x: 0, y: 1 },
  ArrowLeft: { x: -1, y: 0 },
  ArrowRight: { x: 1, y: 0 },
};

let direction = DIRECTIONS.ArrowRight; // initial direction

document.addEventListener("keydown", (event) => {
  const newDir = DIRECTIONS[event.key];
  if (!newDir) return;  // ignore non-arrow keys

  // Prevent reversing: new direction cannot be opposite of current
  const isOpposite =
    newDir.x + direction.x === 0 && newDir.y + direction.y === 0;

  if (!isOpposite) {
    direction = newDir;
  }
});

The reversal check works because opposite directions sum to zero on both axes (e.g., Left {-1, 0} + Right {1, 0} = {0, 0}). This prevents the player from immediately colliding with themselves by doubling back.

function createGrid(container, size) {
  const cells = [];
  for (let i = 0; i < size * size; i++) {
    const cell = document.createElement("div");
    cell.classList.add("cell");
    container.appendChild(cell);
    cells.push(cell);
  }
  return cells;
}

The function uses document.createElement to create each cell, adds a class for styling, appends it to the container, and collects references in an array so individual cells can be accessed by index later.

// Coordinate to index
const index = y * 10 + x;

// Index to coordinate
const x = index % 10;
const y = Math.floor(index / 10);

In a row-major flat array, each row contains GRID_SIZE elements. Multiplying y by the row width and adding x gives the linear position. The reverse uses modulo for the column and integer division for the row.

The pattern works by adding a new element at the front (the new head position) and removing the last element (the old tail). This makes the entire sequence appear to shift forward by one step, since every segment now occupies the position of the one that was in front of it.

function move(segments, direction) {
  const head = segments[0];
  const newHead = {
    x: head.x + direction.x,
    y: head.y + direction.y,
  };
  segments.unshift(newHead);
  segments.pop();
}

unshift inserts at the front; pop removes from the end. The array is mutated in place.

Using CustomEvent decouples the code that changes state from the code that reacts to it. The producer does not depend on who is listening or how many listeners there are.

// Producer: only cares about announcing the change
function updateScore(newScore) {
  const event = new CustomEvent("score:changed", {
    detail: { score: newScore },
  });
  document.dispatchEvent(event);
}

// Listener 1: updates the display
document.addEventListener("score:changed", (e) => {
  document.getElementById("score").textContent = e.detail.score;
});

// Listener 2: persists to localStorage
document.addEventListener("score:changed", (e) => {
  localStorage.setItem("high-score", e.detail.score);
});

If updateScore called both functions directly, adding a third reaction (e.g., playing a sound effect) would require editing updateScore. With events, you register a new listener instead, and the producer stays unchanged.

This is the same principle behind addEventListener("click", ...): the button does not depend on what happens when it is clicked. Custom events let you apply this pattern to your own application logic.

When a single function handles both state changes and DOM updates, the two concerns become mixed together in one function. Adding a new feature (e.g., a sound effect when something happens) requires editing the state-update function, increasing its complexity and the risk of introducing bugs.

Custom events solve this by making the state-update function only responsible for modifying state and then dispatching an event that describes what happened. Separate listeners independently react to those events: one listener updates the DOM, another plays a sound, another logs analytics. Each can be added or removed without modifying the core logic. This is decoupling: the producer of the event does not depend on who is listening.

Importing a module for its side effects means you are not importing any exported values. Instead, the module’s top-level code runs when it is imported, and that code performs some useful work as a side effect of being loaded.

Examples of side effects that run at import time:

• Creating DOM elements and appending them to the page (e.g., building a grid of cells)
• Registering event listeners on document (e.g., document.addEventListener("snake:tick", ...))
• Setting global variables or modifying shared state

This pattern is common in event-driven architecture: each module registers its own listeners, and the entry point only imports the modules and starts the application.

function randomPosition(gridSize, occupied) {
  let position;
  do {
    position = {
      x: Math.floor(Math.random() * gridSize),
      y: Math.floor(Math.random() * gridSize),
    };
  } while (
    occupied.some((pos) => pos.x === position.x && pos.y === position.y)
  );
  return position;
}

The do...while loop generates a random position and checks whether it overlaps with any occupied cell. If it does, it generates a new one. The loop is guaranteed to run at least once, which is why do...while is appropriate here rather than a regular while loop.

setInterval returns a numeric ID that uniquely identifies the interval. clearInterval takes that ID and cancels the repeating execution. Without storing the ID, you have no way to stop the interval.

let count = 0;
const intervalId = setInterval(() => {
  count++;
  console.log(`Tick ${count}`);
  if (count >= 5) {
    clearInterval(intervalId);
    console.log("Stopped");
  }
}, 1000);

You need this pattern in a game loop. You store the interval ID so you can stop the loop when the game ends, stop it when the player pauses, or restart it at a different speed.

localStorage is a browser API that stores key-value pairs as strings. Data persists across page refreshes and browser restarts (unlike session storage or in-memory variables).

// Saving
function saveHighScore(score) {
  localStorage.setItem("high-score", score);
}

// Loading (handling first visit)
function loadHighScore() {
  return Number(localStorage.getItem("high-score")) || 0;
}

localStorage.getItem returns null if the key does not exist. Number(null) evaluates to 0, so the || 0 fallback handles the first-ever visit. Note that localStorage stores everything as strings, so the value is automatically coerced when saved and must be converted back with Number() when loaded.

You need to track the interval ID (to know whether the loop is currently running) and optionally a running flag to prevent pausing before the game starts or after it ends.

let intervalId = null;
let running = false;

function tick() {
  // game update logic here
}

function start() {
  running = true;
  intervalId = setInterval(tick, 150);
}

function togglePause() {
  if (!running) return;

  if (intervalId) {
    clearInterval(intervalId);
    intervalId = null;
  } else {
    intervalId = setInterval(tick, 150);
  }
}

intervalId acts as a dual-purpose variable: when it is non-null, the game is running; when it is null, the game is paused. The guard if (!running) return prevents toggling before the game has started.

If you pass the original reference, any listener that receives the event could accidentally (or intentionally) mutate the source data. For example, a UI listener might sort or filter the array it receives, which would modify the engine’s internal state and cause bugs that are difficult to trace.

By creating a shallow copy with spread operators:

emit("tick", { items: [...items], config: { ...config } });

the engine’s original state is protected, because no listener can accidentally mutate the source data. Note that all listeners still share the same emitted snapshot, so one listener mutating the copy could affect another listener that reads it later. To fully isolate listeners from each other, you would need to freeze the snapshot (Object.freeze) or clone it again per listener. In practice, treating the emitted data as read-only is usually sufficient.

Note that spread creates only a shallow copy. If objects are deeply nested, you may need a deep copy (e.g., structuredClone or JSON.parse(JSON.stringify(...))) to fully protect the source data.