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

pigpt-5.5 · 54 steps · 5m 05s · 3 filessession 446ff682-1c4@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 22 / 54

game.jschange 1/5

const LEVELS = [
  {
    name: "First Push",
    map: [
      "#######",
      "#     #",
      "#  @  #",
      "#  $  #",
      "#  .  #",
      "#     #",
      "#######"
    ]
  },
  {
    name: "Two Crates",
    map: [
      "########",
      "#      #",
      "# .$.  #",
      "#  @   #",
      "#  $   #",
      "#  .   #",
      "########"
    ]
  },
  {
    name: "Corner Store",
    map: [
      "#########",
      "#       #",
      "# . $ . #",
      "#   $   #",
      "#   @   #",
      "#       #",
      "#########"
    ]
  },
  {
    name: "Hall Switch",
    map: [
      "#########",
      "#   #   #",
      "# . # . #",
      "# $   $ #",
      "#   @   #",
      "#       #",
      "#########"
    ]
  },
  {
    name: "Loading Bay",
    map: [
      "##########",
      "#        #",
      "#  ..    #",
      "#  $$    #",
      "#   #    #",
      "#   @ $ .#",
      "#        #",
      "##########"
    ]
  },
  {
    name: "Side Door",
    map: [
      "##########",
      "#    #   #",
      "# .  # . #",
      "# $  $   #",
      "#    #   #",
      "#  @   . #",
      "#    $   #",
      "##########"
    ]
  },
  {
    name: "Warehouse",
    map: [
      "###########",
      "#         #",
      "# . . .   #",
      "#  $$$    #",
      "#    #    #",
      "#    @    #",
      "#         #",
      "###########"
    ]
  },
  {
    name: "Final Shift",
    map: [
      "############",
      "#     #    #",
      "# . . # .  #",
      "#  $  $ $  #",
      "#     #    #",
      "#   @      #",
      "#          #",
      "############"
    ]
  }
];
 
const STORAGE_KEY = "pixel-sokoban-completed";
const boardEl = document.getElementById("board");
const stripEl = document.getElementById("levelStrip");
const levelLabelEl = document.getElementById("levelLabel");
const moveCountEl = document.getElementById("moveCount");
const pushCountEl = document.getElementById("pushCount");
const overlayEl = document.getElementById("overlay");
const overlayTextEl = document.getElementById("overlayText");
 
const DIRS = {
  ArrowUp: [-1, 0],
  ArrowDown: [1, 0],
  ArrowLeft: [0, -1],
  ArrowRight: [0, 1]
};
 
let levelIndex = 0;
let base = [];
let boxes = new Set();
let player = { r: 0, c: 0 };
let moves = 0;
let pushes = 0;
let history = [];
let locked = false;
let completed = loadCompleted();
 
function loadCompleted() {
  try {
    const saved = JSON.parse(localStorage.getItem(STORAGE_KEY) || "[]");
    return Array.from({ length: LEVELS.length }, (_, i) => Boolean(saved[i]));
  } catch {
    return Array(LEVELS.length).fill(false);
  }
}
 
function saveCompleted() {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(completed));
}
 
function key(r, c) {
  return `${r},${c}`;
}
 
function cloneBoxes(set = boxes) {
  return new Set([...set]);
}
 
function parseLevel(index) {
  const rows = LEVELS[index].map;
  base = rows.map(row => row.split(""));
  boxes = new Set();
 
  for (let r = 0; r < base.length; r++) {
    for (let c = 0; c < base[r].length; c++) {
      const ch = base[r][c];
      if (ch === "@" || ch === "+") {
        player = { r, c };
        base[r][c] = ch === "+" ? "." : " ";
      } else if (ch === "$" || ch === "*") {
        boxes.add(key(r, c));
        base[r][c] = ch === "*" ? "." : " ";
      }
    }
  }
 
  moves = 0;
  pushes = 0;
  history = [];
  locked = false;
  hideOverlay();
}
 
function renderLevelStrip() {
  stripEl.innerHTML = "";
  LEVELS.forEach((level, i) => {
    const btn = document.createElement("button");
    btn.className = "level-btn";
    btn.type = "button";
    btn.textContent = i + 1;
    btn.title = `Level ${i + 1}: ${level.name}`;
    btn.setAttribute("aria-label", btn.title);
    btn.classList.toggle("active", i === levelIndex);
    btn.classList.toggle("done", completed[i]);
    btn.addEventListener("click", () => loadLevel(i));
    stripEl.appendChild(btn);
  });
}
 
