{ "format": { "id": "hatchplayjs-game", "version": 2 }, "meta": { "title": "Neon Breakout", "subtitle": "Move the paddle to ricochet the ball. Break all bricks to win — miss the ball and it’s game over.", "badge": "ECS", "description": "Ricochet a neon ball, shatter every brick, and keep it alive as the speed ramps up each hit." }, "canvas": { "width": 800, "height": 520 }, "config": { "PADDLE_W": 120, "PADDLE_H": 16, "PADDLE_Y_OFFSET": 42, "PADDLE_SPEED": 520, "BALL_R": 8, "BALL_SPEED": 340, "BALL_SPEED_MAX": 520, "BALL_SPEEDUP_PER_HIT": 8, "BRICK_ROWS": 6, "BRICK_COLS": 10, "BRICK_H": 22, "BRICK_GAP": 8, "BRICK_TOP_MARGIN": 60, "BRICK_SIDE_MARGIN": 40, "POINTS_PER_BRICK": 50, "LAUNCH_DELAY": 0.6 }, "componentTypes": { "Paddle": ["w", "h", "speed"], "Ball": ["r", "stuck", "speed"], "Brick": ["hp", "points", "row", "col"], "Bounds": ["w", "h"], "GameState": ["phase", "score", "bricksLeft", "message", "time"] }, "game": { "theme": "classic" }, "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:6px 0; font-size:0.9em; }", ".stats .label { color:#888; }", ".stats .value { color:#00d4ff; font-weight:bold; }", ".hint { color:#bbb; font-size:0.85em; line-height:1.35; margin-top:10px; }", "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; }", ".pill { display:inline-block; padding:2px 8px; border:1px solid #333; border-radius:999px; font-size:0.8em; color:#bbb; }", ".pill.ok { border-color:#2ed573; color:#2ed573; }", ".pill.bad { border-color:#ff6b6b; color:#ff6b6b; }", "select { 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; }", "select:focus { outline:none; box-shadow:0 0 0 2px rgba(0,212,255,0.25); }", ".row { display:flex; gap:10px; align-items:center; justify-content:space-between; margin-top:10px; }", ".row .label { color:#888; font-size:0.85em; }", "@media (max-width:900px) { .game-area { flex-direction:column; align-items:center; } .panel { width:100%; max-width:800px; } canvas { order:-1; } }" ], "panel": [ "

", "

Breakout

", "

Score0

", "

Bricks Left0

", "

StatusReady

", "

", " Theme", "

", " ", " ", "

", "

Controls Move with A/D or ←/→. On mobile, drag on the canvas.

", "

Win Clear all bricks.

", "

Lose Let the ball fall below the paddle.

", "

" ] }, "script": [ "(function() {", "var H = window.HPJ, engine = H.engine, world = H.world, ctx = H.ctx, canvas = H.canvas, C = H.config;", "var W = canvas.width, Hh = canvas.height;", "", "class Paddle extends Component {", " constructor(w, h, speed) { super(); this.w = w; this.h = h; this.speed = speed; }", "}", "class Ball extends Component {", " constructor(r, speed) { super(); this.r = r; this.stuck = true; this.speed = speed; }", "}", "class Brick extends Component {", " constructor(row, col, points) { super(); this.hp = 1; this.points = points; this.row = row; this.col = col; }", "}", "class Bounds extends Component {", " constructor(w, h) { super(); this.w = w; this.h = h; }", "}", "class GameState extends Component {", " constructor() { super(); this.phase = 'ready'; this.score = 0; this.bricksLeft = 0; this.message = ''; this.time = 0; }", "}", "", "var keys = Object.create(null);", "window.addEventListener('keydown', function(e) { keys[e.key] = true; });", "window.addEventListener('keyup', function(e) { keys[e.key] = false; });", "", "function clamp(v, a, b) { return Math.max(a, Math.min(b, v)); }", "function rand(min, max) { return min + Math.random() * (max - min); }", "", "var THEMES = {", " classic: {", " name: 'Classic',", " bgTop: '#0b1024',", " bgBottom: '#0f0f23',", " grid: 'rgba(0,212,255,0.14)',", " hud: '#00d4ff',", " paddleFill: '#0f3460',", " paddleStroke: '#00d4ff',", " paddleShine: 'rgba(0,212,255,0.18)',", " ballFill: '#ffd700',", " ballStroke: 'rgba(255,255,255,0.35)',", " overlayBg: 'rgba(0,0,0,0.45)',", " win: '#2ed573',", " lose: '#ff6b6b',", " brickColor: function(row, rows) {", " var t = row / Math.max(1, (rows - 1));", " var r = Math.floor(255 * (0.25 + 0.55 * (1 - t)));", " var gcol = Math.floor(255 * (0.25 + 0.55 * (t)));", " return 'rgba(' + r + ',' + gcol + ',255,0.92)';", " }", " },", " stpat: {", " name: \"St. Patrick's Day\",", " bgTop: '#061a12',", " bgBottom: '#081b10',", " grid: 'rgba(46,213,115,0.10)',", " hud: '#7CFFB2',", " paddleFill: '#0b3d2e',", " paddleStroke: '#2ed573',", " paddleShine: 'rgba(255,215,0,0.18)',", " ballFill: '#ffd700',", " ballStroke: 'rgba(255,255,255,0.35)',", " overlayBg: 'rgba(0,0,0,0.45)',", " win: '#ffd700',", " lose: '#ff6b6b',", " brickColor: function(row, rows) {", " var t = row / Math.max(1, (rows - 1));", " var g1 = Math.floor(90 + 120 * (1 - t));", " var g2 = Math.floor(140 + 100 * (t));", " return 'rgba(0,' + g2 + ',' + g1 + ',0.92)';", " },", " clover: true", " }", "};", "", "function getThemeKey() {", " var k = (H.game && H.game.theme) ? H.game.theme : 'classic';", " return THEMES[k] ? k : 'classic';", "}", "function setThemeKey(k) {", " if (!THEMES[k]) k = 'classic';", " if (!H.game) H.game = {};", " H.game.theme = k;", "}", "function T() { return THEMES[getThemeKey()]; }", "", "var gameId = null;", "var paddleId = null;", "var ballId = null;", "", "function getGame() { return world.getComponent(gameId, GameState); }", "", "function clearWorld() {", " var all = world.entityManager.getAllEntities();", " for (var i = 0; i < all.length; i++) world.destroyEntity(all[i]);", "}", "", "function spawnPaddle() {", " var id = world.createEntity();", " var y = Hh - C.PADDLE_Y_OFFSET;", " world.addComponent(id, new Position((W - C.PADDLE_W) / 2, y));", " world.addComponent(id, new Paddle(C.PADDLE_W, C.PADDLE_H, C.PADDLE_SPEED));", " world.addComponent(id, new Collider(C.PADDLE_W, C.PADDLE_H));", " world.addComponent(id, new Tag('paddle'));", " return id;", "}", "", "function spawnBallOnPaddle() {", " var p = world.getComponent(paddleId, Position);", " var pad = world.getComponent(paddleId, Paddle);", " var id = world.createEntity();", " var x = p.x + pad.w / 2;", " var y = p.y - C.BALL_R - 2;", " world.addComponent(id, new Position(x, y));", " world.addComponent(id, new Velocity(0, 0));", " world.addComponent(id, new Ball(C.BALL_R, C.BALL_SPEED));", " world.addComponent(id, new Tag('ball'));", " return id;", "}", "", "function brickLayout() {", " var rows = C.BRICK_ROWS, cols = C.BRICK_COLS;", " var totalGap = (cols - 1) * C.BRICK_GAP;", " var usable = W - 2 * C.BRICK_SIDE_MARGIN - totalGap;", " var bw = Math.floor(usable / cols);", " var startX = Math.floor((W - (bw * cols + totalGap)) / 2);", " return { rows: rows, cols: cols, bw: bw, bh: C.BRICK_H, startX: startX, startY: C.BRICK_TOP_MARGIN };", "}", "", "function spawnBricks() {", " var L = brickLayout();", " var count = 0;", " for (var r = 0; r < L.rows; r++) {", " for (var c = 0; c < L.cols; c++) {", " var id = world.createEntity();", " var x = L.startX + c * (L.bw + C.BRICK_GAP);", " var y = L.startY + r * (L.bh + C.BRICK_GAP);", " world.addComponent(id, new Position(x, y));", " world.addComponent(id, new Bounds(L.bw, L.bh));", " world.addComponent(id, new Collider(L.bw, L.bh));", " world.addComponent(id, new Brick(r, c, C.POINTS_PER_BRICK));", " world.addComponent(id, new Tag('brick'));", " count++;", " }", " }", " getGame().bricksLeft = count;", "}", "", "function launchBall() {", " var g = getGame();", " if (g.phase !== 'ready') return;", " var b = world.getComponent(ballId, Ball);", " var v = world.getComponent(ballId, Velocity);", " b.stuck = false;", " g.phase = 'playing';", " g.message = '';", " var angle = rand(-Math.PI * 0.35, Math.PI * 0.35);", " var speed = b.speed;", " v.vx = Math.sin(angle) * speed;", " v.vy = -Math.cos(angle) * speed;", "", " HPJ.track('game_start');", "}", "", "function endGame(outcome) {", " var g = getGame();", " if (!g) return;", " if (g.phase === 'win' || g.phase === 'lose') return;", " g.phase = (outcome === 'win') ? 'win' : 'lose';", " g.message = (outcome === 'win') ? 'You Win!' : 'Game Over';", " HPJ.track('game_over', { outcome: (outcome === 'win') ? 'win' : 'lose', score: g.score });", "}", "", "function resetGame() {", " clearWorld();", " gameId = world.createEntity();", " world.addComponent(gameId, new GameState());", " paddleId = spawnPaddle();", " ballId = spawnBallOnPaddle();", " spawnBricks();", " var g = getGame();", " g.phase = 'ready';", " g.score = 0;", " g.message = 'Get ready...';", " g.time = 0;", "}", "", "function circleRectHit(cx, cy, r, rx, ry, rw, rh) {", " var nx = clamp(cx, rx, rx + rw);", " var ny = clamp(cy, ry, ry + rh);", " var dx = cx - nx, dy = cy - ny;", " return (dx * dx + dy * dy) <= r * r;", "}", "", "function computeBounceNormal(cx, cy, rx, ry, rw, rh) {", " var left = Math.abs(cx - rx);", " var right = Math.abs(cx - (rx + rw));", " var top = Math.abs(cy - ry);", " var bottom = Math.abs(cy - (ry + rh));", " var m = Math.min(left, right, top, bottom);", " if (m === left) return { nx: -1, ny: 0 };", " if (m === right) return { nx: 1, ny: 0 };", " if (m === top) return { nx: 0, ny: -1 };", " return { nx: 0, ny: 1 };", "}", "", "function reflect(vx, vy, nx, ny) {", " var dot = vx * nx + vy * ny;", " return { vx: vx - 2 * dot * nx, vy: vy - 2 * dot * ny };", "}", "", "function drawClover(x, y, s, fill, stroke) {", " ctx.save();", " ctx.translate(x, y);", " ctx.beginPath();", " ctx.arc(-s * 0.35, -s * 0.15, s * 0.28, 0, Math.PI * 2);", " ctx.arc(s * 0.35, -s * 0.15, s * 0.28, 0, Math.PI * 2);", " ctx.arc(-s * 0.18, s * 0.25, s * 0.28, 0, Math.PI * 2);", " ctx.arc(s * 0.18, s * 0.25, s * 0.28, 0, Math.PI * 2);", " ctx.closePath();", " ctx.fillStyle = fill;", " ctx.fill();", " if (stroke) { ctx.strokeStyle = stroke; ctx.lineWidth = 2; ctx.stroke(); }", " ctx.beginPath();", " ctx.strokeStyle = 'rgba(255,215,0,0.85)';", " ctx.lineWidth = 3;", " ctx.moveTo(0, s * 0.35);", " ctx.lineTo(s * 0.25, s * 0.95);", " ctx.stroke();", " ctx.restore();", "}", "", "class InputPaddleSystem extends System {", " update(dt) {", " var g = getGame();", " if (!g) return;", " var pPos = world.getComponent(paddleId, Position);", " var pad = world.getComponent(paddleId, Paddle);", " var dir = 0;", " if (keys['ArrowLeft'] || keys['a'] || keys['A']) dir -= 1;", " if (keys['ArrowRight'] || keys['d'] || keys['D']) dir += 1;", " pPos.x += dir * pad.speed * dt;", " pPos.x = clamp(pPos.x, 0, W - pad.w);", "", " var b = world.getComponent(ballId, Ball);", " if (b && b.stuck) {", " var bPos = world.getComponent(ballId, Position);", " bPos.x = pPos.x + pad.w / 2;", " bPos.y = pPos.y - b.r - 2;", " }", "", " if (g.phase === 'ready') {", " g.time += dt;", " if (g.time >= C.LAUNCH_DELAY) launchBall();", " }", " }", "}", "", "class TouchDragSystem extends System {", " constructor(world) {", " super(world);", " this.dragging = false;", " this.lastX = 0;", " var self = this;", " canvas.addEventListener('pointerdown', function(e) { self.dragging = true; self.lastX = e.clientX; canvas.setPointerCapture(e.pointerId); });", " canvas.addEventListener('pointerup', function(e) { self.dragging = false; });", " canvas.addEventListener('pointercancel', function(e) { self.dragging = false; });", " canvas.addEventListener('pointermove', function(e) {", " if (!self.dragging) return;", " var rect = canvas.getBoundingClientRect();", " var sx = canvas.width / rect.width;", " var dx = (e.clientX - self.lastX) * sx;", " self.lastX = e.clientX;", " var pPos = world.getComponent(paddleId, Position);", " var pad = world.getComponent(paddleId, Paddle);", " pPos.x = clamp(pPos.x + dx, 0, W - pad.w);", " });", " }", " update(dt) {", " var b = world.getComponent(ballId, Ball);", " if (b && b.stuck) {", " var pPos = world.getComponent(paddleId, Position);", " var pad = world.getComponent(paddleId, Paddle);", " var bPos = world.getComponent(ballId, Position);", " bPos.x = pPos.x + pad.w / 2;", " bPos.y = pPos.y - b.r - 2;", " }", " }", "}", "", "class BallPhysicsSystem extends System {", " update(dt) {", " var g = getGame();", " if (!g || g.phase !== 'playing') return;", " var bPos = world.getComponent(ballId, Position);", " var v = world.getComponent(ballId, Velocity);", " var b = world.getComponent(ballId, Ball);", "", " bPos.x += v.vx * dt;", " bPos.y += v.vy * dt;", "", " if (bPos.x - b.r < 0) { bPos.x = b.r; v.vx *= -1; }", " if (bPos.x + b.r > W) { bPos.x = W - b.r; v.vx *= -1; }", " if (bPos.y - b.r < 0) { bPos.y = b.r; v.vy *= -1; }", "", " if (bPos.y - b.r > Hh) {", " endGame('lose');", " }", " }", "}", "", "class BallPaddleCollisionSystem extends System {", " update(dt) {", " var g = getGame();", " if (!g || g.phase !== 'playing') return;", " var bPos = world.getComponent(ballId, Position);", " var v = world.getComponent(ballId, Velocity);", " var b = world.getComponent(ballId, Ball);", " var pPos = world.getComponent(paddleId, Position);", " var pad = world.getComponent(paddleId, Paddle);", "", " if (v.vy > 0) {", " var hit = circleRectHit(bPos.x, bPos.y, b.r, pPos.x, pPos.y, pad.w, pad.h);", " if (hit) {", " bPos.y = pPos.y - b.r - 0.5;", " var rel = (bPos.x - (pPos.x + pad.w / 2)) / (pad.w / 2);", " rel = clamp(rel, -1, 1);", " var angle = rel * (Math.PI * 0.38);", " var speed = Math.min(C.BALL_SPEED_MAX, Math.max(C.BALL_SPEED, Math.hypot(v.vx, v.vy)));", " speed = Math.min(C.BALL_SPEED_MAX, speed + 4);", " v.vx = Math.sin(angle) * speed;", " v.vy = -Math.cos(angle) * speed;", " }", " }", " }", "}", "", "class BallBrickCollisionSystem extends System {", " update(dt) {", " var g = getGame();", " if (!g || g.phase !== 'playing') return;", " var bPos = world.getComponent(ballId, Position);", " var v = world.getComponent(ballId, Velocity);", " var b = world.getComponent(ballId, Ball);", "", " var bricks = world.getEntitiesWithComponents(Brick, Position, Bounds);", " for (var i = 0; i < bricks.length; i++) {", " var id = bricks[i];", " var p = world.getComponent(id, Position);", " var bd = world.getComponent(id, Bounds);", " if (!circleRectHit(bPos.x, bPos.y, b.r, p.x, p.y, bd.w, bd.h)) continue;", "", " var n = computeBounceNormal(bPos.x, bPos.y, p.x, p.y, bd.w, bd.h);", " var rv = reflect(v.vx, v.vy, n.nx, n.ny);", " v.vx = rv.vx; v.vy = rv.vy;", "", " var sp = Math.hypot(v.vx, v.vy);", " sp = Math.min(C.BALL_SPEED_MAX, sp + C.BALL_SPEEDUP_PER_HIT);", " if (sp > 0.001) {", " var k = sp / Math.hypot(v.vx, v.vy);", " v.vx *= k; v.vy *= k;", " }", "", " var br = world.getComponent(id, Brick);", " g.score += br.points;", " g.bricksLeft = Math.max(0, g.bricksLeft - 1);", " world.destroyEntity(id);", " HPJ.track('brick_break', { score: g.score });", "", " if (g.bricksLeft <= 0) {", " HPJ.track('level_complete', { level: 1, time: g.time });", " endGame('win');", " }", " break;", " }", " }", "}", "", "class RenderSystem extends System {", " update(dt) {", " var g = getGame();", " var theme = T();", " ctx.clearRect(0, 0, W, Hh);", "", " var grd = ctx.createLinearGradient(0, 0, 0, Hh);", " grd.addColorStop(0, theme.bgTop);", " grd.addColorStop(1, theme.bgBottom);", " ctx.fillStyle = grd;", " ctx.fillRect(0, 0, W, Hh);", "", " ctx.strokeStyle = theme.grid;", " ctx.lineWidth = 1;", " for (var y = 40; y < Hh; y += 40) {", " ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(W, y); ctx.stroke();", " }", "", " if (theme.clover) {", " ctx.globalAlpha = 0.22;", " for (var k = 0; k < 8; k++) {", " var xx = (k * 97 + 40) % W;", " var yy = 44 + (k * 61) % 220;", " drawClover(xx, yy, 26, 'rgba(46,213,115,0.85)', 'rgba(255,215,0,0.55)');", " }", " ctx.globalAlpha = 1;", " }", "", " var bricks = world.getEntitiesWithComponents(Brick, Position, Bounds);", " for (var i = 0; i < bricks.length; i++) {", " var id = bricks[i];", " var p = world.getComponent(id, Position);", " var bd = world.getComponent(id, Bounds);", " var br = world.getComponent(id, Brick);", " ctx.fillStyle = theme.brickColor(br.row, C.BRICK_ROWS);", " ctx.fillRect(p.x, p.y, bd.w, bd.h);", " ctx.strokeStyle = 'rgba(0,0,0,0.35)';", " ctx.strokeRect(p.x + 0.5, p.y + 0.5, bd.w - 1, bd.h - 1);", " ctx.fillStyle = 'rgba(255,255,255,0.10)';", " ctx.fillRect(p.x + 2, p.y + 2, bd.w - 4, 4);", " if (theme.clover && bd.w >= 30) {", " ctx.globalAlpha = 0.28;", " drawClover(p.x + bd.w / 2, p.y + bd.h / 2 + 2, Math.min(18, bd.w * 0.28), 'rgba(46,213,115,0.95)', null);", " ctx.globalAlpha = 1;", " }", " }", "", " var pPos = world.getComponent(paddleId, Position);", " var pad = world.getComponent(paddleId, Paddle);", " var px = pPos.x, py = pPos.y;", " ctx.fillStyle = theme.paddleFill;", " ctx.fillRect(px, py, pad.w, pad.h);", " ctx.strokeStyle = theme.paddleStroke;", " ctx.lineWidth = 2;", " ctx.strokeRect(px + 1, py + 1, pad.w - 2, pad.h - 2);", " ctx.fillStyle = theme.paddleShine;", " ctx.fillRect(px + 4, py + 3, pad.w - 8, 4);", "", " var bPos = world.getComponent(ballId, Position);", " var b = world.getComponent(ballId, Ball);", " ctx.beginPath();", " ctx.arc(bPos.x, bPos.y, b.r, 0, Math.PI * 2);", " ctx.fillStyle = theme.ballFill;", " ctx.fill();", " ctx.strokeStyle = theme.ballStroke;", " ctx.stroke();", "", " ctx.fillStyle = theme.hud;", " ctx.font = 'bold 18px sans-serif';", " ctx.textAlign = 'left';", " ctx.fillText('Score: ' + (g ? g.score : 0), 12, 26);", "", " if (g && (g.phase === 'win' || g.phase === 'lose' || g.phase === 'ready')) {", " ctx.fillStyle = theme.overlayBg;", " ctx.fillRect(0, 0, W, Hh);", " ctx.textAlign = 'center';", " ctx.fillStyle = (g.phase === 'lose') ? theme.lose : theme.win;", " ctx.font = 'bold 44px sans-serif';", " var title = (g.phase === 'ready') ? 'READY' : (g.phase === 'win' ? 'YOU WIN' : 'GAME OVER');", " ctx.fillText(title, W / 2, Hh / 2 - 10);", " ctx.fillStyle = '#bbb';", " ctx.font = '16px sans-serif';", " var sub = (g.phase === 'ready') ? 'Launching...' : 'Press Restart to play again';", " ctx.fillText(sub, W / 2, Hh / 2 + 24);", " }", " }", "}", "", "class UISystem extends System {", " update(dt) {", " var g = getGame();", " if (!g) return;", " document.getElementById('scoreVal').textContent = g.score;", " document.getElementById('bricksVal').textContent = g.bricksLeft;", " var pill = document.getElementById('statusPill');", " var txt = 'Ready';", " pill.className = 'pill';", " if (g.phase === 'playing') { txt = 'Playing'; pill.className = 'pill ok'; }", " if (g.phase === 'win') { txt = 'Win'; pill.className = 'pill ok'; }", " if (g.phase === 'lose') { txt = 'Lose'; pill.className = 'pill bad'; }", " if (g.phase === 'ready') { txt = 'Ready'; }", " pill.textContent = txt;", "", " var sel = document.getElementById('themeSelect');", " if (sel && sel.value !== getThemeKey()) sel.value = getThemeKey();", "", " if (g.phase === 'playing') g.time += dt;", " }", "}", "", "document.getElementById('restartBtn').addEventListener('click', function() {", " resetGame();", " HPJ.track('restart');", "});", "document.getElementById('themeSelect').addEventListener('change', function(e) {", " setThemeKey(e.target.value);", " HPJ.track('theme_change', { theme: getThemeKey() });", "});", "", "world.addSystem(InputPaddleSystem);", "world.addSystem(TouchDragSystem);", "world.addSystem(BallPhysicsSystem);", "world.addSystem(BallPaddleCollisionSystem);", "world.addSystem(BallBrickCollisionSystem);", "world.addSystem(RenderSystem);", "world.addSystem(UISystem);", "", "resetGame();", "", "var themeSelect = document.getElementById('themeSelect');", "if (themeSelect) themeSelect.value = getThemeKey();", "})();" ] }