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

claude-codeclaude-sonnet-5 · 59 steps · 8m 42s · 3 filessession 13b8b853-6c5@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 50 / 59
game.jschange 1/1
(function () {
  'use strict';
 
  var TILE = 36;
 
  // Tile legend: # wall, (space) floor, . goal, $ box, * box-on-goal,
  // @ player, + player-on-goal
  var LEVELS = [
    {
      name: 'Level 1',
      rows: [
        '#####',
        '#@  #',
        '# $ #',
        '#  .#',
        '#####'
      ]
    },
    {
      name: 'Level 2',
      rows: [
        '#######',
        '#     #',
        '#  #  #',
        '#  #  #',
        '# $#  #',
        '#   .@#',
        '#######'
      ]
    },
    {
      name: 'Level 3',
      rows: [
        '########',
        '# @    #',
        '# $  $ #',
        '#      #',
        '# .  . #',
        '#      #',
        '########'
      ]
    },
    {
      name: 'Level 4',
      rows: [
        '########',
        '#      #',
        '#  ##  #',
        '# $##$ #',
        '#      #',
        '# .  . #',
        '#  @   #',
        '########'
      ]
    },
    {
      name: 'Level 5',
      rows: [
        '#########',
        '#       #',
        '#  # #  #',
        '# $#$#$ #',
        '#       #',
        '# . . . #',
        '#   @   #',
        '#########'
      ]
    },
    {
      name: 'Level 6',
      rows: [
        '#########',
        '#       #',
        '# $ $ $ #',
        '#       #',
        '#       #',
        '#  . . .#',
        '#   @   #',
        '#       #',
        '#########'
      ]
    },
    {
      name: 'Level 7',
      rows: [
        '###########',
        '#         #',
        '# $ $ $ $ #',
        '#         #',
        '#  #   #  #',
        '#         #',
        '# . . . . #',
        '#    @    #',
        '#         #',
        '###########'
      ]
    },
    {
      name: 'Level 8',
      rows: [
        '#############',
        '#           #',
        '# $ $ $ $ $ #',
        '#           #',
        '#  # # # #  #',
        '#  # # # #  #',
        '# . . . . . #',
        '#     @     #',
        '#           #',
        '#############'
      ]
    }
  ];
 
  var WALL = '#';
  var GOAL_CHARS = { '.': 1, '*': 1, '+': 1 };
  var BOX_CHARS = { '$': 1, '*': 1 };
  var PLAYER_CHARS = { '@': 1, '+': 1 };
 
  var DIRS = {
    up: { dr: -1, dc: 0 },
    down: { dr: 1, dc: 0 },
    left: { dr: 0, dc: -1 },
    right: { dr: 0, dc: 1 }
  };
 
  var boardEl = document.getElementById('board');
  var overlayEl = document.getElementById('overlay');
  var overlayTitleEl = document.getElementById('overlay-title');
  var overlayStatsEl = document.getElementById('overlay-stats');
  var overlayNextBtn = document.getElementById('overlay-next');
  var levelStripEl = document.getElementById('level-strip');
  var hudLevelEl = document.getElementById('hud-level');
  var hudMovesEl = document.getElementById('hud-moves');
  var hudPushesEl = document.getElementById('hud-pushes');
  var btnUndo = document.getElementById('btn-undo');
  var btnRestart = document.getElementById('btn-restart');
 
  var currentLevelIndex = 0;
  var width = 0, height = 0;
  var walls = null;
  var goals = null;
  var boxes = [];
  var player = { r: 0, c: 0 };
  var facing = 'down';
  var moves = 0;
  var pushes = 0;
  var history = [];
  var completed = {};
  var overlayTimer = null;
  var inputLocked = false;
 
  var playerEl = null;
  var boxEls = [];
 
  function key(r, c) {
    return r + ',' + c;
  }
 
  function parseLevel(idx) {
    var rows = LEVELS[idx].rows;
    height = rows.length;
    width = 0;
    for (var i = 0; i < rows.length; i++) {
      width = Math.max(width, rows[i].length);
    }
 
    walls = {};
    goals = {};
    boxes = [];
    player = { r: 0, c: 0 };
 
    for (var r = 0; r < height; r++) {
      var row = rows[r];
      for (var c = 0; c < width; c++) {
        var ch = c < row.length ? row[c] : ' ';
        if (ch === WALL) walls[key(r, c)] = true;
        if (GOAL_CHARS[ch]) goals[key(r, c)] = true;
        if (BOX_CHARS[ch]) boxes.push({ r: r, c: c });
        if (PLAYER_CHARS[ch]) player = { r: r, c: c };
      }
    }
  }
 
  function boxIndexAt(r, c) {
    for (var i = 0; i < boxes.length; i++) {
      if (boxes[i].r === r && boxes[i].c === c) return i;
    }
    return -1;
  }
 
  function isWall(r, c) {
    return !!walls[key(r, c)];
  }
 
  function isGoal(r, c) {
    return !!goals[key(r, c)];
  }
 
  // ---------- Rendering ----------
 
  function renderStatic() {
    boardEl.innerHTML = '';
    boardEl.style.setProperty('--cols', width);
    boardEl.style.setProperty('--rows', height);
    boardEl.style.gridTemplateColumns = 'repeat(' + width + ', ' + TILE + 'px)';
    boardEl.style.gridTemplateRows = 'repeat(' + height + ', ' + TILE + 'px)';
    boardEl.style.width = (width * TILE) + 'px';
    boardEl.style.height = (height * TILE) + 'px';
 
    for (var r = 0; r < height; r++) {
      for (var c = 0; c < width; c++) {
        var tile = document.createElement('div');
        if (isWall(r, c)) {
          tile.className = 'tile wall';
        } else {
          var parity = (r + c) % 2 === 0 ? 'floor-a' : 'floor-b';
          tile.className = 'tile ' + parity + (isGoal(r, c) ? ' goal' : '');
        }
        boardEl.appendChild(tile);
      }
    }
 
    // Entities layer
    boxEls = boxes.map(function () {
      var el = document.createElement('div');
      el.className = 'entity box';
      var body = document.createElement('div');
      body.className = 'box-body';
      el.appendChild(body);
      boardEl.appendChild(el);
      return el;
    });
 
    playerEl = document.createElement('div');
    playerEl.className = 'entity player';
    var pbody = document.createElement('div');
    pbody.className = 'player-body';
    var peyes = document.createElement('div');
    peyes.className = 'player-eyes';
    pbody.appendChild(peyes);
    playerEl.appendChild(pbody);
    boardEl.appendChild(playerEl);
 
    // Ensure overlay stays on top and inside board-wrap positioning context
    boardEl.appendChild(overlayEl);
  }
 
  function renderDynamic() {
    for (var i = 0; i < boxes.length; i++) {
      var b = boxes[i];
      var el = boxEls[i];
      el.style.left = (b.c * TILE) + 'px';
      el.style.top = (b.r * TILE) + 'px';
      el.className = 'entity box' + (isGoal(b.r, b.c) ? ' on-goal' : '');
    }
    playerEl.style.left = (player.c * TILE) + 'px';
    playerEl.style.top = (player.r * TILE) + 'px';
    playerEl.className = 'entity player facing-' + facing;
  }
 
  function updateHud() {
    hudLevelEl.textContent = (currentLevelIndex + 1);
    hudMovesEl.textContent = moves;
    hudPushesEl.textContent = pushes;
  }
 
  function buildLevelStrip() {
    levelStripEl.innerHTML = '';
    for (var i = 0; i < LEVELS.length; i++) {
      (function (idx) {
        var btn = document.createElement('button');
        btn.className = 'level-btn';
        btn.textContent = (idx + 1);
        btn.title = LEVELS[idx].name;
        btn.addEventListener('click', function () {
          loadLevel(idx);
        });
        levelStripEl.appendChild(btn);
      })(i);
    }
    updateLevelStrip();
  }
 
  function updateLevelStrip() {
    var btns = levelStripEl.querySelectorAll('.level-btn');
    for (var i = 0; i < btns.length; i++) {
      var classes = ['level-btn'];
      if (i === currentLevelIndex) classes.push('current');
      if (completed[i]) classes.push('completed');
      btns[i].className = classes.join(' ');
    }
  }
 
  // ---------- Overlay ----------
 
  function hideOverlay() {
    overlayEl.classList.add('hidden');
    if (overlayTimer) {
      clearTimeout(overlayTimer);
      overlayTimer = null;
    }
  }
 
  function showOverlay() {
    var isLast = currentLevelIndex === LEVELS.length - 1;
    overlayTitleEl.textContent = isLast ? 'All Levels Complete!' : 'Level Complete!';
    overlayStatsEl.textContent = 'Moves: ' + moves + '   •   Pushes: ' + pushes;
    overlayNextBtn.textContent = isLast ? 'Play Again ↻' : 'Next Level ▸';
    overlayEl.classList.remove('hidden');
 
    overlayNextBtn.onclick = function () {
      if (overlayTimer) clearTimeout(overlayTimer);
      advanceAfterWin(isLast);
    };
 
    if (!isLast) {
      overlayTimer = setTimeout(function () {
        advanceAfterWin(false);
      }, 1600);
    }
  }
 
  function advanceAfterWin(isLast) {
    overlayTimer = null;
    if (isLast) {
      loadLevel(0);
    } else {
      loadLevel(currentLevelIndex + 1);
    }
  }
 
  // ---------- Game logic ----------
 
  function loadLevel(idx) {
    hideOverlay();
    currentLevelIndex = idx;
    parseLevel(idx);
    moves = 0;
    pushes = 0;
    history = [];
    facing = 'down';
    renderStatic();
    renderDynamic();
    updateHud();
    updateLevelStrip();
  }
 
  function restart() {
    hideOverlay();
    parseLevel(currentLevelIndex);
    moves = 0;
    pushes = 0;
    history = [];
    facing = 'down';
    renderDynamic();
    updateHud();
  }
 
  function snapshot() {
    return {
      player: { r: player.r, c: player.c },
      boxes: boxes.map(function (b) { return { r: b.r, c: b.c }; }),
      moves: moves,
      pushes: pushes,
      facing: facing
    };
  }
 
  function undo() {
    if (overlayVisible()) return;
    if (history.length === 0) return;
    var snap = history.pop();
    player = snap.player;
    boxes = snap.boxes;
    moves = snap.moves;
    pushes = snap.pushes;
    facing = snap.facing;
    renderDynamic();
    updateHud();
  }
 
  function overlayVisible() {
    return !overlayEl.classList.contains('hidden');
  }
 
  function checkWin() {
    if (boxes.length === 0) return false;
    for (var i = 0; i < boxes.length; i++) {
      if (!isGoal(boxes[i].r, boxes[i].c)) return false;
    }
    return true;
  }
 
  function attemptMove(dir) {
    if (overlayVisible()) return;
    var d = DIRS[dir];
    if (!d) return;
    facing = dir;
 
    var nr = player.r + d.dr;
    var nc = player.c + d.dc;
 
    if (isWall(nr, nc)) {
      renderDynamic(); // still update facing
      return;
    }
 
    var bIdx = boxIndexAt(nr, nc);
    var willPush = false;
 
    if (bIdx !== -1) {
      var br = nr + d.dr;
      var bc = nc + d.dc;
      if (isWall(br, bc) || boxIndexAt(br, bc) !== -1) {
        renderDynamic();
        return;
      }
      willPush = true;
    }
 
    history.push(snapshot());
 
    if (willPush) {
      boxes[bIdx] = { r: nr + d.dr, c: nc + d.dc };
      pushes++;
    }
    player = { r: nr, c: nc };
    moves++;
 
    renderDynamic();
    updateHud();
 
    if (checkWin()) {
      completed[currentLevelIndex] = true;
      updateLevelStrip();
      showOverlay();
    }
  }
 
  // ---------- Input ----------
 
  var KEY_TO_DIR = {
    ArrowUp: 'up',
    ArrowDown: 'down',
    ArrowLeft: 'left',
    ArrowRight: 'right'
  };
 
  document.addEventListener('keydown', function (e) {
    if (KEY_TO_DIR[e.key]) {
      e.preventDefault();
      attemptMove(KEY_TO_DIR[e.key]);
      return;
    }
    if (e.key === 'u' || e.key === 'U') {
      undo();
      return;
    }
    if (e.key === 'r' || e.key === 'R') {
      restart();
      return;
    }
  });
 
  btnUndo.addEventListener('click', undo);
  btnRestart.addEventListener('click', restart);
 
  var dpadBtns = document.querySelectorAll('.dpad-btn');
  for (var i = 0; i < dpadBtns.length; i++) {
    dpadBtns[i].addEventListener('click', function () {
      attemptMove(this.getAttribute('data-dir'));
    });
  }
 
  // ---------- Init ----------
 
  buildLevelStrip();
  loadLevel(0);
})();
 
481 linesjs
Tool call returned an error
Files at this step
drag the rail to scrub
Discussion

No comments yet. Start the discussion. Recorded by @patrick-toulme.
#claude #claude-code #claude-sonnet-5 #css #game #html #javascript #python #quick #skills #ui
g1-claude
← all sessions