{ "format": { "id": "hatchplayjs-game", "version": 2 }, "meta": { "title": "Dragon Candies", "subtitle": "Tap to flap, grab sweets, dodge the cave teeth", "badge": "ECS", "description": "Flap through a cave as a dragon, collect candies for points, and avoid rocks—3 strikes and you’re out." }, "canvas": { "width": 480, "height": 360 }, "config": { "PLAYER_X": 120, "PLAYER_R": 16, "GRAVITY": 900, "FLAP_VY": -320, "MAX_FALL": 520, "SCROLL_SPEED": 165, "ROCK_W": 56, "GAP_H": 140, "SPAWN_EVERY": 1.1, "CANDY_CHANCE": 0.85, "CANDY_R": 10, "CANDY_POINTS": 10, "HIT_COOLDOWN": 0.65, "MAX_STRIKES": 3 }, "componentTypes": { "Player": ["alive"], "Rock": ["kind"], "Candy": ["points"], "Scroll": ["vx"], "CircleCollider": ["r"], "RockShape": ["w", "h"], "Lifetime": ["t"] }, "game": { "bestScore": 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; cursor:pointer; }", ".panel { background:#16213e; border:1px solid #333; border-radius:8px; padding:16px; width:240px; }", ".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; }", ".hint { color:#888; font-size:0.85em; line-height:1.35; margin-top:10px; }", ".strikeRow { display:flex; justify-content:space-between; align-items:center; padding:6px 0; }", ".strikes { display:flex; gap:6px; }", ".strikeDot { width:12px; height:12px; border-radius:50%; border:1px solid #555; background:#0f0f23; }", ".strikeDot.on { background:#ff4757; border-color:#ff4757; box-shadow:0 0 10px rgba(255,71,87,0.35); }", "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; }", ".overlay { position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,0.55); z-index:50; }", ".overlay.show { display:flex; }", ".card { width:min(520px, calc(100% - 24px)); background:#16213e; border:1px solid #333; border-radius:10px; padding:16px; }", ".card h2 { margin:0 0 8px 0; color:#00d4ff; }", ".card p { margin:6px 0; color:#ddd; }", ".row { display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }", ".row button { flex:1; min-width:160px; margin-top:0; }", "@media (max-width:900px) { .game-area { flex-direction:column; align-items:center; } .panel { width:100%; max-width:520px; } canvas { order:-1; } }" ], "panel": [ "

", "

Flight Log

", "

Score0

", "

Best0

", "

Strikes", " ", " ", " ", " ", " ", "

", "

Tap/click the canvas to flap. Collect candies (+10). Hit rocks or leave the screen = strike.

", " ", " ", "

", "

Dragon Candies

", "

Tap to flap and collect candies. Avoid rocks. 3 strikes ends the run.

", "

Score: 0 Best: 0

", "

", " ", " ", "

", "

" ] }, "script": [ "(function() {", "var H = window.HPJ, engine = H.engine, world = H.world, ctx = H.ctx, canvas = H.canvas, C = H.config;", "", "var score = 0;", "var strikes = 0;", "var running = false;", "var gameOver = false;", "var playerId = null;", "var spawnT = 0;", "var hitCooldown = 0;", "var flapQueued = false;", "var bgT = 0;", "", "var ui = {", " scoreVal: document.getElementById('scoreVal'),", " bestVal: document.getElementById('bestVal'),", " s1: document.getElementById('s1'),", " s2: document.getElementById('s2'),", " s3: document.getElementById('s3'),", " startBtn: document.getElementById('startBtn'),", " restartBtn: document.getElementById('restartBtn'),", " overlay: document.getElementById('overlay'),", " ovTitle: document.getElementById('ovTitle'),", " ovText: document.getElementById('ovText'),", " ovScore: document.getElementById('ovScore'),", " ovBest: document.getElementById('ovBest'),", " ovPlayBtn: document.getElementById('ovPlayBtn'),", " ovCloseBtn: document.getElementById('ovCloseBtn')", "};", "", "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.alive = true; } }", "class Rock extends Component { constructor(kind) { super(); this.kind = kind || 'rock'; } }", "class Candy extends Component { constructor(points) { super(); this.points = points || C.CANDY_POINTS; } }", "class Scroll extends Component { constructor(vx) { super(); this.vx = vx || -C.SCROLL_SPEED; } }", "class CircleCollider extends Component { constructor(r) { super(); this.r = r || 10; } }", "class RockShape extends Component { constructor(w, h) { super(); this.w = w; this.h = h; } }", "class Lifetime extends Component { constructor(t) { super(); this.t = t || 3; } }", "", "function resetWorld() {", " var all = world.entityManager.getAllEntities();", " for (var i = 0; i < all.length; i++) world.destroyEntity(all[i]);", " playerId = null;", "}", "", "function createPlayer() {", " var id = world.createEntity();", " world.addComponent(id, new Position(C.PLAYER_X, canvas.height * 0.5));", " world.addComponent(id, new Velocity(0, 0));", " world.addComponent(id, new CircleCollider(C.PLAYER_R));", " world.addComponent(id, new Player());", " world.addComponent(id, new Tag('player'));", " return id;", "}", "", "function createRock(x, y, w, h) {", " var id = world.createEntity();", " world.addComponent(id, new Position(x, y));", " world.addComponent(id, new Rock('rock'));", " world.addComponent(id, new RockShape(w, h));", " world.addComponent(id, new Scroll(-C.SCROLL_SPEED));", " world.addComponent(id, new Tag('rock'));", " return id;", "}", "", "function createCandy(x, y) {", " var id = world.createEntity();", " world.addComponent(id, new Position(x, y));", " world.addComponent(id, new Candy(C.CANDY_POINTS));", " world.addComponent(id, new CircleCollider(C.CANDY_R));", " world.addComponent(id, new Scroll(-C.SCROLL_SPEED));", " world.addComponent(id, new Tag('candy'));", " return id;", "}", "", "function spawnCavePair() {", " var w = C.ROCK_W;", " var gap = C.GAP_H;", " var margin = 26;", " var minTop = 18;", " var maxTop = canvas.height - gap - margin;", " var topH = Math.floor(rand(minTop, maxTop));", " var bottomY = topH + gap;", " var bottomH = canvas.height - bottomY;", " var x = canvas.width + 20;", "", " createRock(x, 0, w, topH);", " createRock(x, bottomY, w, bottomH);", "", " if (Math.random() < C.CANDY_CHANCE) {", " var cy = clamp(topH + gap * rand(0.25, 0.75), 30, canvas.height - 30);", " createCandy(x + w * 0.5, cy);", " }", "}", "", "function setOverlay(show, title, text) {", " ui.overlay.className = show ? 'overlay show' : 'overlay';", " if (title) ui.ovTitle.textContent = title;", " if (text) ui.ovText.textContent = text;", " ui.ovScore.textContent = String(score);", " ui.ovBest.textContent = String(H.game.bestScore || 0);", "}", "", "function updateStrikeDots() {", " ui.s1.className = strikes >= 1 ? 'strikeDot on' : 'strikeDot';", " ui.s2.className = strikes >= 2 ? 'strikeDot on' : 'strikeDot';", " ui.s3.className = strikes >= 3 ? 'strikeDot on' : 'strikeDot';", "}", "", "function startRun() {", " resetWorld();", " score = 0;", " strikes = 0;", " spawnT = 0;", " hitCooldown = 0;", " flapQueued = false;", " running = true;", " gameOver = false;", " playerId = createPlayer();", " setOverlay(false);", " ui.startBtn.style.display = 'none';", " ui.restartBtn.style.display = 'inline-block';", " HPJ.track('game_start');", "}", "", "function endRun(outcome) {", " if (gameOver) return;", " gameOver = true;", " running = false;", " if (score > (H.game.bestScore || 0)) H.game.bestScore = score;", " HPJ.track('game_over', { outcome: outcome, score: score });", " setOverlay(true, 'Game Over', 'Three strikes. Tap Play to try again.');", "}", "", "function addStrike(reason) {", " if (!running) return;", " if (hitCooldown > 0) return;", " strikes += 1;", " hitCooldown = C.HIT_COOLDOWN;", " if (strikes >= C.MAX_STRIKES) {", " endRun('lose');", " }", "}", "", "function getCanvasPos(e) {", " var t = e.touches ? (e.touches[0] || e.changedTouches[0]) : e;", " var rect = canvas.getBoundingClientRect();", " return {", " x: (t.clientX - rect.left) * (canvas.width / rect.width),", " y: (t.clientY - rect.top) * (canvas.height / rect.height)", " };", "}", "", "function onPointerDown(e) {", " if (!running) return;", " flapQueued = true;", "}", "", "canvas.addEventListener('mousedown', function(e) { onPointerDown(e); });", "canvas.addEventListener('touchstart', function(e) { e.preventDefault(); onPointerDown(e); }, { passive: false });", "canvas.addEventListener('touchmove', function(e) { e.preventDefault(); }, { passive: false });", "canvas.addEventListener('touchend', function(e) { e.preventDefault(); }, { passive: false });", "", "ui.startBtn.addEventListener('click', function() {", " setOverlay(true, 'Dragon Candies', 'Tap to flap. Collect candies. Avoid rocks. 3 strikes ends the run.');", "});", "ui.restartBtn.addEventListener('click', function() { startRun(); });", "ui.ovPlayBtn.addEventListener('click', function() { startRun(); });", "ui.ovCloseBtn.addEventListener('click', function() { setOverlay(false); });", "", "setOverlay(true, 'Dragon Candies', 'Tap to flap. Collect candies. Avoid rocks. 3 strikes ends the run.');", "", "function circleRectHit(cx, cy, cr, 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) <= cr * cr;", "}", "", "class SpawnerSystem extends System {", " update(dt) {", " if (!running) return;", " spawnT += dt;", " if (spawnT >= C.SPAWN_EVERY) {", " spawnT -= C.SPAWN_EVERY;", " spawnCavePair();", " }", " }", "}", "", "class PlayerPhysicsSystem extends System {", " update(dt) {", " if (!running) return;", " if (playerId == null) return;", "", " var p = world.getComponent(playerId, Position);", " var v = world.getComponent(playerId, Velocity);", " if (!p || !v) return;", "", " if (flapQueued) {", " v.vy = C.FLAP_VY;", " flapQueued = false;", " }", "", " v.vy = Math.min(v.vy + C.GRAVITY * dt, C.MAX_FALL);", " p.y += v.vy * dt;", "", " if (p.y < -C.PLAYER_R || p.y > canvas.height + C.PLAYER_R) {", " addStrike('out');", " p.y = clamp(p.y, C.PLAYER_R, canvas.height - C.PLAYER_R);", " v.vy = 0;", " }", "", " if (hitCooldown > 0) hitCooldown = Math.max(0, hitCooldown - dt);", " }", "}", "", "class ScrollSystem extends System {", " update(dt) {", " if (!running) return;", " var ents = world.getEntitiesWithComponents(Position, Scroll);", " for (var i = 0; i < ents.length; i++) {", " var id = ents[i];", " var pos = world.getComponent(id, Position);", " var sc = world.getComponent(id, Scroll);", " pos.x += sc.vx * dt;", "", " var isRock = world.hasComponent(id, RockShape);", " if (isRock) {", " var rs = world.getComponent(id, RockShape);", " if (pos.x + rs.w < -40) world.destroyEntity(id);", " } else {", " var cc = world.getComponent(id, CircleCollider);", " var r = cc ? cc.r : 10;", " if (pos.x + r < -40) world.destroyEntity(id);", " }", " }", " }", "}", "", "class CollisionAndScoreSystem extends System {", " update(dt) {", " if (!running) return;", " if (playerId == null) return;", " var pp = world.getComponent(playerId, Position);", " var pc = world.getComponent(playerId, CircleCollider);", " if (!pp || !pc) return;", "", " var rocks = world.getEntitiesWithComponents(RockShape, Position, Tag);", " for (var i = 0; i < rocks.length; i++) {", " var rp = world.getComponent(rocks[i], Position);", " var rs = world.getComponent(rocks[i], RockShape);", " if (circleRectHit(pp.x, pp.y, pc.r, rp.x, rp.y, rs.w, rs.h)) {", " addStrike('rock');", " break;", " }", " }", "", " var candies = world.getEntitiesWithComponents(Candy, Position, CircleCollider);", " for (var j = candies.length - 1; j >= 0; j--) {", " var cid = candies[j];", " var cp = world.getComponent(cid, Position);", " var cc = world.getComponent(cid, CircleCollider);", " var dx = pp.x - cp.x, dy = pp.y - cp.y;", " var rr = pc.r + cc.r + 6;", " if (dx * dx + dy * dy <= rr * rr) {", " score += world.getComponent(cid, Candy).points;", " world.destroyEntity(cid);", " HPJ.track('candy_collected', { score: score });", " }", " }", " }", "}", "", "function drawRock(x, y, w, h, top) {", " ctx.save();", " ctx.translate(x, y);", " var grad = ctx.createLinearGradient(0, 0, w, 0);", " grad.addColorStop(0, '#2b2f3a');", " grad.addColorStop(0.5, '#4a4f5c');", " grad.addColorStop(1, '#232733');", " ctx.fillStyle = grad;", " ctx.strokeStyle = '#11131a';", " ctx.lineWidth = 2;", "", " ctx.beginPath();", " if (top) {", " ctx.moveTo(0, 0);", " ctx.lineTo(w, 0);", " ctx.lineTo(w, h);", " ctx.lineTo(w * 0.75, h - 14);", " ctx.lineTo(w * 0.5, h);", " ctx.lineTo(w * 0.25, h - 10);", " ctx.lineTo(0, h);", " } else {", " ctx.moveTo(0, 0);", " ctx.lineTo(w * 0.25, 10);", " ctx.lineTo(w * 0.5, 0);", " ctx.lineTo(w * 0.75, 14);", " ctx.lineTo(w, 0);", " ctx.lineTo(w, h);", " ctx.lineTo(0, h);", " }", " ctx.closePath();", " ctx.fill();", " ctx.stroke();", "", " ctx.globalAlpha = 0.25;", " ctx.fillStyle = '#0f0f23';", " for (var i = 0; i < 5; i++) {", " var sx = rand(6, w - 16);", " var sy = rand(6, h - 16);", " ctx.fillRect(sx, sy, rand(6, 12), rand(3, 8));", " }", " ctx.restore();", "}", "", "function drawCandy(x, y, r) {", " ctx.save();", " ctx.translate(x, y);", " ctx.fillStyle = '#ffd700';", " ctx.beginPath();", " ctx.arc(0, 0, r, 0, Math.PI * 2);", " ctx.fill();", " ctx.strokeStyle = '#b08a00';", " ctx.lineWidth = 2;", " ctx.stroke();", " ctx.fillStyle = '#fff';", " ctx.globalAlpha = 0.35;", " ctx.beginPath();", " ctx.arc(-r * 0.25, -r * 0.25, r * 0.35, 0, Math.PI * 2);", " ctx.fill();", " ctx.globalAlpha = 1;", " ctx.strokeStyle = '#ff6b6b';", " ctx.lineWidth = 2;", " ctx.beginPath();", " ctx.arc(0, 0, r * 0.55, 0.2, Math.PI * 1.8);", " ctx.stroke();", " ctx.restore();", "}", "", "function drawDragon(x, y, r, vy) {", " ctx.save();", " ctx.translate(x, y);", " var bob = Math.sin(bgT * 8) * 1.5;", " ctx.rotate(clamp(vy / 600, -0.35, 0.35));", "", " ctx.fillStyle = '#2ed573';", " ctx.strokeStyle = '#0b3d2a';", " ctx.lineWidth = 2;", "", " ctx.beginPath();", " ctx.ellipse(0, bob, r * 1.15, r * 0.9, 0, 0, Math.PI * 2);", " ctx.fill();", " ctx.stroke();", "", " ctx.fillStyle = '#21b85f';", " ctx.beginPath();", " ctx.ellipse(-r * 0.6, bob + r * 0.1, r * 0.55, r * 0.45, 0, 0, Math.PI * 2);", " ctx.fill();", "", " var flap = 0.6 + 0.4 * Math.sin(bgT * 12);", " ctx.fillStyle = '#00d4ff';", " ctx.globalAlpha = 0.85;", " ctx.beginPath();", " ctx.moveTo(-r * 0.1, bob);", " ctx.quadraticCurveTo(-r * 1.2, bob - r * 1.1 * flap, -r * 1.0, bob + r * 0.1);", " ctx.quadraticCurveTo(-r * 0.6, bob + r * 0.2, -r * 0.1, bob);", " ctx.closePath();", " ctx.fill();", " ctx.globalAlpha = 1;", "", " ctx.fillStyle = '#fff';", " ctx.beginPath();", " ctx.arc(r * 0.35, bob - r * 0.2, r * 0.22, 0, Math.PI * 2);", " ctx.fill();", " ctx.fillStyle = '#0f0f23';", " ctx.beginPath();", " ctx.arc(r * 0.42, bob - r * 0.2, r * 0.1, 0, Math.PI * 2);", " ctx.fill();", "", " if (hitCooldown > 0) {", " ctx.globalAlpha = 0.35;", " ctx.strokeStyle = '#ff4757';", " ctx.lineWidth = 3;", " ctx.beginPath();", " ctx.arc(0, bob, r * 1.45, 0, Math.PI * 2);", " ctx.stroke();", " ctx.globalAlpha = 1;", " }", "", " ctx.restore();", "}", "", "class RenderSystem extends System {", " update(dt) {", " bgT += dt;", "", " ctx.fillStyle = '#0f0f23';", " ctx.fillRect(0, 0, canvas.width, canvas.height);", "", " var stars = 28;", " for (var i = 0; i < stars; i++) {", " var sx = (i * 97 + Math.floor(bgT * 40)) % canvas.width;", " var sy = (i * 53) % canvas.height;", " ctx.globalAlpha = 0.15;", " ctx.fillStyle = '#ffffff';", " ctx.fillRect(canvas.width - sx, sy, 2, 2);", " }", " ctx.globalAlpha = 1;", "", " var rocks = world.getEntitiesWithComponents(RockShape, Position, Tag);", " for (var r = 0; r < rocks.length; r++) {", " var rp = world.getComponent(rocks[r], Position);", " var rs = world.getComponent(rocks[r], RockShape);", " var top = rp.y === 0;", " drawRock(rp.x, rp.y, rs.w, rs.h, top);", " }", "", " var candies = world.getEntitiesWithComponents(Candy, Position, CircleCollider);", " for (var c = 0; c < candies.length; c++) {", " var cp = world.getComponent(candies[c], Position);", " var cc = world.getComponent(candies[c], CircleCollider);", " drawCandy(cp.x, cp.y, cc.r);", " }", "", " if (playerId != null) {", " var pp = world.getComponent(playerId, Position);", " var pv = world.getComponent(playerId, Velocity);", " if (pp && pv) drawDragon(pp.x, pp.y, C.PLAYER_R, pv.vy);", " }", "", " ctx.fillStyle = '#ffd700';", " ctx.font = 'bold 18px sans-serif';", " ctx.textAlign = 'left';", " ctx.fillText('' + score, 10, 24);", " }", "}", "", "class UISystem extends System {", " update(dt) {", " ui.scoreVal.textContent = String(score);", " ui.bestVal.textContent = String(H.game.bestScore || 0);", " updateStrikeDots();", " if (gameOver) {", " ui.ovScore.textContent = String(score);", " ui.ovBest.textContent = String(H.game.bestScore || 0);", " }", " }", "}", "", "world.addSystem(SpawnerSystem);", "world.addSystem(PlayerPhysicsSystem);", "world.addSystem(ScrollSystem);", "world.addSystem(CollisionAndScoreSystem);", "world.addSystem(RenderSystem);", "world.addSystem(UISystem);", "})();" ] }