{ "format": { "id": "hatchplayjs-game", "version": 1 }, "meta": { "title": "Cat Dash: Run Home!", "subtitle": "Jump over dogs, grab fish treats, and reach the house within 30 seconds. Hold jump longer to jump higher. 3 strikes = game over.", "badge": "ECS" }, "canvas": { "width": 900, "height": 480 }, "config": { "TIME_LIMIT": 30, "GROUND_Y": 380, "CAT_X": 150, "CAT_W": 44, "CAT_H": 34, "JUMP_VY": -520, "GRAVITY": 1400, "SCROLL_SPEED": 320, "DOG_W": 46, "DOG_H": 34, "DOG_SPAWN_MIN": 0.9, "DOG_SPAWN_MAX": 1.6, "TREAT_W": 26, "TREAT_H": 18, "TREAT_SPAWN_MIN": 0.7, "TREAT_SPAWN_MAX": 1.4, "TREAT_Y_MIN": 250, "TREAT_Y_MAX": 340, "HIT_IFRAME": 0.9, "STRIKES_MAX": 3, "HOUSE_MARGIN": 120, "JUMP_HOLD_MAX": 0.22, "JUMP_HOLD_GRAVITY_MULT": 0.45, "JUMP_RELEASE_CUT": 0.45 }, "componentTypes": { "Player": ["onGround", "strikes", "score", "invuln", "jumpHold", "jumpHolding"], "Obstacle": ["kind"], "Collectible": ["kind", "points"], "Grounded": ["groundY"], "HouseGoal": ["x"], "Parallax": ["factor"], "Lifetime": ["t"] }, "game": { "state": "ready", "distance": 0, "timeLeft": 30, "goalDistance": 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: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 { display:grid; grid-template-columns: 1fr auto; gap:6px 10px; font-size:0.9em; align-items:center; }", ".label { color:#888; }", ".value { color:#00d4ff; font-weight:bold; }", ".value.danger { color:#ff6b6b; }", ".value.gold { color:#ffd700; }", ".hint { color:#bbb; font-size:0.85em; margin-top:10px; line-height:1.35; }", "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; }", ".small { color:#888; font-size:0.8em; margin-top:8px; }", ".pill { display:inline-block; padding:2px 8px; border:1px solid #333; border-radius:999px; background:#0f0f23; color:#bbb; font-size:0.8em; }", "@media (max-width:900px) { .game-area { flex-direction:column; align-items:center; } .panel { width:100%; max-width:700px; } canvas { order:-1; } }" ], "panel": [ "

", "

Cat Dash

", "

State

Ready

", "

Time Left

30.0s

", "

Distance

", "

Score

", "

Strikes

0 / 3

", "

", " ", " ", "

Controls: Hold Space / W / ↑ or hold tap/click to jump higher. Release early for a shorter hop. Jump over dogs. Collect fish treats.

", "

Tip: You have brief invulnerability after a hit.

", "

" ] }, "script": [ "(function() {", "var H = window.HPJ, engine = H.engine, world = H.world, ctx = H.ctx, canvas = H.canvas, C = H.config;", "", "var G = H.game;", "G.state = 'ready';", "G.distance = 0;", "G.timeLeft = C.TIME_LIMIT;", "G.goalDistance = Math.max(1200, C.SCROLL_SPEED * (C.TIME_LIMIT - 2));", "", "function clamp(v, a, b) { return Math.max(a, Math.min(b, v)); }", "function rand(a, b) { return a + Math.random() * (b - a); }", "", "class Player extends Component {", " constructor() {", " super();", " this.onGround = true;", " this.strikes = 0;", " this.score = 0;", " this.invuln = 0;", " this.jumpHold = 0;", " this.jumpHolding = false;", " }", "}", "class Obstacle extends Component {", " constructor(kind) { super(); this.kind = kind || 'dog'; }", "}", "class Collectible extends Component {", " constructor(kind, points) { super(); this.kind = kind || 'fish'; this.points = points == null ? 25 : points; }", "}", "class Grounded extends Component {", " constructor(groundY) { super(); this.groundY = groundY; }", "}", "class HouseGoal extends Component {", " constructor(x) { super(); this.x = x || 0; }", "}", "class Parallax extends Component {", " constructor(factor) { super(); this.factor = factor == null ? 0.5 : factor; }", "}", "class Lifetime extends Component {", " constructor(t) { super(); this.t = t || 0; }", "}", "", "var playerId = null;", "var houseId = null;", "var dogTimer = 0;", "var treatTimer = 0;", "", "function destroyAllDynamic() {", " var all = world.entityManager.getAllEntities();", " for (var i = 0; i < all.length; i++) world.destroyEntity(all[i]);", " playerId = null; houseId = null;", "}", "", "function createPlayer() {", " var id = world.createEntity();", " world.addComponent(id, new Tag('player'));", " world.addComponent(id, new Position(C.CAT_X, C.GROUND_Y - C.CAT_H));", " world.addComponent(id, new Velocity(0, 0));", " world.addComponent(id, new Collider(C.CAT_W, C.CAT_H, 0, 0));", " world.addComponent(id, new Player());", " world.addComponent(id, new Grounded(C.GROUND_Y));", " playerId = id;", " return id;", "}", "", "function createHouseGoal() {", " var id = world.createEntity();", " world.addComponent(id, new Tag('goal'));", " world.addComponent(id, new Position(canvas.width + 400, C.GROUND_Y - 120));", " world.addComponent(id, new Collider(120, 140, 0, 0));", " world.addComponent(id, new HouseGoal(G.goalDistance));", " houseId = id;", " return id;", "}", "", "function spawnDog() {", " if (G.state !== 'playing') return;", " var id = world.createEntity();", " world.addComponent(id, new Tag('dog'));", " world.addComponent(id, new Position(canvas.width + 20, C.GROUND_Y - C.DOG_H));", " world.addComponent(id, new Velocity(-C.SCROLL_SPEED, 0));", " world.addComponent(id, new Collider(C.DOG_W, C.DOG_H, 0, 0));", " world.addComponent(id, new Obstacle('dog'));", " return id;", "}", "", "function spawnTreat() {", " if (G.state !== 'playing') return;", " var id = world.createEntity();", " world.addComponent(id, new Tag('treat'));", " var y = rand(C.TREAT_Y_MIN, C.TREAT_Y_MAX) - C.TREAT_H;", " y = clamp(y, 80, C.GROUND_Y - C.TREAT_H - 10);", " world.addComponent(id, new Position(canvas.width + 20, y));", " world.addComponent(id, new Velocity(-C.SCROLL_SPEED * 0.95, 0));", " world.addComponent(id, new Collider(C.TREAT_W, C.TREAT_H, 0, 0));", " world.addComponent(id, new Collectible('fish', 25));", " return id;", "}", "", "function resetGame() {", " destroyAllDynamic();", " G.state = 'ready';", " G.distance = 0;", " G.timeLeft = C.TIME_LIMIT;", " G.goalDistance = Math.max(1200, C.SCROLL_SPEED * (C.TIME_LIMIT - 2));", " dogTimer = 0;", " treatTimer = 0;", " createPlayer();", " createHouseGoal();", " document.getElementById('startBtn').style.display = '';", " document.getElementById('restartBtn').style.display = 'none';", "}", "", "function startGame() {", " if (G.state === 'playing') return;", " if (G.state === 'won' || G.state === 'lost') resetGame();", " G.state = 'playing';", " dogTimer = rand(C.DOG_SPAWN_MIN, C.DOG_SPAWN_MAX);", " treatTimer = rand(C.TREAT_SPAWN_MIN, C.TREAT_SPAWN_MAX);", " document.getElementById('startBtn').style.display = 'none';", " document.getElementById('restartBtn').style.display = 'none';", "}", "", "function endGame(state) {", " if (G.state !== 'playing') return;", " G.state = state;", " document.getElementById('restartBtn').style.display = '';", " document.getElementById('startBtn').style.display = 'none';", "}", "", "function beginJumpHold() {", " if (G.state === 'ready') startGame();", " if (G.state !== 'playing') return;", " if (playerId == null) return;", " var pl = world.getComponent(playerId, Player);", " var v = world.getComponent(playerId, Velocity);", " if (!pl || !v) return;", " pl.jumpHolding = true;", " if (pl.onGround) {", " v.vy = C.JUMP_VY;", " pl.onGround = false;", " pl.jumpHold = 0;", " }", "}", "", "function endJumpHold() {", " if (playerId == null) return;", " var pl = world.getComponent(playerId, Player);", " var v = world.getComponent(playerId, Velocity);", " if (!pl || !v) return;", " pl.jumpHolding = false;", " if (!pl.onGround && v.vy < 0) {", " v.vy *= C.JUMP_RELEASE_CUT;", " }", "}", "", "function setupInput() {", " window.addEventListener('keydown', function(e) {", " if (e.code === 'Space' || e.code === 'ArrowUp' || e.code === 'KeyW') {", " e.preventDefault();", " if (!e.repeat) beginJumpHold();", " }", " if (e.code === 'Enter') {", " if (G.state === 'ready') startGame();", " else if (G.state === 'won' || G.state === 'lost') { resetGame(); startGame(); }", " }", " }, { passive: false });", " window.addEventListener('keyup', function(e) {", " if (e.code === 'Space' || e.code === 'ArrowUp' || e.code === 'KeyW') {", " e.preventDefault();", " endJumpHold();", " }", " }, { passive: false });", " canvas.addEventListener('pointerdown', function(e) {", " e.preventDefault();", " beginJumpHold();", " }, { passive: false });", " window.addEventListener('pointerup', function(e) {", " endJumpHold();", " }, { passive: true });", " canvas.addEventListener('pointercancel', function(e) {", " endJumpHold();", " }, { passive: true });", "}", "", "class RunnerSystem extends System {", " update(dt) {", " if (G.state !== 'playing') return;", " G.timeLeft -= dt;", " if (G.timeLeft <= 0) {", " G.timeLeft = 0;", " endGame('lost');", " return;", " }", " G.distance += C.SCROLL_SPEED * dt;", " if (G.distance >= G.goalDistance) {", " endGame('won');", " return;", " }", " dogTimer -= dt;", " treatTimer -= dt;", " if (dogTimer <= 0) {", " spawnDog();", " dogTimer = rand(C.DOG_SPAWN_MIN, C.DOG_SPAWN_MAX);", " }", " if (treatTimer <= 0) {", " spawnTreat();", " treatTimer = rand(C.TREAT_SPAWN_MIN, C.TREAT_SPAWN_MAX);", " }", " }", "}", "", "class PhysicsSystem extends System {", " update(dt) {", " var ents = world.getEntitiesWithComponents(Position, Velocity);", " for (var i = 0; i < ents.length; i++) {", " var id = ents[i];", " var p = world.getComponent(id, Position);", " var v = world.getComponent(id, Velocity);", " var isPlayer = world.hasComponent(id, Player);", " if (isPlayer) {", " var pl = world.getComponent(id, Player);", " var gMult = 1;", " if (pl && pl.jumpHolding && pl.jumpHold < C.JUMP_HOLD_MAX && v.vy < 0) {", " gMult = C.JUMP_HOLD_GRAVITY_MULT;", " pl.jumpHold += dt;", " }", " v.vy += C.GRAVITY * gMult * dt;", " }", " p.x += v.vx * dt;", " p.y += v.vy * dt;", " if (isPlayer) {", " var pl2 = world.getComponent(id, Player);", " var g2 = world.getComponent(id, Grounded);", " var groundY = g2 ? g2.groundY : C.GROUND_Y;", " if (p.y >= groundY - C.CAT_H) {", " p.y = groundY - C.CAT_H;", " v.vy = 0;", " pl2.onGround = true;", " pl2.jumpHolding = false;", " pl2.jumpHold = 0;", " } else {", " pl2.onGround = false;", " }", " pl2.invuln = Math.max(0, pl2.invuln - dt);", " }", " }", " }", "}", "", "class CleanupSystem extends System {", " update(dt) {", " var ents = world.getEntitiesWithComponents(Position, Collider);", " for (var i = 0; i < ents.length; i++) {", " var id = ents[i];", " if (world.hasComponent(id, Player) || world.hasComponent(id, HouseGoal)) continue;", " var p = world.getComponent(id, Position);", " var c = world.getComponent(id, Collider);", " if (p.x + c.width < -40) world.destroyEntity(id);", " }", " }", "}", "", "function aabbOverlap(p1, c1, p2, c2) {", " var ax1 = p1.x + (c1.offsetX || 0), ay1 = p1.y + (c1.offsetY || 0);", " var ax2 = ax1 + c1.width, ay2 = ay1 + c1.height;", " var bx1 = p2.x + (c2.offsetX || 0), by1 = p2.y + (c2.offsetY || 0);", " var bx2 = bx1 + c2.width, by2 = by1 + c2.height;", " return ax1 < bx2 && ax2 > bx1 && ay1 < by2 && ay2 > by1;", "}", "", "class InteractionSystem extends System {", " update(dt) {", " if (playerId == null) return;", " var pPos = world.getComponent(playerId, Position);", " var pCol = world.getComponent(playerId, Collider);", " var pl = world.getComponent(playerId, Player);", " if (!pPos || !pCol || !pl) return;", "", " var dogs = world.getEntitiesWithComponents(Obstacle, Position, Collider);", " for (var i = 0; i < dogs.length; i++) {", " var id = dogs[i];", " var op = world.getComponent(id, Position);", " var oc = world.getComponent(id, Collider);", " if (aabbOverlap(pPos, pCol, op, oc)) {", " if (pl.invuln <= 0) {", " pl.strikes += 1;", " pl.invuln = C.HIT_IFRAME;", " world.destroyEntity(id);", " if (pl.strikes >= C.STRIKES_MAX) {", " endGame('lost');", " }", " }", " }", " }", "", " var treats = world.getEntitiesWithComponents(Collectible, Position, Collider);", " for (var j = 0; j < treats.length; j++) {", " var tid = treats[j];", " var tp = world.getComponent(tid, Position);", " var tc = world.getComponent(tid, Collider);", " if (aabbOverlap(pPos, pCol, tp, tc)) {", " var col = world.getComponent(tid, Collectible);", " pl.score += col.points;", " world.destroyEntity(tid);", " }", " }", " }", "}", "", "class RenderSystem extends System {", " update(dt) {", " var w = canvas.width, h = canvas.height;", " ctx.clearRect(0, 0, w, h);", "", " var grd = ctx.createLinearGradient(0, 0, 0, h);", " grd.addColorStop(0, '#0b1026');", " grd.addColorStop(1, '#0f0f23');", " ctx.fillStyle = grd;", " ctx.fillRect(0, 0, w, h);", "", " ctx.globalAlpha = 0.9;", " for (var i = 0; i < 60; i++) {", " var sx = (i * 137 + (G.distance * 0.08)) % (w + 200) - 100;", " var sy = (i * 53) % 220 + 20;", " ctx.fillStyle = (i % 7 === 0) ? '#00d4ff' : '#ffffff';", " ctx.fillRect(w - sx, sy, 2, 2);", " }", " ctx.globalAlpha = 1;", "", " ctx.fillStyle = '#0a2a2a';", " ctx.fillRect(0, C.GROUND_Y, w, h - C.GROUND_Y);", " ctx.strokeStyle = '#1f6f6f';", " ctx.lineWidth = 2;", " ctx.beginPath();", " ctx.moveTo(0, C.GROUND_Y + 1);", " ctx.lineTo(w, C.GROUND_Y + 1);", " ctx.stroke();", "", " var stripeY = C.GROUND_Y + 40;", " ctx.fillStyle = 'rgba(255,255,255,0.12)';", " for (var s = 0; s < 14; s++) {", " var x = (s * 90 - (G.distance % 90));", " ctx.fillRect(x, stripeY, 40, 6);", " }", "", " var houseScreenX = w - (G.goalDistance - G.distance) + C.HOUSE_MARGIN;", " var houseY = C.GROUND_Y - 120;", " if (houseScreenX < w + 200) {", " ctx.fillStyle = '#16213e';", " ctx.fillRect(houseScreenX, houseY + 40, 140, 80);", " ctx.fillStyle = '#0f3460';", " ctx.beginPath();", " ctx.moveTo(houseScreenX - 10, houseY + 45);", " ctx.lineTo(houseScreenX + 70, houseY);", " ctx.lineTo(houseScreenX + 150, houseY + 45);", " ctx.closePath();", " ctx.fill();", " ctx.fillStyle = '#00d4ff';", " ctx.globalAlpha = 0.25;", " ctx.fillRect(houseScreenX + 58, houseY + 70, 24, 50);", " ctx.globalAlpha = 1;", " ctx.strokeStyle = '#333';", " ctx.lineWidth = 2;", " ctx.strokeRect(houseScreenX, houseY + 40, 140, 80);", " }", "", " var treats = world.getEntitiesWithComponents(Collectible, Position, Collider);", " for (var i2 = 0; i2 < treats.length; i2++) {", " var id2 = treats[i2];", " var p2 = world.getComponent(id2, Position);", " ctx.fillStyle = '#ffd700';", " ctx.beginPath();", " ctx.ellipse(p2.x + 12, p2.y + 9, 12, 7, 0, 0, Math.PI * 2);", " ctx.fill();", " ctx.fillStyle = '#ff6b6b';", " ctx.beginPath();", " ctx.moveTo(p2.x + 2, p2.y + 9);", " ctx.lineTo(p2.x - 6, p2.y + 3);", " ctx.lineTo(p2.x - 6, p2.y + 15);", " ctx.closePath();", " ctx.fill();", " ctx.fillStyle = '#0f0f23';", " ctx.fillRect(p2.x + 18, p2.y + 7, 2, 2);", " }", "", " var dogs = world.getEntitiesWithComponents(Obstacle, Position, Collider);", " for (var d = 0; d < dogs.length; d++) {", " var did = dogs[d];", " var dp = world.getComponent(did, Position);", " ctx.fillStyle = '#ff6b6b';", " ctx.fillRect(dp.x, dp.y + 10, C.DOG_W, C.DOG_H - 10);", " ctx.fillStyle = '#ff8f8f';", " ctx.fillRect(dp.x + 6, dp.y, 18, 18);", " ctx.fillStyle = '#0f3460';", " ctx.fillRect(dp.x + 8, dp.y - 4, 6, 8);", " ctx.fillStyle = '#ffd700';", " ctx.fillRect(dp.x + 24, dp.y + 8, 10, 8);", " ctx.fillStyle = '#0f0f23';", " ctx.fillRect(dp.x + 6, dp.y + 26, 6, 8);", " ctx.fillRect(dp.x + 28, dp.y + 26, 6, 8);", " }", "", " if (playerId != null) {", " var cp = world.getComponent(playerId, Position);", " var pl3 = world.getComponent(playerId, Player);", " var blink = pl3 && pl3.invuln > 0 && (Math.floor((pl3.invuln * 12)) % 2 === 0);", " if (!blink) {", " ctx.strokeStyle = '#00d4ff';", " ctx.lineWidth = 4;", " ctx.beginPath();", " ctx.moveTo(cp.x + 6, cp.y + 20);", " ctx.quadraticCurveTo(cp.x - 10, cp.y + 10, cp.x - 4, cp.y + 2);", " ctx.stroke();", " ctx.fillStyle = '#00d4ff';", " ctx.fillRect(cp.x, cp.y + 10, C.CAT_W, C.CAT_H - 10);", " ctx.fillStyle = '#7de7ff';", " ctx.fillRect(cp.x + 24, cp.y, 18, 18);", " ctx.fillStyle = '#00d4ff';", " ctx.beginPath();", " ctx.moveTo(cp.x + 26, cp.y + 2);", " ctx.lineTo(cp.x + 30, cp.y - 6);", " ctx.lineTo(cp.x + 34, cp.y + 2);", " ctx.closePath();", " ctx.fill();", " ctx.beginPath();", " ctx.moveTo(cp.x + 36, cp.y + 2);", " ctx.lineTo(cp.x + 40, cp.y - 6);", " ctx.lineTo(cp.x + 44, cp.y + 2);", " ctx.closePath();", " ctx.fill();", " ctx.fillStyle = '#0f0f23';", " ctx.fillRect(cp.x + 30, cp.y + 7, 2, 2);", " ctx.fillRect(cp.x + 38, cp.y + 7, 2, 2);", " }", " }", "", " ctx.fillStyle = 'rgba(0,0,0,0.35)';", " ctx.fillRect(10, 10, 280, 56);", " ctx.strokeStyle = '#333';", " ctx.strokeRect(10, 10, 280, 56);", " ctx.fillStyle = '#ffd700';", " ctx.font = 'bold 18px sans-serif';", " var pl2 = (playerId != null) ? world.getComponent(playerId, Player) : null;", " ctx.textAlign = 'left';", " ctx.fillText('Score: ' + (pl2 ? pl2.score : 0), 20, 34);", " ctx.fillStyle = '#00d4ff';", " ctx.font = '14px sans-serif';", " ctx.fillText('Time: ' + G.timeLeft.toFixed(1) + 's', 20, 54);", " ctx.fillStyle = '#ff6b6b';", " ctx.fillText('Strikes: ' + (pl2 ? pl2.strikes : 0) + '/' + C.STRIKES_MAX, 140, 54);", "", " if (G.state === 'ready') {", " ctx.fillStyle = 'rgba(0,0,0,0.55)';", " ctx.fillRect(w/2 - 220, h/2 - 70, 440, 140);", " ctx.strokeStyle = '#00d4ff';", " ctx.strokeRect(w/2 - 220, h/2 - 70, 440, 140);", " ctx.fillStyle = '#00d4ff';", " ctx.font = 'bold 22px sans-serif';", " ctx.textAlign = 'center';", " ctx.fillText('Hold to Jump Higher', w/2, h/2 - 18);", " ctx.fillStyle = '#bbb';", " ctx.font = '16px sans-serif';", " ctx.fillText('Make it to the house before time runs out!', w/2, h/2 + 18);", " ctx.textAlign = 'left';", " } else if (G.state === 'won' || G.state === 'lost') {", " ctx.fillStyle = 'rgba(0,0,0,0.6)';", " ctx.fillRect(w/2 - 200, h/2 - 70, 400, 140);", " ctx.strokeStyle = (G.state === 'won') ? '#2ed573' : '#ff6b6b';", " ctx.strokeRect(w/2 - 200, h/2 - 70, 400, 140);", " ctx.fillStyle = (G.state === 'won') ? '#2ed573' : '#ff6b6b';", " ctx.font = 'bold 28px sans-serif';", " ctx.textAlign = 'center';", " ctx.fillText(G.state === 'won' ? 'You made it home!' : 'Game Over', w/2, h/2 - 16);", " ctx.fillStyle = '#bbb';", " ctx.font = '16px sans-serif';", " ctx.fillText('Press Restart (or Enter) to try again', w/2, h/2 + 20);", " ctx.textAlign = 'left';", " }", " }", "}", "", "class UISystem extends System {", " update(dt) {", " var pl = (playerId != null) ? world.getComponent(playerId, Player) : null;", " var stateLabel = G.state.charAt(0).toUpperCase() + G.state.slice(1);", " document.getElementById('stateVal').textContent = stateLabel;", " document.getElementById('timeVal').textContent = G.timeLeft.toFixed(1) + 's';", " document.getElementById('distVal').textContent = Math.floor(G.distance / 10) + 'm';", " document.getElementById('scoreVal').textContent = pl ? pl.score : 0;", " document.getElementById('strikeVal').textContent = (pl ? pl.strikes : 0) + ' / ' + C.STRIKES_MAX;", " }", "}", "", "document.getElementById('startBtn').addEventListener('click', function() { startGame(); });", "document.getElementById('restartBtn').addEventListener('click', function() { resetGame(); startGame(); });", "", "setupInput();", "resetGame();", "", "world.addSystem(RunnerSystem);", "world.addSystem(PhysicsSystem);", "world.addSystem(InteractionSystem);", "world.addSystem(CleanupSystem);", "world.addSystem(RenderSystem);", "world.addSystem(UISystem);", "})();" ] }