function render() {
  const rows = base.length;
  const cols = base[0].length;
  boardEl.style.setProperty("--rows", rows);
  boardEl.style.setProperty("--cols", cols);
  boardEl.innerHTML = "";
 
  for (let r = 0; r < rows; r++) {
    for (let c = 0; c < cols; c++) {
      const tile = document.createElement("div");
      const isWall = base[r][c] === "#";
      const isGoal = base[r][c] === ".";
      const hasBox = boxes.has(key(r, c));
      const hasPlayer = player.r === r && player.c === c;
      tile.className = "tile " + (isWall ? "wall" : "floor");
      if (isGoal) tile.classList.add("goal");
      if (hasBox) tile.classList.add("box");
      if (hasPlayer) tile.classList.add("player");
      tile.setAttribute("role", "gridcell");
      boardEl.appendChild(tile);
    }
  }
 
  levelLabelEl.textContent = `${levelIndex + 1}/8`;
  moveCountEl.textContent = moves;
  pushCountEl.textContent = pushes;
  renderLevelStrip();
}
 
function isWall(r, c) {
  return r < 0 || c < 0 || r >= base.length || c >= base[0].length || base[r][c] === "#";
}
 
function canStand(r, c) {
  return !isWall(r, c) && !boxes.has(key(r, c));
}
 
function saveHistory() {
  history.push({
    player: { ...player },
    boxes: cloneBoxes(),
    moves,
    pushes
  });
}
 
function move(dr, dc) {
  if (locked) return;
 
  const nr = player.r + dr;
  const nc = player.c + dc;
  const targetKey = key(nr, nc);
 
  if (isWall(nr, nc)) return;
 
  if (boxes.has(targetKey)) {
    const br = nr + dr;
    const bc = nc + dc;
    const boxKey = key(br, bc);
    if (!canStand(br, bc)) return;
 
    saveHistory();
    boxes.delete(targetKey);
    boxes.add(boxKey);
    player = { r: nr, c: nc };
    moves++;
    pushes++;
  } else {
    saveHistory();
    player = { r: nr, c: nc };
    moves++;
  }
 
  render();
  if (isWon()) completeLevel();
}
 
function undo() {
  if (locked || history.length === 0) return;
  const previous = history.pop();
  player = previous.player;
  boxes = previous.boxes;
  moves = previous.moves;
  pushes = previous.pushes;
  render();
}
 
function restart() {
  loadLevel(levelIndex);
}
 
function isWon() {
  return [...boxes].every(pos => {
    const [r, c] = pos.split(",").map(Number);
    return base[r][c] === ".";
  });
}
 
function completeLevel() {
  locked = true;
  completed[levelIndex] = true;
  saveCompleted();
  renderLevelStrip();
 
  const last = levelIndex === LEVELS.length - 1;
  overlayTextEl.textContent = last ? "You solved every level!" : "Advancing to the next level…";
  overlayEl.classList.add("show");
  overlayEl.setAttribute("aria-hidden", "false");
 
  if (!last) {
    window.setTimeout(() => loadLevel(levelIndex + 1), 1400);
  }
}
 
function hideOverlay() {
  overlayEl.classList.remove("show");
  overlayEl.setAttribute("aria-hidden", "true");
}
 
function loadLevel(index) {
  levelIndex = index;
  parseLevel(levelIndex);
  render();
}
 
document.addEventListener("keydown", event => {
  if (event.key in DIRS) {
    event.preventDefault();
    const [dr, dc] = DIRS[event.key];
    move(dr, dc);
  } else if (event.key === "u" || event.key === "U") {
    event.preventDefault();
    undo();
  } else if (event.key === "r" || event.key === "R") {
    event.preventDefault();
    restart();
  }
});
 
loadLevel(0);
 

332 linesjs

Edits game.js

Files at this step

drag the rail to scrub

Discussion

No comments yet. Start the discussion. Recorded by @patrick-toulme.

#css #game #gpt #gpt-5.5 #html #javascript #pi #quick #ui

g3-pi

← all sessions