{ "format": { "id": "hatchplayjs-game", "version": 1 }, "meta": { "title": "8x8 Drop Four", "subtitle": "Drop discs into columns. You (cyan) vs CPU (pink). First to connect 4 wins.", "badge": "ECS" }, "canvas": { "width": 720, "height": 720 }, "config": { "ROWS": 8, "COLS": 8, "CONNECT": 4, "CELL": 76, "MARGIN": 56, "DROP_SPEED": 900, "CPU_THINK_DELAY": 0.35, "PLAYER_COLOR": "#00d4ff", "CPU_COLOR": "#ff6b6b", "BOARD_BG": "#0f0f23", "GRID_LINE": "rgba(255,255,255,0.10)", "HOLE": "rgba(0,0,0,0.35)", "HIGHLIGHT": "rgba(0,212,255,0.20)" }, "componentTypes": { "Disc": ["owner", "col", "row", "state", "targetY"], "BoardCell": ["col", "row"], "GameState": ["current", "phase", "winner", "winningCells", "lastMoveCol"] }, "game": {}, "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:8px; 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:8px; padding:16px; width:260px; }", ".panel h3 { color:#00d4ff; margin:0 0 10px 0; font-size:1em; border-bottom:1px solid #333; padding-bottom:6px; }", ".stats { font-size:0.9em; }", ".row { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px dashed rgba(255,255,255,0.08); }", ".row:last-child { border-bottom:none; }", ".label { color:#888; }", ".value { color:#00d4ff; font-weight:bold; }", ".hint { color:#aaa; font-size:0.85em; line-height:1.35; margin-top:10px; }", ".pill { display:inline-block; padding:2px 8px; border-radius:999px; border:1px solid #333; font-size:0.8em; }", ".pill.you { color:#00d4ff; border-color:#00d4ff; }", ".pill.cpu { color:#ff6b6b; border-color:#ff6b6b; }", "button { width:100%; background:#0f3460; color:#00d4ff; border:1px solid #00d4ff; padding:10px 16px; border-radius:6px; cursor:pointer; font-size:0.95em; margin-top:10px; }", "button:hover { background:#00d4ff; color:#0f3460; }", "button.secondary { background:transparent; border-color:#333; color:#aaa; }", "button.secondary:hover { background:#222; color:#fff; }", "@media (max-width:900px) { .game-area { flex-direction:column; align-items:center; } .panel { width:100%; max-width:720px; } canvas { order:-1; } }" ], "panel": [ "

", "

Match

", "

Turn —

", "

Status —

", "

Last column —

", "

", " Click a column to drop a disc.
", " You are CYAN and the computer is PINK.
", " First to connect 4 wins.", "

", " ", " ", "

" ] }, "script": [ "(function() {", "var H = window.HPJ, engine = H.engine, world = H.world, ctx = H.ctx, canvas = H.canvas, C = H.config;", "", "var ROWS = C.ROWS, COLS = C.COLS, CONNECT = C.CONNECT;", "var CELL = C.CELL, M = C.MARGIN;", "var boardW = COLS * CELL, boardH = ROWS * CELL;", "", "function clamp(v, a, b) { return Math.max(a, Math.min(b, v)); }", "", "class Disc extends Component {", " constructor(owner, col, row, targetY) {", " super();", " this.owner = owner; // 'P' or 'C'", " this.col = col;", " this.row = row;", " this.state = 'dropping';", " this.targetY = targetY;", " }", "}", "", "class GameState extends Component {", " constructor() {", " super();", " this.current = 'P'; // 'P' or 'C'", " this.phase = 'playing'; // 'playing' | 'animating' | 'ended'", " this.winner = null; // 'P' | 'C' | 'D'", " this.winningCells = [];", " this.lastMoveCol = null;", " }", "}", "", "var stateEntity = world.createEntity();", "world.addComponent(stateEntity, new GameState());", "", "var grid = [];", "function makeEmptyGrid() {", " grid = new Array(ROWS);", " for (var r = 0; r < ROWS; r++) {", " grid[r] = new Array(COLS);", " for (var c = 0; c < COLS; c++) grid[r][c] = null;", " }", "}", "", "function cellCenterX(col) { return M + col * CELL + CELL / 2; }", "function cellCenterY(row) { return M + row * CELL + CELL / 2; }", "function discRadius() { return CELL * 0.36; }", "", "function getGameState() { return world.getComponent(stateEntity, GameState); }", "", "function columnTopY() { return M - CELL * 0.75; }", "", "function getAvailableRow(col) {", " for (var r = ROWS - 1; r >= 0; r--) {", " if (grid[r][col] == null) return r;", " }", " return -1;", "}", "", "function isBoardFull() {", " for (var c = 0; c < COLS; c++) if (getAvailableRow(c) !== -1) return false;", " return true;", "}", "", "function inBounds(r, c) { return r >= 0 && r < ROWS && c >= 0 && c < COLS; }", "", "function checkWinFrom(r, c) {", " var owner = grid[r][c];", " if (!owner) return null;", " var dirs = [", " { dr: 0, dc: 1 },", " { dr: 1, dc: 0 },", " { dr: 1, dc: 1 },", " { dr: 1, dc: -1 }", " ];", " for (var i = 0; i < dirs.length; i++) {", " var dr = dirs[i].dr, dc = dirs[i].dc;", " var cells = [{ r: r, c: c }];", " var rr = r + dr, cc = c + dc;", " while (inBounds(rr, cc) && grid[rr][cc] === owner) {", " cells.push({ r: rr, c: cc });", " rr += dr; cc += dc;", " }", " rr = r - dr; cc = c - dc;", " while (inBounds(rr, cc) && grid[rr][cc] === owner) {", " cells.unshift({ r: rr, c: cc });", " rr -= dr; cc -= dc;", " }", " if (cells.length >= CONNECT) {", " var best = cells.slice(0, CONNECT);", " for (var s = 0; s + CONNECT <= cells.length; s++) {", " best = cells.slice(s, s + CONNECT);", " break;", " }", " return { owner: owner, cells: best };", " }", " }", " return null;", "}", "", "function checkAnyWin() {", " for (var r = 0; r < ROWS; r++) {", " for (var c = 0; c < COLS; c++) {", " if (!grid[r][c]) continue;", " var res = checkWinFrom(r, c);", " if (res) return res;", " }", " }", " return null;", "}", "", "function destroyAllDiscs() {", " var discs = world.getEntitiesWithComponents(Disc, Position);", " for (var i = 0; i < discs.length; i++) world.destroyEntity(discs[i]);", "}", "", "function newGame() {", " destroyAllDiscs();", " makeEmptyGrid();", " var gs = getGameState();", " gs.current = 'P';", " gs.phase = 'playing';", " gs.winner = null;", " gs.winningCells = [];", " gs.lastMoveCol = null;", "}", "", "function spawnDisc(owner, col, row) {", " var id = world.createEntity();", " var x = cellCenterX(col);", " var y0 = columnTopY();", " var yT = cellCenterY(row);", " world.addComponent(id, new Position(x, y0));", " world.addComponent(id, new Disc(owner, col, row, yT));", " world.addComponent(id, new Tag('disc'));", " return id;", "}", "", "function finalizeMove(owner, col, row) {", " var gs = getGameState();", " gs.lastMoveCol = col;", " var win = checkWinFrom(row, col) || checkAnyWin();", " if (win) {", " gs.phase = 'ended';", " gs.winner = win.owner;", " gs.winningCells = win.cells;", " return;", " }", " if (isBoardFull()) {", " gs.phase = 'ended';", " gs.winner = 'D';", " gs.winningCells = [];", " return;", " }", " gs.current = (owner === 'P') ? 'C' : 'P';", " gs.phase = 'playing';", "}", "", "function tryDrop(owner, col) {", " var gs = getGameState();", " if (gs.phase !== 'playing') return false;", " if (gs.current !== owner) return false;", " if (col < 0 || col >= COLS) return false;", " var row = getAvailableRow(col);", " if (row === -1) return false;", " grid[row][col] = owner;", " spawnDisc(owner, col, row);", " gs.phase = 'animating';", " return true;", "}", "", "function evaluateImmediateWinner(testGrid, row, col) {", " var owner = testGrid[row][col];", " if (!owner) return null;", " function tIn(r, c) { return r >= 0 && r < ROWS && c >= 0 && c < COLS; }", " var dirs = [[0,1],[1,0],[1,1],[1,-1]];", " for (var i = 0; i < dirs.length; i++) {", " var dr = dirs[i][0], dc = dirs[i][1];", " var count = 1;", " var rr = row + dr, cc = col + dc;", " while (tIn(rr, cc) && testGrid[rr][cc] === owner) { count++; rr += dr; cc += dc; }", " rr = row - dr; cc = col - dc;", " while (tIn(rr, cc) && testGrid[rr][cc] === owner) { count++; rr -= dr; cc -= dc; }", " if (count >= CONNECT) return owner;", " }", " return null;", "}", "", "function cpuChooseColumn() {", " var valid = [];", " for (var c = 0; c < COLS; c++) if (getAvailableRow(c) !== -1) valid.push(c);", " if (valid.length === 0) return -1;", "", " // 1) Win now", " for (var i = 0; i < valid.length; i++) {", " var col = valid[i];", " var row = getAvailableRow(col);", " var tg = grid.map(function(rr) { return rr.slice(); });", " tg[row][col] = 'C';", " if (evaluateImmediateWinner(tg, row, col) === 'C') return col;", " }", " // 2) Block player win", " for (var j = 0; j < valid.length; j++) {", " var col2 = valid[j];", " var row2 = getAvailableRow(col2);", " var tg2 = grid.map(function(rr) { return rr.slice(); });", " tg2[row2][col2] = 'P';", " if (evaluateImmediateWinner(tg2, row2, col2) === 'P') return col2;", " }", " // 3) Prefer center-ish columns", " var center = (COLS - 1) / 2;", " valid.sort(function(a, b) { return Math.abs(a - center) - Math.abs(b - center); });", " // Add slight randomness among the best few", " var pickFrom = Math.min(3, valid.length);", " return valid[Math.floor(Math.random() * pickFrom)];", "}", "", "var assistHint = true;", "var hoverCol = -1;", "", "function screenToCanvas(e) {", " var rect = canvas.getBoundingClientRect();", " var sx = canvas.width / rect.width, sy = canvas.height / rect.height;", " return {", " x: (e.clientX - rect.left) * sx,", " y: (e.clientY - rect.top) * sy", " };", "}", "", "function pointToColumn(x, y) {", " if (x < M || x > M + boardW || y < M - CELL || y > M + boardH) return -1;", " var col = Math.floor((x - M) / CELL);", " return clamp(col, 0, COLS - 1);", "}", "", "canvas.addEventListener('mousemove', function(e) {", " var p = screenToCanvas(e);", " hoverCol = pointToColumn(p.x, p.y);", "});", "canvas.addEventListener('mouseleave', function() { hoverCol = -1; });", "", "canvas.addEventListener('click', function(e) {", " var gs = getGameState();", " if (gs.phase === 'ended') return;", " var p = screenToCanvas(e);", " var col = pointToColumn(p.x, p.y);", " if (col === -1) return;", " tryDrop('P', col);", "});", "", "document.getElementById('newGameBtn').addEventListener('click', function() { newGame(); });", "document.getElementById('toggleAssistBtn').addEventListener('click', function() {", " assistHint = !assistHint;", " document.getElementById('toggleAssistBtn').textContent = 'Toggle Column Hint: ' + (assistHint ? 'On' : 'Off');", "});", "", "class DropAnimationSystem extends System {", " update(dt) {", " var gs = getGameState();", " var discs = world.getEntitiesWithComponents(Disc, Position);", " var anyDropping = false;", " for (var i = 0; i < discs.length; i++) {", " var d = world.getComponent(discs[i], Disc);", " var p = world.getComponent(discs[i], Position);", " if (d.state !== 'dropping') continue;", " anyDropping = true;", " p.y += C.DROP_SPEED * dt;", " if (p.y >= d.targetY) {", " p.y = d.targetY;", " d.state = 'settled';", " finalizeMove(d.owner, d.col, d.row);", " }", " }", " // If no disc is dropping but we were animating, ensure phase is correct", " if (!anyDropping && gs.phase === 'animating') gs.phase = 'playing';", " }", "}", "", "var cpuTimer = 0;", "class CPUSystem extends System {", " update(dt) {", " var gs = getGameState();", " if (gs.phase !== 'playing') { cpuTimer = 0; return; }", " if (gs.current !== 'C') { cpuTimer = 0; return; }", " cpuTimer += dt;", " if (cpuTimer < C.CPU_THINK_DELAY) return;", " cpuTimer = 0;", " var col = cpuChooseColumn();", " if (col !== -1) tryDrop('C', col);", " }", "}", "", "function drawBoard() {", " ctx.fillStyle = C.BOARD_BG;", " ctx.fillRect(0, 0, canvas.width, canvas.height);", "", " // Board frame", " ctx.fillStyle = '#101a33';", " ctx.fillRect(M - 10, M - 10, boardW + 20, boardH + 20);", " ctx.strokeStyle = 'rgba(0,212,255,0.25)';", " ctx.lineWidth = 2;", " ctx.strokeRect(M - 10, M - 10, boardW + 20, boardH + 20);", "", " // Column hover highlight", " if (assistHint) {", " var gs = getGameState();", " if (hoverCol !== -1 && gs.phase === 'playing' && gs.current === 'P' && getAvailableRow(hoverCol) !== -1) {", " ctx.fillStyle = C.HIGHLIGHT;", " ctx.fillRect(M + hoverCol * CELL, M, CELL, boardH);", " }", " }", "", " // Grid and holes", " for (var r = 0; r < ROWS; r++) {", " for (var c = 0; c < COLS; c++) {", " var x = M + c * CELL;", " var y = M + r * CELL;", " ctx.strokeStyle = C.GRID_LINE;", " ctx.lineWidth = 1;", " ctx.strokeRect(x, y, CELL, CELL);", "", " // hole shadow", " ctx.beginPath();", " ctx.fillStyle = C.HOLE;", " ctx.arc(x + CELL/2, y + CELL/2, discRadius() + 4, 0, Math.PI * 2);", " ctx.fill();", " }", " }", "}", "", "function drawDiscs() {", " var discs = world.getEntitiesWithComponents(Disc, Position);", " for (var i = 0; i < discs.length; i++) {", " var d = world.getComponent(discs[i], Disc);", " var p = world.getComponent(discs[i], Position);", " var color = (d.owner === 'P') ? C.PLAYER_COLOR : C.CPU_COLOR;", " var r = discRadius();", "", " // soft glow", " ctx.beginPath();", " ctx.fillStyle = (d.owner === 'P') ? 'rgba(0,212,255,0.18)' : 'rgba(255,107,107,0.18)';", " ctx.arc(p.x, p.y, r + 10, 0, Math.PI * 2);", " ctx.fill();", "", " // disc", " var grad = ctx.createRadialGradient(p.x - r*0.25, p.y - r*0.25, r*0.2, p.x, p.y, r);", " grad.addColorStop(0, '#ffffff');", " grad.addColorStop(0.15, color);", " grad.addColorStop(1, 'rgba(0,0,0,0.45)');", " ctx.beginPath();", " ctx.fillStyle = grad;", " ctx.arc(p.x, p.y, r, 0, Math.PI * 2);", " ctx.fill();", "", " ctx.lineWidth = 2;", " ctx.strokeStyle = 'rgba(255,255,255,0.18)';", " ctx.stroke();", " }", "}", "", "function drawWinOverlay() {", " var gs = getGameState();", " if (gs.phase !== 'ended') return;", "", " // highlight winning cells", " if (gs.winningCells && gs.winningCells.length) {", " for (var i = 0; i < gs.winningCells.length; i++) {", " var cell = gs.winningCells[i];", " var cx = cellCenterX(cell.c);", " var cy = cellCenterY(cell.r);", " ctx.beginPath();", " ctx.strokeStyle = '#ffd700';", " ctx.lineWidth = 5;", " ctx.arc(cx, cy, discRadius() + 6, 0, Math.PI * 2);", " ctx.stroke();", " }", " }", "", " ctx.fillStyle = 'rgba(0,0,0,0.35)';", " ctx.fillRect(0, 0, canvas.width, canvas.height);", "", " var msg = (gs.winner === 'D') ? 'Draw!' : (gs.winner === 'P' ? 'You win!' : 'Computer wins!');", " ctx.fillStyle = '#fff';", " ctx.font = 'bold 44px sans-serif';", " ctx.textAlign = 'center';", " ctx.fillText(msg, canvas.width / 2, 80);", "", " ctx.fillStyle = '#aaa';", " ctx.font = '18px sans-serif';", " ctx.fillText('Press New Game to play again.', canvas.width / 2, 110);", "}", "", "class RenderSystem extends System {", " update(dt) {", " drawBoard();", " drawDiscs();", " drawWinOverlay();", " }", "}", "", "class UISystem extends System {", " update(dt) {", " var gs = getGameState();", " var turnEl = document.getElementById('turnVal');", " var statusEl = document.getElementById('statusVal');", " var lastEl = document.getElementById('lastColVal');", "", " if (gs.phase === 'ended') {", " turnEl.textContent = '—';", " statusEl.textContent = (gs.winner === 'D') ? 'Draw' : (gs.winner === 'P' ? 'You won' : 'CPU won');", " } else {", " turnEl.textContent = (gs.current === 'P') ? 'You (Cyan)' : 'CPU (Pink)';", " statusEl.textContent = (gs.phase === 'animating') ? 'Dropping…' : 'Choose a column';", " }", " lastEl.textContent = (gs.lastMoveCol == null) ? '—' : String(gs.lastMoveCol + 1);", " }", "}", "", "newGame();", "", "world.addSystem(DropAnimationSystem);", "world.addSystem(CPUSystem);", "world.addSystem(RenderSystem);", "world.addSystem(UISystem);", "})();" ] }