This commit is contained in:
2026-05-03 22:52:16 +02:00
parent 53acafaa88
commit 5c82e6727b

View File

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