diff --git a/index.html b/index.html index e2f9b30..c4a72b5 100644 --- a/index.html +++ b/index.html @@ -30,10 +30,10 @@ let score = 0; // --- Camera --- let camera = { x: 0, y: 0 }; -// --- Settings (more arc + slower) --- +// --- YOUR SETTINGS --- const GRAVITY = 0.25; const MAX_CHARGE = 25; -const JUMP_POWER = 0.5; // higher jump +const JUMP_POWER = 0.5; const HORIZONTAL_SCALE = 0.0010; // --- Sound --- @@ -42,7 +42,7 @@ const jumpSound = document.getElementById("jumpSound"); // --- Create lily pads --- function generatePads() { pads = [{ x: 0, y: 0 }]; - for (let i = 1; i < 20; i++) { + for (let i = 1; i < 30; i++) { pads.push({ x: pads[i-1].x + (Math.random() * 200 + 150), y: pads[i-1].y + (Math.random() * 200 - 100) @@ -94,7 +94,7 @@ function jump() { jumping = true; charge = 0; - // play sound + // play sound starting at 0.25s jumpSound.currentTime = 0.25; jumpSound.play(); } @@ -120,7 +120,7 @@ function update() { } } - // smooth camera follow + // camera follow camera.x += (pads[currentPad].x - camera.x) * 0.1; camera.y += (pads[currentPad].y - camera.y) * 0.1; } @@ -153,33 +153,14 @@ function iso(x, y, z = 0) { }; } -// --- Draw lily pads --- -function drawPads() { - for (let i = 0; i < pads.length; i++) { - const p = iso(pads[i].x, pads[i].y); - - // shadow - ctx.fillStyle = "rgba(0,0,0,0.2)"; - ctx.beginPath(); - ctx.ellipse(p.x + 5, p.y + 5, 50, 25, 0, 0, Math.PI * 2); - ctx.fill(); - - // pad - ctx.fillStyle = i === currentPad ? "#2ecc71" : "#27ae60"; - ctx.beginPath(); - ctx.ellipse(p.x, p.y, 50, 25, 0, 0, Math.PI * 2); - ctx.fill(); - } -} - -// --- Draw frog --- +// --- Frog --- function drawFrog() { const base = iso(frog.x, frog.y, 0); const p = iso(frog.x, frog.y, frog.z); - // shadow (shrinks when higher) const scale = Math.max(0.3, 1 - frog.z / 200); + // shadow ctx.fillStyle = "rgba(0,0,0,0.3)"; ctx.beginPath(); ctx.ellipse(base.x, base.y, 15 * scale, 8 * scale, 0, 0, Math.PI * 2); @@ -192,7 +173,7 @@ function drawFrog() { ctx.fill(); } -// --- Trajectory preview (red dashed, higher arc) --- +// --- Trajectory + landing marker --- function drawTrajectory() { if (!charging || jumping) return; @@ -204,59 +185,71 @@ function drawTrajectory() { let vx = dx * charge * HORIZONTAL_SCALE; let vy = dy * charge * HORIZONTAL_SCALE; - let vz = charge * JUMP_POWER * 1.3; // boosted arc preview + let vz = charge * JUMP_POWER; let tx = frog.x; let ty = frog.y; let tz = frog.z; + let steps = 0; + const MAX_STEPS = 400; + ctx.strokeStyle = "red"; - ctx.setLineDash([5, 5]); + ctx.lineWidth = 2; + ctx.setLineDash([6, 6]); ctx.beginPath(); - for (let i = 0; i < 50; i++) { + let lastPoint = null; + + while (tz >= 0 && steps < MAX_STEPS) { tx += vx; ty += vy; tz += vz; vz -= GRAVITY; - if (tz < 0) break; - const p = iso(tx, ty, tz); ctx.lineTo(p.x, p.y); + + lastPoint = { x: tx, y: ty }; + + steps++; } ctx.stroke(); ctx.setLineDash([]); + + // --- Landing marker --- + if (lastPoint) { + const p = iso(lastPoint.x, lastPoint.y, 0); + + ctx.fillStyle = "rgba(255,0,0,0.3)"; + ctx.beginPath(); + ctx.ellipse(p.x, p.y, 25, 12, 0, 0, Math.PI * 2); + ctx.fill(); + + ctx.strokeStyle = "red"; + ctx.beginPath(); + ctx.ellipse(p.x, p.y, 25, 12, 0, 0, Math.PI * 2); + ctx.stroke(); + } } -// --- Depth sorting --- +// --- Depth sorted scene --- function drawScene() { - // Combine pads + frog into one list let objects = []; pads.forEach((pad, i) => { - objects.push({ - type: "pad", - x: pad.x, - y: pad.y, - index: i - }); + objects.push({ type: "pad", x: pad.x, y: pad.y, index: i }); }); - objects.push({ - type: "frog", - x: frog.x, - y: frog.y - }); + objects.push({ type: "frog", x: frog.x, y: frog.y }); - // Sort by depth (important!) objects.sort((a, b) => (a.x + a.y) - (b.x + b.y)); for (let obj of objects) { if (obj.type === "pad") { - const i = obj.index; - const p = iso(pads[i].x, pads[i].y); + const pad = pads[obj.index]; + const p = iso(pad.x, pad.y); // shadow ctx.fillStyle = "rgba(0,0,0,0.2)"; @@ -265,12 +258,12 @@ function drawScene() { ctx.fill(); // pad - ctx.fillStyle = i === currentPad ? "#2ecc71" : "#27ae60"; + ctx.fillStyle = obj.index === currentPad ? "#2ecc71" : "#27ae60"; ctx.beginPath(); ctx.ellipse(p.x, p.y, 50, 25, 0, 0, Math.PI * 2); ctx.fill(); - } else if (obj.type === "frog") { + } else { drawFrog(); } } @@ -283,7 +276,7 @@ function drawUI() { ctx.fillText("Score: " + score, 20, 30); } -// --- Main loop --- +// --- Loop --- function loop() { ctx.clearRect(0, 0, canvas.width, canvas.height);