Build a Sokoban puzzle game as a static web page in this directory: index.html, style.c…

grokgrok-4.5 · 40 steps · 3m 49s · 3 filessession eae18753-191@patrick-toulme
Build a Sokoban puzzle game as a static web page in this directory: index.html, style.css, game.js. Requirements: 8 hand-crafted levels of increasing difficulty; arrow-key movement with box pushing; U undoes one move, R restarts the level; move and push counters; win detection with a level-complete overlay and auto-advance; a level-select strip showing completed levels; retro tile look drawn in pure CSS (walls, floor, goals, boxes, player) with no external assets or build step; everything must work by opening index.html.
same matchclaude-code · 59 steps pi · 54 steps grok · 40 steps antigravity · 41 steps
compare in arena
step 16 / 40
game.jschange 1/3
/**
 * Sokoban — pure static JS
 * Map legend: # wall  . goal  $ box  * box+goal  @ player  + player+goal  space floor
 */
 
(function () {
  "use strict";
 
  const LEVELS = [
    // 1 — Tutorial: one box, one push
    [
      "#####",
      "#   #",
      "# $ #",
      "# . #",
      "# @ #",
      "#####",
    ],
    // 2 — Two boxes, simple corridor
    [
      "######",
      "#    #",
      "# $$ #",
      "# .. #",
      "# @  #",
      "######",
    ],
    // 3 — Side goals, need order
    [
      "#######",
      "#     #",
      "# $ $ #",
      "#  @  #",
      "# . . #",
      "#######",
    ],
    // 4 — Corner traps appear
    [
      "  ####",
      "###  #",
      "# $  #",
      "# @$.#",
      "### .#",
      "  ####",
    ],
    // 5 — Classic mini puzzle
    [
      "########",
      "#      #",
      "# $$*  #",
      "#  @$  #",
      "#  ..  #",
      "########",
    ],
    // 6 — More open, three boxes
    [
      "  #####",
      "###   #",
      "# $ $ #",
      "#  *  ##",
      "# $ @  #",
      "#  . . #",
      "########",
    ],
    // 7 — Tight maze-like
    [
      "########",
      "#  .   #",
      "# $$ # #",
      "#  #   #",
      "## # $##",
      "#  @ . #",
      "#  .$  #",
      "########",
    ],
    // 8 — Finale: four boxes, careful routing
    [
      "  ######",
      "###    #",
      "# $ $$ #",
      "#  @   #",
      "## ##$##",
      "#  ... #",
      "#  .   #",
      "########",
    ],
  ];
 
  // ----- State -----
 
  let levelIndex = 0;
  let width = 0;
  let height = 0;
  let walls = null; // Set of "x,y"
  let goals = null; // Set of "x,y"
  let boxes = null; // Set of "x,y"
  let player = { x: 0, y: 0 };
  let moves = 0;
  let pushes = 0;
  let history = []; // undo stack of snapshots
  let completed = new Set();
  let won = false;
  let advanceTimer = null;
 
  // ----- DOM -----
 
  const boardEl = document.getElementById("board");
  const levelNumEl = document.getElementById("level-num");
  const moveCountEl = document.getElementById("move-count");
  const pushCountEl = document.getElementById("push-count");
  const levelStripEl = document.getElementById("level-strip");
  const overlayEl = document.getElementById("overlay");
  const overlayTitleEl = document.getElementById("overlay-title");
  const overlayMsgEl = document.getElementById("overlay-msg");
  const overlayStatsEl = document.getElementById("overlay-stats");
  const overlayHintEl = document.getElementById("overlay-hint");
 
  // ----- Helpers -----
 
  function key(x, y) {
    return x + "," + y;
  }
 
  function cloneBoxes(set) {
    return new Set(set);
  }
 
  function snapshot() {
    return {
      boxes: cloneBoxes(boxes),
      player: { x: player.x, y: player.y },
      moves: moves,
      pushes: pushes,
    };
  }
 
  function restore(snap) {
    boxes = cloneBoxes(snap.boxes);
    player = { x: snap.player.x, y: snap.player.y };
    moves = snap.moves;
    pushes = snap.pushes;
  }
 
  function parseLevel(rows) {
    height = rows.length;
    width = Math.max.apply(
      null,
      rows.map(function (r) {
        return r.length;
      })
    );
    walls = new Set();
    goals = new Set();
    boxes = new Set();
    player = { x: 0, y: 0 };
 
    for (let y = 0; y < height; y++) {
      const row = rows[y];
      for (let x = 0; x < width; x++) {
        const ch = x < row.length ? row[x] : " ";
        switch (ch) {
          case "#":
            walls.add(key(x, y));
            break;
          case ".":
            goals.add(key(x, y));
            break;
          case "$":
            boxes.add(key(x, y));
            break;
          case "*":
            goals.add(key(x, y));
            boxes.add(key(x, y));
            break;
          case "@":
            player = { x: x, y: y };
            break;
          case "+":
            goals.add(key(x, y));
            player = { x: x, y: y };
            break;
          default:
            break;
        }
      }
    }
  }
 
  function isWall(x, y) {
    return walls.has(key(x, y));
  }
 
  function hasBox(x, y) {
    return boxes.has(key(x, y));
  }
 
  function inBounds(x, y) {
    return x >= 0 && y >= 0 && x < width && y < height;
  }
 
  function isPlayableCell(x, y) {
    // Treat cells that are wall-enclosed floors; empty outside uses walls map only
    return inBounds(x, y) && !isWall(x, y);
  }
 
  function checkWin() {
    let all = true;
    goals.forEach(function (g) {
      if (!boxes.has(g)) all = false;
    });
    // Also every box must be on a goal (same when counts match)
    if (boxes.size !== goals.size) all = false;
    return all;
  }
 
  // ----- Movement -----
 
  function tryMove(dx, dy) {
    if (won) return;
 
    const nx = player.x + dx;
    const ny = player.y + dy;
 
    if (!isPlayableCell(nx, ny)) return;
 
    const targetHasBox = hasBox(nx, ny);
 
    if (targetHasBox) {
      const bx = nx + dx;
      const by = ny + dy;
      if (!isPlayableCell(bx, by) || hasBox(bx, by)) return;
 
      history.push(snapshot());
      boxes.delete(key(nx, ny));
      boxes.add(key(bx, by));
      player.x = nx;
      player.y = ny;
      moves += 1;
      pushes += 1;
    } else {
      history.push(snapshot());
      player.x = nx;
      player.y = ny;
      moves += 1;
    }
 
    updateHUD();
    renderBoard();
 
    if (checkWin()) {
      onWin();
    }
  }
 
  function undo() {
    if (won || history.length === 0) return;
    const snap = history.pop();
    restore(snap);
    updateHUD();
    renderBoard();
  }
 
  function restartLevel() {
    clearAdvanceTimer();
    hideOverlay();
    won = false;
    loadLevel(levelIndex, false);
  }
 
  // ----- Win / advance -----
 
  function clearAdvanceTimer() {
    if (advanceTimer !== null) {
      clearTimeout(advanceTimer);
      advanceTimer = null;
    }
  }
 
  function hideOverlay() {
    overlayEl.classList.add("hidden");
  }
 
  function showOverlay(isLast) {
    overlayTitleEl.textContent = isLast ? "All Levels Clear!" : "Level Complete!";
    overlayMsgEl.textContent = isLast
      ? "You finished every puzzle. Master pusher!"
      : "Nice work packing those crates.";
    overlayStatsEl.textContent =
      "Moves: " + moves + "  ·  Pushes: " + pushes;
    overlayHintEl.textContent = isLast
      ? "Pick a level above to play again."
      : "Next level in a moment…";
    overlayEl.classList.remove("hidden");
  }
 
  function onWin() {
    won = true;
    completed.add(levelIndex);
    renderLevelStrip();
    const isLast = levelIndex >= LEVELS.length - 1;
    showOverlay(isLast);
 
    clearAdvanceTimer();
    if (!isLast) {
      advanceTimer = setTimeout(function () {
        advanceTimer = null;
        hideOverlay();
        loadLevel(levelIndex + 1, true);
      }, 1600);
    }
  }
 
  // ----- Render -----
 
  function updateHUD() {
    levelNumEl.textContent = String(levelIndex + 1);
    moveCountEl.textContent = String(moves);
    pushCountEl.textContent = String(pushes);
  }
 
  function renderLevelStrip() {
    levelStripEl.innerHTML = "";
    for (let i = 0; i < LEVELS.length; i++) {
      const btn = document.createElement("button");
      btn.type = "button";
      btn.className = "level-btn";
      btn.textContent = String(i + 1);
      btn.setAttribute("aria-label", "Level " + (i + 1));
      if (i === levelIndex) btn.classList.add("current");
      if (completed.has(i)) btn.classList.add("completed");
      btn.addEventListener("click", function () {
        clearAdvanceTimer();
        hideOverlay();
        loadLevel(i, true);
      });
      levelStripEl.appendChild(btn);
    }
  }
 
  function cellIsInside(x, y) {
    // A cell is "inside" the map if it's a wall or reachable-ish floor.
    // We mark non-wall cells that appear in the level string as floor;
    // pure padding (outside the drawn walls) stays empty when never walkable
    // and not a goal/box start — simplest: show floor for any non-wall that
    // is not entirely outside the bounding walls. For classic Sokoban maps,
    // use: wall => wall, else if within map bounds show floor for spaces
    // that are part of the puzzle. Empty ' ' outside walls: still floor if
    // inside width — look at neighbors for better visuals.
 
    if (isWall(x, y)) return "wall";
 
    // If this cell or neighbors touch anything meaningful, treat as floor
    const k = key(x, y);
    if (goals.has(k) || boxes.has(k) || (player.x === x && player.y === y)) {
      return "floor";
    }
 
    // Flood-style: if any adjacent cell is wall/goal/box/player, show floor
    // so we don't paint huge empty regions. For padded rows, skip pure void.
    const dirs = [
      [0, 1],
      [0, -1],
      [1, 0],
      [-1, 0],
    ];
    let nearSomething = false;
    for (let i = 0; i < dirs.length; i++) {
      const ax = x + dirs[i][0];
      const ay = y + dirs[i][1];
      if (!inBounds(ax, ay)) continue;
      const ak = key(ax, ay);
      if (
        walls.has(ak) ||
        goals.has(ak) ||
        boxes.has(ak) ||
        (player.x === ax && player.y === ay)
      ) {
        nearSomething = true;
        break;
      }
    }
 
    // Also show floor if the original map had a non-space or space inside
    // a wall ring. Simple approach used by most HTML Sokoban: every non-wall
    // cell in the rectangular grid is floor. Padding spaces outside look odd
    // with checker floor — mark as empty if no wall within bounding and not near.
    if (!nearSomething) {
      // Check if this is "outside" by seeing if any wall exists on this row/col
      // within the level — if the original row was shorter, treat padding empty
      const row = LEVELS[levelIndex][y];
      if (!row || x >= row.length) return "empty";
      if (row[x] === " " && !nearSomething) {
        // space in source: could be outside or floor. Classic: spaces inside walls
        // are floor. Heuristic: if surrounded path exists via BFS from player —
        // too heavy. Use: if space and not adjacent to wall/content, empty.
        return "empty";
      }
    }
 
    return "floor";
  }
 
  function renderBoard() {
    boardEl.style.gridTemplateColumns = "repeat(" + width + ", var(--tile))";
    boardEl.innerHTML = "";
 
    for (let y = 0; y < height; y++) {
      for (let x = 0; x < width; x++) {
        const cell = document.createElement("div");
        const kind = cellIsInside(x, y);
        cell.className = "tile " + kind;
 
        if (kind === "floor" || kind === "wall") {
          // floor may have goal
        }
        if (goals.has(key(x, y)) && kind !== "wall") {
          cell.classList.add("goal");
          if (kind === "empty") {
            cell.classList.remove("empty");
            cell.classList.add("floor");
          }
        }
 
        if (boxes.has(key(x, y))) {
          const box = document.createElement("div");
          box.className = "entity box";
          if (goals.has(key(x, y))) box.classList.add("on-goal");
          cell.appendChild(box);
          // ensure floor under box
          if (cell.classList.contains("empty")) {
            cell.classList.remove("empty");
            cell.classList.add("floor");
          }
        }
 
        if (player.x === x && player.y === y) {
          const p = document.createElement("div");
          p.className = "entity player";
          cell.appendChild(p);
          if (cell.classList.contains("empty")) {
            cell.classList.remove("empty");
            cell.classList.add("floor");
          }
        }
 
        boardEl.appendChild(cell);
      }
    }
  }
 
  // ----- Load -----
 
  function loadLevel(index, resetHistory) {
    levelIndex = index;
    won = false;
    parseLevel(LEVELS[index]);
    moves = 0;
    pushes = 0;
    if (resetHistory !== false) history = [];
    else history = [];
    updateHUD();
    renderLevelStrip();
    renderBoard();
  }
 
  // ----- Input -----
 
  const KEY_DIR = {
    ArrowUp: [0, -1],
    ArrowDown: [0, 1],
    ArrowLeft: [-1, 0],
    ArrowRight: [1, 0],
  };
 
  document.addEventListener("keydown", function (e) {
    if (e.key in KEY_DIR) {
      e.preventDefault();
      const d = KEY_DIR[e.key];
      tryMove(d[0], d[1]);
      return;
    }
 
    const k = e.key.length === 1 ? e.key.toLowerCase() : e.key;
    if (k === "u") {
      e.preventDefault();
      undo();
    } else if (k === "r") {
      e.preventDefault();
      restartLevel();
    }
  });
 
  // ----- Boot -----
 
  loadLevel(0, true);
})();
 
497 linesjs
Writes …/game.js
Files at this step
drag the rail to scrub
Discussion

No comments yet. Start the discussion. Recorded by @patrick-toulme.
#css #game #grok #grok-4.5 #html #javascript #quick #ui
g5-grok
← all sessions