{ "format": { "id": "hatchplayjs-game", "version": 2 }, "meta": { "title": "Toroidal Lights Out 8×8", "subtitle": "Toggle with wrap-around. Darken every square in 30 moves.", "badge": "PUZZLE", "description": "Tap to toggle a cross with wrap-around edges. Darken all 64 squares before 30 moves run out." }, "canvas": { "width": 640, "height": 640 }, "config": { "GRID": 8, "MOVES_START": 30, "CELL_GAP": 6, "PANEL_WIDTH": 260, "RANDOM_ON_CHANCE": 0.45 }, "componentTypes": { "Cell": ["r", "c", "on"] }, "game": { "movesLeft": 30, "state": "playing", "message": "", "onCount": 0 }, "entities": [], "ui": { "styles": [ ".game-area { display:flex; gap:20px; flex-wrap:wrap; justify-content:center; align-items:flex-start; }", "canvas { border:2px solid #333; border-radius:10px; background:#0f0f23; box-shadow:0 0 20px rgba(0,0,0,0.5); touch-action:none; max-width:100%; height:auto; cursor:pointer; }", ".panel { background:#16213e; border:1px solid #333; border-radius:10px; padding:16px; width:260px; }", ".panel h3 { color:#00d4ff; margin:0 0 10px 0; font-size:1em; border-bottom:1px solid #333; padding-bottom:8px; }", ".stats { margin-top:6px; }", ".stats div { display:flex; justify-content:space-between; padding:6px 0; font-size:0.9em; border-bottom:1px dashed rgba(255,255,255,0.08); }", ".stats div:last-child { border-bottom:none; }", ".label { color:#888; }", ".value { color:#00d4ff; font-weight:700; }", ".value.warn { color:#ffd700; }", ".value.danger { color:#ff4757; }", ".help { margin-top:12px; color:#c7c7d1; font-size:0.85em; line-height:1.35; }", ".help code { color:#ffd700; }", ".msg { margin-top:12px; padding:10px; border-radius:8px; border:1px solid #333; background:rgba(0,0,0,0.25); min-height:40px; }", ".msg.win { border-color: rgba(46,213,115,0.8); }", ".msg.lose { border-color: rgba(255,71,87,0.8); }", ".msgTitle { font-weight:800; margin-bottom:4px; }", ".msgBody { color:#c7c7d1; font-size:0.9em; }", "button { width:100%; background:#0f3460; color:#00d4ff; border:1px solid #00d4ff; padding:10px 14px; border-radius:8px; cursor:pointer; font-size:0.95em; margin-top:10px; }", "button:hover { background:#00d4ff; color:#0f3460; }", "button.secondary { background:transparent; border-color:#333; color:#c7c7d1; }", "button.secondary:hover { background:#0f3460; color:#00d4ff; border-color:#00d4ff; }", "@media (max-width:900px) { .game-area { flex-direction:column; align-items:center; } .panel { width:100%; max-width:640px; } canvas { order:-1; } }" ], "panel": [ "

", "

Lights Out

", "

Grid 8×8

", "

Moves left 30

", "

Lit squares 0

", "

Status Playing

", "

", " Tap a square to toggle a + shape (center + up/down/left/right).
", " Edges wrap around to the opposite side.", "

", " ", " ", "

", "

Goal

", "

Darken all squares before you run out of moves.

", "

" ] }, "script": [ "(function() {", "var H = window.HPJ, engine = H.engine, world = H.world, ctx = H.ctx, canvas = H.canvas, C = H.config;", "", "var N = C.GRID;", "var GAP = C.CELL_GAP;", "var movesStart = C.MOVES_START;", "", "class Cell extends Component {", " constructor(r, c, on) { super(); this.r = r|0; this.c = c|0; this.on = !!on; }", "}", "", "var cellIds = [];", "function idx(r, c) { return r * N + c; }", "function wrap(v) {", " v = v % N;", " if (v < 0) v += N;", " return v;", "}", "", "function clearWorldEntities() {", " var all = world.entityManager.getAllEntities();", " for (var i = 0; i < all.length; i++) world.destroyEntity(all[i]);", "}", "", "function buildBoardFromArray(onArr) {", " clearWorldEntities();", " cellIds = new Array(N * N);", " for (var r = 0; r < N; r++) {", " for (var c = 0; c < N; c++) {", " var id = world.createEntity();", " world.addComponent(id, new Cell(r, c, !!onArr[idx(r,c)]));", " world.addComponent(id, new Tag('cell'));", " cellIds[idx(r,c)] = id;", " }", " }", "}", "", "function randomBoardArray() {", " var arr = new Array(N * N);", " for (var i = 0; i < arr.length; i++) arr[i] = (Math.random() < C.RANDOM_ON_CHANCE);", " return arr;", "}", "", "function computeOnCount() {", " var cells = world.getEntitiesWithComponents(Cell);", " var on = 0;", " for (var i = 0; i < cells.length; i++) {", " var cc = world.getComponent(cells[i], Cell);", " if (cc.on) on++;", " }", " H.game.onCount = on;", " return on;", "}", "", "function setMessage(kind, title, body) {", " var box = document.getElementById('msgBox');", " box.classList.remove('win');", " box.classList.remove('lose');", " if (kind === 'win') box.classList.add('win');", " if (kind === 'lose') box.classList.add('lose');", " document.getElementById('msgTitle').textContent = title || '';", " document.getElementById('msgBody').textContent = body || '';", "}", "", "function setState(state) {", " H.game.state = state;", " if (state === 'playing') {", " setMessage('', 'Goal', 'Darken all squares before you run out of moves.');", " }", "}", "", "function startNewRandomGame() {", " H.game.movesLeft = movesStart;", " setState('playing');", " var arr = randomBoardArray();", " H.game._initialBoard = arr.slice(0);", " buildBoardFromArray(arr);", " computeOnCount();", " HPJ.track('game_start');", " HPJ.track('board_new', { lit: H.game.onCount, moves: H.game.movesLeft });", "}", "", "function resetSameBoard() {", " H.game.movesLeft = movesStart;", " setState('playing');", " var arr = (H.game._initialBoard && H.game._initialBoard.length === N*N) ? H.game._initialBoard.slice(0) : randomBoardArray();", " H.game._initialBoard = arr.slice(0);", " buildBoardFromArray(arr);", " computeOnCount();", " HPJ.track('game_start');", " HPJ.track('board_reset', { lit: H.game.onCount, moves: H.game.movesLeft });", "}", "", "function toggleCell(r, c) {", " r = wrap(r); c = wrap(c);", " var id = cellIds[idx(r,c)];", " if (id == null) return;", " var cell = world.getComponent(id, Cell);", " if (!cell) return;", " cell.on = !cell.on;", "}", "", "function applyMove(r, c) {", " if (H.game.state !== 'playing') return;", " if (H.game.movesLeft <= 0) return;", "", " toggleCell(r, c);", " toggleCell(r-1, c);", " toggleCell(r+1, c);", " toggleCell(r, c-1);", " toggleCell(r, c+1);", "", " H.game.movesLeft--;", "", " var onCount = computeOnCount();", "", " HPJ.track('move', { movesLeft: H.game.movesLeft, lit: onCount });", "", " if (onCount === 0) {", " H.game.state = 'won';", " setMessage('win', 'You win!', 'Board cleared with ' + H.game.movesLeft + ' moves left.');", " HPJ.track('game_over', { outcome: 'win', score: H.game.movesLeft });", " return;", " }", " if (H.game.movesLeft <= 0) {", " H.game.state = 'lost';", " setMessage('lose', 'Out of moves', 'Try a new random board or reset and plan your toggles.');", " HPJ.track('game_over', { outcome: 'lose', score: 0 });", " return;", " }", "}", "", "function cellFromPointer(clientX, clientY) {", " var rect = canvas.getBoundingClientRect();", " var sx = canvas.width / rect.width, sy = canvas.height / rect.height;", " var mx = (clientX - rect.left) * sx;", " var my = (clientY - rect.top) * sy;", "", " var size = Math.min(canvas.width, canvas.height);", " var gridSize = size;", " var cellSize = (gridSize - GAP * (N + 1)) / N;", " var originX = (canvas.width - gridSize) / 2;", " var originY = (canvas.height - gridSize) / 2;", "", " var localX = mx - originX;", " var localY = my - originY;", " if (localX < 0 || localY < 0 || localX > gridSize || localY > gridSize) return null;", "", " var c = Math.floor((localX - GAP) / (cellSize + GAP));", " var r = Math.floor((localY - GAP) / (cellSize + GAP));", " if (r < 0 || r >= N || c < 0 || c >= N) return null;", "", " var x0 = GAP + c * (cellSize + GAP);", " var y0 = GAP + r * (cellSize + GAP);", " if (localX < x0 || localX > x0 + cellSize || localY < y0 || localY > y0 + cellSize) return null;", "", " return { r: r, c: c };", "}", "", "function onPointerDown(e) {", " if (e && e.preventDefault) e.preventDefault();", " var rc = cellFromPointer(e.clientX, e.clientY);", " if (!rc) return;", " applyMove(rc.r, rc.c);", "}", "", "if (window.PointerEvent) {", " canvas.addEventListener('pointerdown', onPointerDown, { passive: false });", "} else {", " canvas.addEventListener('touchstart', function(e) {", " if (e && e.preventDefault) e.preventDefault();", " if (!e.changedTouches || !e.changedTouches.length) return;", " var t = e.changedTouches[0];", " var rc = cellFromPointer(t.clientX, t.clientY);", " if (!rc) return;", " applyMove(rc.r, rc.c);", " }, { passive: false });", " canvas.addEventListener('mousedown', function(e) {", " var rc = cellFromPointer(e.clientX, e.clientY);", " if (!rc) return;", " applyMove(rc.r, rc.c);", " });", "}", "", "document.getElementById('newBtn').addEventListener('click', function() { startNewRandomGame(); });", "document.getElementById('resetBtn').addEventListener('click', function() { resetSameBoard(); });", "", "class RenderSystem extends System {", " update(dt) {", " ctx.clearRect(0, 0, canvas.width, canvas.height);", "", " ctx.fillStyle = '#0f0f23';", " ctx.fillRect(0, 0, canvas.width, canvas.height);", "", " var size = Math.min(canvas.width, canvas.height);", " var gridSize = size;", " var cellSize = (gridSize - GAP * (N + 1)) / N;", " var originX = (canvas.width - gridSize) / 2;", " var originY = (canvas.height - gridSize) / 2;", "", " ctx.save();", " ctx.translate(originX, originY);", "", " ctx.fillStyle = 'rgba(0,212,255,0.08)';", " ctx.fillRect(0, 0, gridSize, gridSize);", "", " var cells = world.getEntitiesWithComponents(Cell);", " for (var i = 0; i < cells.length; i++) {", " var cell = world.getComponent(cells[i], Cell);", " var x = GAP + cell.c * (cellSize + GAP);", " var y = GAP + cell.r * (cellSize + GAP);", "", " var rr = 8;", " ctx.beginPath();", " ctx.moveTo(x + rr, y);", " ctx.arcTo(x + cellSize, y, x + cellSize, y + cellSize, rr);", " ctx.arcTo(x + cellSize, y + cellSize, x, y + cellSize, rr);", " ctx.arcTo(x, y + cellSize, x, y, rr);", " ctx.arcTo(x, y, x + cellSize, y, rr);", " ctx.closePath();", "", " if (cell.on) {", " ctx.fillStyle = '#00d4ff';", " ctx.fill();", " ctx.fillStyle = 'rgba(255,255,255,0.18)';", " ctx.fillRect(x + 4, y + 4, cellSize - 8, Math.max(4, cellSize * 0.12));", " } else {", " ctx.fillStyle = '#0b1022';", " ctx.fill();", " }", "", " ctx.strokeStyle = 'rgba(255,255,255,0.10)';", " ctx.lineWidth = 1;", " ctx.stroke();", " }", "", " if (H.game.state !== 'playing') {", " ctx.fillStyle = 'rgba(0,0,0,0.45)';", " ctx.fillRect(0, 0, gridSize, gridSize);", " ctx.textAlign = 'center';", " ctx.fillStyle = (H.game.state === 'won') ? '#2ed573' : '#ff4757';", " ctx.font = 'bold 44px sans-serif';", " ctx.fillText(H.game.state === 'won' ? 'CLEARED' : 'FAILED', gridSize/2, gridSize/2 - 8);", " ctx.fillStyle = '#c7c7d1';", " ctx.font = '16px sans-serif';", " ctx.fillText('Press “New Random Board” to play again', gridSize/2, gridSize/2 + 26);", " }", "", " ctx.restore();", " }", "}", "", "class UISystem extends System {", " update(dt) {", " document.getElementById('gridVal').textContent = N + '×' + N;", "", " var mv = document.getElementById('movesVal');", " mv.textContent = String(H.game.movesLeft);", " mv.classList.remove('warn'); mv.classList.remove('danger');", " if (H.game.movesLeft <= 10 && H.game.movesLeft > 3) mv.classList.add('warn');", " if (H.game.movesLeft <= 3) mv.classList.add('danger');", "", " document.getElementById('litVal').textContent = String(H.game.onCount);", "", " var st = H.game.state;", " var label = st === 'playing' ? 'Playing' : (st === 'won' ? 'Won' : 'Lost');", " document.getElementById('stateVal').textContent = label;", " }", "}", "", "startNewRandomGame();", "", "world.addSystem(RenderSystem);", "world.addSystem(UISystem);", "})();" ] }