{ "format": { "id": "hatchplayjs-game", "version": 2 }, "meta": { "title": "Falling Blocks", "subtitle": "Move and rotate falling shapes. Clear full lines to score. Game over when the stack reaches the top.", "badge": "ECS", "description": "Slide, rotate, and hard-drop falling blocks to clear lines and chase a high score before you top out" }, "canvas": { "width": 480, "height": 640 }, "config": { "COLS": 10, "ROWS": 20, "CELL": 28, "BOARD_X": 20, "BOARD_Y": 40, "FALL_INTERVAL": 0.65, "SOFT_DROP_MULT": 8, "LOCK_DELAY": 0.12, "DAS_DELAY": 0.18, "DAS_REPEAT": 0.06, "LINE_POINTS": [0, 100, 300, 500, 800], "UI_X": 320, "UI_Y": 60, "UI_W": 140, "UI_BTN_H": 44, "UI_GAP": 10 }, "componentTypes": { "UiButton": ["id", "label", "x", "y", "w", "h", "pressed", "holdable"], "UiPreview": ["x", "y", "w", "h"] }, "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; }", ".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 div { display:flex; justify-content:space-between; padding:4px 0; font-size:0.9em; }", ".stats .label { color:#888; }", ".stats .value { color:#00d4ff; font-weight:bold; }", ".help { margin-top:10px; color:#bbb; font-size:0.85em; line-height:1.3; }", ".kbd { display:inline-block; padding:1px 6px; border:1px solid #333; border-bottom-width:2px; border-radius:6px; background:#0f3460; color:#00d4ff; font-size:0.85em; }", "button { width:100%; background:#0f3460; color:#00d4ff; border:1px solid #00d4ff; padding:10px 14px; border-radius:6px; cursor:pointer; font-size:0.95em; margin-top:10px; }", "button:hover { background:#00d4ff; color:#0f3460; }", ".overlay { position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,0.55); z-index:50; }", ".overlay .card { width:min(520px, 92vw); background:#16213e; border:1px solid #333; border-radius:10px; padding:18px; box-shadow:0 0 30px rgba(0,0,0,0.6); }", ".overlay h2 { margin:0 0 8px 0; color:#ff6b6b; font-size:1.3em; }", ".overlay p { margin:6px 0; color:#ddd; }", ".overlay .muted { color:#888; }", "@media (max-width:900px) { .game-area { flex-direction:column; align-items:center; } .panel { width:100%; max-width:560px; } canvas { order:-1; } }" ], "panel": [ "

", "

Stats

", "

Score0

", "

Lines0

", "

Level1

", "

Next—

", "

←/→ or A/D: move

", "

↑ or W: rotate

", "

↓ or S: soft drop

", "

Space: hard drop

", "

On mobile: use the on-canvas buttons to the right of the board.

", "

", " ", "

", "

Game Over

", "

Your stack reached the top.

", "

Press Restart (or hit Space) to play again.

", "

" ] }, "script": [ "(function() {", "var H = window.HPJ, engine = H.engine, world = H.world, ctx = H.ctx, canvas = H.canvas, C = H.config;", "", "var score = 0, lines = 0, level = 1;", "var running = true;", "", "var COLS = C.COLS, ROWS = C.ROWS, CELL = C.CELL;", "var BX = C.BOARD_X, BY = C.BOARD_Y;", "var boardW = COLS * CELL, boardH = ROWS * CELL;", "", "function clamp(v, a, b) { return Math.max(a, Math.min(b, v)); }", "function deepCopy(o) { return JSON.parse(JSON.stringify(o)); }", "", "class UiButton extends Component {", " constructor(id, label, x, y, w, h, holdable) {", " super();", " this.id = id;", " this.label = label;", " this.x = x; this.y = y; this.w = w; this.h = h;", " this.pressed = false;", " this.holdable = !!holdable;", " }", "}", "", "class UiPreview extends Component {", " constructor(x, y, w, h) { super(); this.x = x; this.y = y; this.w = w; this.h = h; }", "}", "", "var COLORS = {", " I: '#00d4ff',", " O: '#ffd700',", " T: '#b388ff',", " L: '#ff9f43',", " S: '#2ed573'", "};", "", "var SHAPES = [", " { key: 'I', name: 'I', cells: [[0,0,0,0],[1,1,1,1],[0,0,0,0],[0,0,0,0]] },", " { key: 'O', name: 'O', cells: [[0,1,1,0],[0,1,1,0],[0,0,0,0],[0,0,0,0]] },", " { key: 'T', name: 'T', cells: [[0,1,0,0],[1,1,1,0],[0,0,0,0],[0,0,0,0]] },", " { key: 'L', name: 'L', cells: [[0,0,1,0],[1,1,1,0],[0,0,0,0],[0,0,0,0]] },", " { key: 'S', name: 'S', cells: [[0,1,1,0],[1,1,0,0],[0,0,0,0],[0,0,0,0]] }", "];", "", "function rotateCW(mat) {", " var n = mat.length;", " var out = new Array(n);", " for (var y = 0; y < n; y++) {", " out[y] = new Array(n);", " for (var x = 0; x < n; x++) out[y][x] = mat[n - 1 - x][y];", " }", " return out;", "}", "", "function makeBoard() {", " var b = new Array(ROWS);", " for (var y = 0; y < ROWS; y++) {", " b[y] = new Array(COLS);", " for (var x = 0; x < COLS; x++) b[y][x] = null;", " }", " return b;", "}", "", "var board = makeBoard();", "", "function randInt(n) { return Math.floor(Math.random() * n); }", "function nextShape() { return deepCopy(SHAPES[randInt(SHAPES.length)]); }", "", "var current = null;", "var next = nextShape();", "", "function endGame() {", " if (!running) return;", " running = false;", " document.getElementById('gameOverOverlay').style.display = 'flex';", " HPJ.track('game_over', { outcome: 'lose', score: score, level: level });", " setAllButtonsPressed(false);", "}", "", "function resetGame() {", " board = makeBoard();", " score = 0; lines = 0; level = 1;", " running = true;", " document.getElementById('gameOverOverlay').style.display = 'none';", " next = nextShape();", " spawnPiece();", " HPJ.track('game_start');", "}", "", "function spawnPiece() {", " current = next;", " next = nextShape();", " current.x = Math.floor(COLS/2) - 2;", " current.y = 0;", " current.rot = 0;", " current.lockTimer = 0;", " if (collides(current, current.x, current.y, current.cells)) endGame();", "}", "", "function collides(piece, px, py, cells) {", " for (var y = 0; y < 4; y++) {", " for (var x = 0; x < 4; x++) {", " if (!cells[y][x]) continue;", " var gx = px + x;", " var gy = py + y;", " if (gx < 0 || gx >= COLS || gy < 0 || gy >= ROWS) return true;", " if (board[gy][gx]) return true;", " }", " }", " return false;", "}", "", "function tryMove(dx, dy) {", " if (!current || !running) return false;", " var nx = current.x + dx, ny = current.y + dy;", " if (!collides(current, nx, ny, current.cells)) { current.x = nx; current.y = ny; return true; }", " return false;", "}", "", "function tryRotate() {", " if (!current || !running) return false;", " var rotated = rotateCW(current.cells);", " var kicks = [0, -1, 1, -2, 2];", " for (var i = 0; i < kicks.length; i++) {", " var k = kicks[i];", " if (!collides(current, current.x + k, current.y, rotated)) {", " current.cells = rotated;", " current.x += k;", " current.rot = (current.rot + 1) % 4;", " return true;", " }", " }", " return false;", "}", "", "function lockPiece() {", " for (var y = 0; y < 4; y++) {", " for (var x = 0; x < 4; x++) {", " if (!current.cells[y][x]) continue;", " var gx = current.x + x;", " var gy = current.y + y;", " if (gy >= 0 && gy < ROWS && gx >= 0 && gx < COLS) board[gy][gx] = current.key;", " }", " }", " var cleared = clearLines();", " if (cleared > 0) {", " lines += cleared;", " var pts = (C.LINE_POINTS[cleared] || (cleared * 200));", " score += pts * level;", " level = 1 + Math.floor(lines / 10);", " HPJ.track('level_complete', { level: level, lines: lines, score: score });", " }", " spawnPiece();", "}", "", "function clearLines() {", " var cleared = 0;", " for (var y = ROWS - 1; y >= 0; y--) {", " var full = true;", " for (var x = 0; x < COLS; x++) { if (!board[y][x]) { full = false; break; } }", " if (full) {", " board.splice(y, 1);", " var newRow = new Array(COLS);", " for (var x2 = 0; x2 < COLS; x2++) newRow[x2] = null;", " board.unshift(newRow);", " cleared++;", " y++;", " }", " }", " return cleared;", "}", "", "function hardDrop() {", " if (!current || !running) return;", " var steps = 0;", " while (tryMove(0, 1)) steps++;", " score += steps * 2;", " lockPiece();", "}", "", "var keys = Object.create(null);", "var dasDir = 0;", "var dasTimer = 0;", "var repTimer = 0;", "var rotateQueued = false;", "var hardDropQueued = false;", "", "function setKey(code, down) { keys[code] = down; }", "", "document.addEventListener('keydown', function(e) {", " if (['ArrowLeft','ArrowRight','ArrowUp','ArrowDown','Space','KeyA','KeyD','KeyW','KeyS'].indexOf(e.code) >= 0) e.preventDefault();", " if (!keys[e.code]) {", " if (e.code === 'ArrowUp' || e.code === 'KeyW') rotateQueued = true;", " if (e.code === 'Space') hardDropQueued = true;", " }", " setKey(e.code, true);", " if (!running && e.code === 'Space') resetGame();", "});", "document.addEventListener('keyup', function(e) { setKey(e.code, false); });", "", "function updateUI() {", " document.getElementById('scoreVal').textContent = String(score);", " document.getElementById('linesVal').textContent = String(lines);", " document.getElementById('levelVal').textContent = String(level);", " document.getElementById('nextVal').textContent = next ? next.name : '—';", "}", "", "document.getElementById('restartBtn').addEventListener('click', function() { resetGame(); });", "", "function setAllButtonsPressed(v) {", " var ents = world.getEntitiesWithComponents(UiButton);", " for (var i = 0; i < ents.length; i++) world.getComponent(ents[i], UiButton).pressed = v;", "}", "", "function setupCanvasUI() {", " var uiX = C.UI_X, uiY = C.UI_Y, uiW = C.UI_W, btnH = C.UI_BTN_H, gap = C.UI_GAP;", " var idPreview = world.createEntity();", " world.addComponent(idPreview, new UiPreview(uiX, uiY, uiW, 110));", "", " var y0 = uiY + 110 + 14;", " function addBtn(id, label, y, holdable) {", " var e = world.createEntity();", " world.addComponent(e, new UiButton(id, label, uiX, y, uiW, btnH, holdable));", " return e;", " }", " addBtn('left', '◀', y0 + 0*(btnH+gap), true);", " addBtn('rotate', '⟳', y0 + 1*(btnH+gap), false);", " addBtn('right', '▶', y0 + 2*(btnH+gap), true);", " addBtn('down', '▼', y0 + 3*(btnH+gap), true);", " addBtn('drop', 'DROP', y0 + 4*(btnH+gap), false);", "}", "", "function getCanvasPosFromPointer(e) {", " var rect = canvas.getBoundingClientRect();", " return {", " x: (e.clientX - rect.left) * (canvas.width / rect.width),", " y: (e.clientY - rect.top) * (canvas.height / rect.height)", " };", "}", "", "var activePointer = null;", "var activeButtonId = null;", "", "function hitTestButton(px, py) {", " var ents = world.getEntitiesWithComponents(UiButton);", " for (var i = 0; i < ents.length; i++) {", " var b = world.getComponent(ents[i], UiButton);", " if (px >= b.x && px <= b.x + b.w && py >= b.y && py <= b.y + b.h) return b;", " }", " return null;", "}", "", "function pressButton(id, down) {", " if (id === 'left') setKey('ArrowLeft', down);", " if (id === 'right') setKey('ArrowRight', down);", " if (id === 'down') setKey('ArrowDown', down);", " if (!down) return;", " if (id === 'rotate') rotateQueued = true;", " if (id === 'drop') hardDropQueued = true;", "}", "", "canvas.addEventListener('pointerdown', function(e) {", " e.preventDefault();", " if (!running) { resetGame(); return; }", " var p = getCanvasPosFromPointer(e);", " var b = hitTestButton(p.x, p.y);", " if (b) {", " activePointer = e.pointerId;", " activeButtonId = b.id;", " b.pressed = true;", " pressButton(b.id, true);", " try { canvas.setPointerCapture(e.pointerId); } catch (err) {}", " return;", " }", "});", "", "canvas.addEventListener('pointerup', function(e) {", " if (activePointer !== e.pointerId) return;", " var ents = world.getEntitiesWithComponents(UiButton);", " for (var i = 0; i < ents.length; i++) {", " var b = world.getComponent(ents[i], UiButton);", " if (b.id === activeButtonId) b.pressed = false;", " }", " pressButton(activeButtonId, false);", " activePointer = null;", " activeButtonId = null;", "});", "", "canvas.addEventListener('pointercancel', function(e) {", " if (activePointer !== e.pointerId) return;", " setAllButtonsPressed(false);", " pressButton(activeButtonId, false);", " activePointer = null;", " activeButtonId = null;", "});", "", "var fallAcc = 0;", "", "class GameSystem extends System {", " update(dt) {", " updateUI();", " if (!running || !current) return;", "", " if (rotateQueued) { tryRotate(); rotateQueued = false; }", " if (hardDropQueued) { hardDrop(); hardDropQueued = false; return; }", "", " var left = keys['ArrowLeft'] || keys['KeyA'];", " var right = keys['ArrowRight'] || keys['KeyD'];", " var dir = left && !right ? -1 : (right && !left ? 1 : 0);", " if (dir !== dasDir) {", " dasDir = dir; dasTimer = 0; repTimer = 0;", " if (dir !== 0) tryMove(dir, 0);", " } else if (dir !== 0) {", " dasTimer += dt;", " if (dasTimer >= C.DAS_DELAY) {", " repTimer += dt;", " while (repTimer >= C.DAS_REPEAT) { tryMove(dir, 0); repTimer -= C.DAS_REPEAT; }", " }", " }", "", " var soft = keys['ArrowDown'] || keys['KeyS'];", " var interval = C.FALL_INTERVAL * Math.pow(0.88, level - 1);", " interval = clamp(interval, 0.08, 0.9);", " var fallRate = soft ? (1 / interval) * C.SOFT_DROP_MULT : (1 / interval);", " fallAcc += dt * fallRate;", "", " while (fallAcc >= 1) {", " fallAcc -= 1;", " if (tryMove(0, 1)) { if (soft) score += 1; } else { break; }", " }", "", " var resting = collides(current, current.x, current.y + 1, current.cells);", " if (resting) {", " current.lockTimer += dt;", " if (current.lockTimer >= C.LOCK_DELAY) lockPiece();", " } else {", " current.lockTimer = 0;", " }", " }", "}", "", "function drawCell(x, y, color, alpha) {", " var px = BX + x * CELL;", " var py = BY + y * CELL;", " ctx.globalAlpha = alpha == null ? 1 : alpha;", " ctx.fillStyle = color;", " ctx.fillRect(px + 1, py + 1, CELL - 2, CELL - 2);", " ctx.globalAlpha = 1;", "}", "", "function drawBoard() {", " ctx.fillStyle = '#0f0f23';", " ctx.fillRect(0, 0, canvas.width, canvas.height);", "", " ctx.fillStyle = '#16213e';", " ctx.fillRect(BX - 10, BY - 10, boardW + 20, boardH + 20);", " ctx.strokeStyle = '#333';", " ctx.lineWidth = 2;", " ctx.strokeRect(BX - 10, BY - 10, boardW + 20, boardH + 20);", "", " ctx.strokeStyle = 'rgba(255,255,255,0.06)';", " ctx.lineWidth = 1;", " for (var x = 0; x <= COLS; x++) {", " ctx.beginPath(); ctx.moveTo(BX + x * CELL, BY); ctx.lineTo(BX + x * CELL, BY + boardH); ctx.stroke();", " }", " for (var y = 0; y <= ROWS; y++) {", " ctx.beginPath(); ctx.moveTo(BX, BY + y * CELL); ctx.lineTo(BX + boardW, BY + y * CELL); ctx.stroke();", " }", "", " for (var yy = 0; yy < ROWS; yy++) {", " for (var xx = 0; xx < COLS; xx++) {", " var k = board[yy][xx];", " if (!k) continue;", " drawCell(xx, yy, COLORS[k] || '#00d4ff', 1);", " }", " }", "}", "", "function drawGhost() {", " if (!current || !running) return;", " var gy = current.y;", " while (!collides(current, current.x, gy + 1, current.cells)) gy++;", " for (var y = 0; y < 4; y++) {", " for (var x = 0; x < 4; x++) {", " if (!current.cells[y][x]) continue;", " var gx = current.x + x;", " var gyy = gy + y;", " if (gyy >= 0 && gyy < ROWS && gx >= 0 && gx < COLS) drawCell(gx, gyy, '#ffffff', 0.12);", " }", " }", "}", "", "function drawCurrent() {", " if (!current) return;", " for (var y = 0; y < 4; y++) {", " for (var x = 0; x < 4; x++) {", " if (!current.cells[y][x]) continue;", " var gx = current.x + x;", " var gy = current.y + y;", " if (gy >= 0 && gy < ROWS && gx >= 0 && gx < COLS) drawCell(gx, gy, COLORS[current.key] || '#00d4ff', 1);", " }", " }", "}", "", "function drawCanvasUI() {", " var prevs = world.getEntitiesWithComponents(UiPreview);", " if (prevs.length) {", " var p = world.getComponent(prevs[0], UiPreview);", " ctx.fillStyle = '#16213e';", " ctx.fillRect(p.x, p.y, p.w, p.h);", " ctx.strokeStyle = '#333';", " ctx.lineWidth = 2;", " ctx.strokeRect(p.x + 0.5, p.y + 0.5, p.w - 1, p.h - 1);", " ctx.fillStyle = '#888';", " ctx.font = '12px sans-serif';", " ctx.textAlign = 'left';", " ctx.fillText('NEXT', p.x + 10, p.y + 18);", "", " if (next) {", " var minX = 99, minY = 99, maxX = -99, maxY = -99;", " for (var yy = 0; yy < 4; yy++) {", " for (var xx = 0; xx < 4; xx++) {", " if (!next.cells[yy][xx]) continue;", " if (xx < minX) minX = xx;", " if (yy < minY) minY = yy;", " if (xx > maxX) maxX = xx;", " if (yy > maxY) maxY = yy;", " }", " }", " if (maxX >= minX) {", " var shapeW = (maxX - minX + 1);", " var shapeH = (maxY - minY + 1);", " var cell = Math.floor(Math.min((p.w - 20) / 4, (p.h - 30) / 4));", " cell = clamp(cell, 14, 22);", " var px0 = Math.floor(p.x + (p.w - shapeW * cell) / 2);", " var py0 = Math.floor(p.y + 26 + (p.h - 30 - shapeH * cell) / 2);", " var col = COLORS[next.key] || '#00d4ff';", " for (var y2 = minY; y2 <= maxY; y2++) {", " for (var x2 = minX; x2 <= maxX; x2++) {", " if (!next.cells[y2][x2]) continue;", " var px = px0 + (x2 - minX) * cell;", " var py = py0 + (y2 - minY) * cell;", " ctx.fillStyle = col;", " ctx.fillRect(px + 1, py + 1, cell - 2, cell - 2);", " ctx.strokeStyle = 'rgba(255,255,255,0.12)';", " ctx.lineWidth = 1;", " ctx.strokeRect(px + 1.5, py + 1.5, cell - 3, cell - 3);", " }", " }", " }", " }", " }", "", " var btns = world.getEntitiesWithComponents(UiButton);", " for (var i = 0; i < btns.length; i++) {", " var b = world.getComponent(btns[i], UiButton);", " var bg = b.pressed ? '#00d4ff' : '#0f3460';", " var fg = b.pressed ? '#0f3460' : '#00d4ff';", " var br = b.pressed ? '#00d4ff' : '#00d4ff';", " ctx.fillStyle = bg;", " ctx.fillRect(b.x, b.y, b.w, b.h);", " ctx.strokeStyle = br;", " ctx.lineWidth = 2;", " ctx.strokeRect(b.x + 0.5, b.y + 0.5, b.w - 1, b.h - 1);", " ctx.fillStyle = fg;", " ctx.font = 'bold 18px sans-serif';", " ctx.textAlign = 'center';", " ctx.textBaseline = 'middle';", " ctx.fillText(b.label, b.x + b.w/2, b.y + b.h/2 + 1);", " }", " ctx.textBaseline = 'alphabetic';", "}", "", "class RenderSystem extends System {", " update(dt) {", " drawBoard();", " drawGhost();", " drawCurrent();", " drawCanvasUI();", "", " ctx.fillStyle = '#00d4ff';", " ctx.font = 'bold 16px sans-serif';", " ctx.textAlign = 'left';", " ctx.fillText('Score: ' + score, BX, 24);", " ctx.fillStyle = '#888';", " ctx.font = '12px sans-serif';", " ctx.fillText('Lines: ' + lines + ' Level: ' + level, BX + 160, 24);", "", " if (!running) {", " ctx.fillStyle = 'rgba(0,0,0,0.35)';", " ctx.fillRect(BX, BY, boardW, boardH);", " ctx.fillStyle = '#ff6b6b';", " ctx.font = 'bold 28px sans-serif';", " ctx.textAlign = 'center';", " ctx.fillText('GAME OVER', BX + boardW/2, BY + boardH/2 - 10);", " ctx.fillStyle = '#ddd';", " ctx.font = '14px sans-serif';", " ctx.fillText('Press Restart or Space', BX + boardW/2, BY + boardH/2 + 18);", " }", " }", "}", "", "world.addSystem(GameSystem);", "world.addSystem(RenderSystem);", "", "setupCanvasUI();", "resetGame();", "})();" ] }