Sokoban Simple body { font-family: sans-serif; text-align: center; background: #f4f4f4; } #game { display: inline-block; margin-top: 20px; background: #fff; padding: 10px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); } .row { display: flex; } .cell { width: 40px; height: 40px; border: 1px solid #ccc; line-height: 40px; font-size: 24px; }

Sokoban (Mini Version)

Use arrow keys to push the box (📦) onto the target (🎯)

const grid = [ [‘ ‘, ‘ ‘, ‘ ‘, ‘ ‘, ‘ ‘], [‘ ‘, ‘🧍’, ‘📦’, ‘🎯’, ‘ ‘], [‘ ‘, ‘ ‘, ‘ ‘, ‘ ‘, ‘ ‘] ]; let playerPos = { row: 1, col: 1 }; function renderGrid() { const gameDiv = document.getElementById(‘game’); gameDiv.innerHTML = ”; for (let r = 0; r < grid.length; r++) { const rowDiv = document.createElement('div'); rowDiv.classList.add('row'); for (let c = 0; c { switch (e.key) { case ‘ArrowUp’: move(0, -1); break; case ‘ArrowDown’: move(0, 1); break; case ‘ArrowLeft’: move(-1, 0); break; case ‘ArrowRight’: move(1, 0); break; } }); renderGrid();