function createGame({ sdk }) { var W = sdk.W, H = sdk.H; var stack, block, offcuts, cam, t, over; sdk.music({ mood: "chill" }); sdk.bg("grid", { color: "#1b3a6b", base: "#04070f", glow: "#0e2450", speed: 20, horizon: 0.16 }); sdk.tweaks({ swing: { value: 2.0, min: 1.0, max: 4, step: 0.1, label: "Swing speed", desc: "How fast the beam sweeps", group: "Movement" }, fall: { value: 950, min: 500, max: 1500, step: 50, label: "Drop speed", group: "Movement" }, width: { value: 130, min: 80, max: 190, step: 5, label: "Beam width", group: "Movement" }, hue: { kind: "color", value: "#22d3ee", label: "Neon", group: "Look" } }); function top() { return stack[stack.length - 1]; } // The beam ALWAYS starts high on screen and only descends on tap. function newBlock() { block = { x: W / 2, screenY: 120, w: top().w, dropping: false }; } sdk.run({ reset: function () { stack = [{ x: W / 2, y: H - 60, w: sdk.tweak("width") + 40 }]; offcuts = []; cam = 0; t = 0; over = false; block = { x: W / 2, screenY: 140, w: sdk.tweak("width"), dropping: false }; }, update: function (dt, input) { // offcuts keep tumbling for flavor for (var k = offcuts.length - 1; k >= 0; k--) { var o = offcuts[k]; o.vy += 1400 * dt; o.y += o.vy * dt; o.x += o.vx * dt; o.rot += o.vr * dt; if (o.y > H + cam + 120) offcuts.splice(k, 1); } if (over) return; t += dt; var sw = sdk.tweak("swing") + stack.length * 0.04; var tp = top(); // landing line in SCREEN space (top of stack minus cam pan) var landScreenY = tp.y - cam - 26; if (!block.dropping) { // swing horizontally, park safely above the landing line var amp = W / 2 - block.w / 2 - 8; block.x = W / 2 + Math.sin(t * sw) * amp; // clamp resting height to stay well above the stack top if (block.screenY > landScreenY - 120) block.screenY = landScreenY - 120; // ONLY a tap starts the drop — no drop, no score, ever. if (input.tap) { block.dropping = true; sdk.tone("jump"); sdk.haptic(8); } } else { // descend in screen space block.screenY += sdk.tweak("fall") * dt; if (block.screenY >= landScreenY) { var bx = block.x, bw = block.w; var overlap = Math.min(bx + bw / 2, tp.x + tp.w / 2) - Math.max(bx - bw / 2, tp.x - tp.w / 2); // MERCY: first two placements forgive a whiff if (overlap <= 4 && stack.length <= 2) { overlap = bw * 0.6; block.x = tp.x; bx = tp.x; sdk.juice.flash(0.12); } if (overlap <= 4) { over = true; sdk.juice.burst(bx, landScreenY, "#ff5d7d", 26, 260); sdk.juice.shake(12); sdk.juice.flash(0.5); sdk.tone("hit"); sdk.haptic(40); offcuts.push({ x: bx, y: tp.y - 26, w: bw, vx: (bx < tp.x ? -1 : 1) * 120, vy: -40, rot: 0, vr: 6 }); return sdk.gameOver(); } var perfect = Math.abs(bx - tp.x) < 8; var placeW, placeX; if (perfect) { placeW = Math.min(bw + 8, 200); placeX = tp.x; } else { placeW = overlap; placeX = Math.max(bx - bw / 2, tp.x - tp.w / 2) + overlap / 2; var offW = bw - overlap; var offX = bx < tp.x ? (bx - bw / 2 + offW / 2) : (bx + bw / 2 - offW / 2); offcuts.push({ x: offX, y: tp.y - 26, w: offW, vx: (bx < tp.x ? -1 : 1) * 90, vy: -20, rot: 0, vr: (bx < tp.x ? -1 : 1) * 5 }); } stack.push({ x: placeX, y: tp.y - 26, w: placeW }); if (perfect) { sdk.addScore(3); sdk.juice.popup("PERFECT +3", placeX, landScreenY - 34, "#ffd166"); sdk.juice.burst(placeX, landScreenY, "#ffd166", 16, 200); sdk.juice.shake(3); sdk.tone("pickup"); sdk.haptic(14); } else { sdk.addScore(1); sdk.juice.popup("+1", placeX, landScreenY - 30, sdk.tweak("hue")); sdk.juice.burst(placeX, landScreenY, sdk.tweak("hue"), 8, 150); sdk.tone("score"); } // pan camera so the growing tower rides near the lower third cam = Math.max(0, (stack.length - 5) * 26); newBlock(); } } }, draw: function (c) { var neon = sdk.tweak("hue"); c.save(); c.translate(0, -0); // draw stack in world->screen via cam offset // tumbling offcuts (world coords -> screen) for (var k = 0; k < offcuts.length; k++) { var o = offcuts[k]; c.save(); c.translate(o.x, o.y - cam); c.rotate(o.rot); c.fillStyle = "#3a5a8f"; c.globalAlpha = 0.8; sdk.roundRect(c, -o.w / 2, -13, o.w, 26, 5); c.restore(); } // tower (world coords -> screen: subtract cam) for (var i = 0; i < stack.length; i++) { var s = stack[i]; var sy = s.y - cam; var lit = i === stack.length - 1; c.save(); c.shadowColor = neon; c.shadowBlur = lit ? 20 : 10; c.fillStyle = i % 2 ? "#1e6fb0" : "#2ea8e0"; sdk.roundRect(c, s.x - s.w / 2, sy, s.w, 24, 6); c.restore(); c.fillStyle = "rgba(220,245,255,0.35)"; for (var wx = s.x - s.w / 2 + 8; wx < s.x + s.w / 2 - 6; wx += 16) { c.fillRect(wx, sy + 7, 5, 10); } } // swinging / falling beam — already in screen coords (block.screenY) if (!over) { c.save(); c.shadowColor = neon; c.shadowBlur = 22; c.fillStyle = neon; sdk.roundRect(c, block.x - block.w / 2, block.screenY, block.w, 24, 6); c.restore(); if (!block.dropping) { c.strokeStyle = "rgba(255,255,255,0.25)"; c.lineWidth = 1; c.beginPath(); c.moveTo(block.x, 0); c.lineTo(block.x, block.screenY); c.stroke(); } } c.restore(); c.font = "14px system-ui"; c.textAlign = "left"; c.fillStyle = "#8fb4d6"; c.fillText("floors " + (stack.length - 1), 12, 30); } }); }

Neon Stacker

0 comments