302 lines
5.9 KiB
HTML
302 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Frugg</title>
|
|
<style>
|
|
body { margin: 0; background: #222; overflow: hidden; }
|
|
canvas { display: block; margin: auto; background: #4aa3d8; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<canvas id="game"></canvas>
|
|
|
|
<audio id="jumpSound" src="./burp.mp3" preload="auto"></audio>
|
|
|
|
<script>
|
|
const canvas = document.getElementById("game");
|
|
const ctx = canvas.getContext("2d");
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
|
|
// --- Game state ---
|
|
let frog = { x: 0, y: 0, z: 0 };
|
|
let pads = [];
|
|
let currentPad = 0;
|
|
let charging = false;
|
|
let charge = 0;
|
|
let score = 0;
|
|
|
|
// --- Camera ---
|
|
let camera = { x: 0, y: 0 };
|
|
|
|
// --- Settings (more arc + slower) ---
|
|
const GRAVITY = 0.25;
|
|
const MAX_CHARGE = 25;
|
|
const JUMP_POWER = 0.5; // higher jump
|
|
const HORIZONTAL_SCALE = 0.0010;
|
|
|
|
// --- Sound ---
|
|
const jumpSound = document.getElementById("jumpSound");
|
|
|
|
// --- Create lily pads ---
|
|
function generatePads() {
|
|
pads = [{ x: 0, y: 0 }];
|
|
for (let i = 1; i < 20; i++) {
|
|
pads.push({
|
|
x: pads[i-1].x + (Math.random() * 200 + 150),
|
|
y: pads[i-1].y + (Math.random() * 200 - 100)
|
|
});
|
|
}
|
|
}
|
|
generatePads();
|
|
|
|
// --- Reset frog ---
|
|
function resetFrog() {
|
|
frog.x = pads[currentPad].x;
|
|
frog.y = pads[currentPad].y;
|
|
frog.z = 0;
|
|
|
|
camera.x = frog.x;
|
|
camera.y = frog.y;
|
|
}
|
|
resetFrog();
|
|
|
|
// --- Input ---
|
|
window.addEventListener("keydown", e => {
|
|
if (e.code === "Space") charging = true;
|
|
});
|
|
|
|
window.addEventListener("keyup", e => {
|
|
if (e.code === "Space") {
|
|
charging = false;
|
|
jump();
|
|
}
|
|
});
|
|
|
|
// --- Jump physics ---
|
|
let velocity = { x: 0, y: 0, z: 0 };
|
|
let jumping = false;
|
|
|
|
function jump() {
|
|
if (jumping) return;
|
|
|
|
const next = pads[currentPad + 1];
|
|
if (!next) return;
|
|
|
|
const dx = next.x - frog.x;
|
|
const dy = next.y - frog.y;
|
|
|
|
velocity.x = dx * charge * HORIZONTAL_SCALE;
|
|
velocity.y = dy * charge * HORIZONTAL_SCALE;
|
|
velocity.z = charge * JUMP_POWER;
|
|
|
|
jumping = true;
|
|
charge = 0;
|
|
|
|
// play sound
|
|
jumpSound.currentTime = 0.25;
|
|
jumpSound.play();
|
|
}
|
|
|
|
// --- Update ---
|
|
function update() {
|
|
if (charging) {
|
|
charge += 0.3;
|
|
if (charge > MAX_CHARGE) charge = MAX_CHARGE;
|
|
}
|
|
|
|
if (jumping) {
|
|
frog.x += velocity.x;
|
|
frog.y += velocity.y;
|
|
frog.z += velocity.z;
|
|
|
|
velocity.z -= GRAVITY;
|
|
|
|
if (frog.z <= 0) {
|
|
frog.z = 0;
|
|
jumping = false;
|
|
checkLanding();
|
|
}
|
|
}
|
|
|
|
// smooth camera follow
|
|
camera.x += (pads[currentPad].x - camera.x) * 0.1;
|
|
camera.y += (pads[currentPad].y - camera.y) * 0.1;
|
|
}
|
|
|
|
// --- Landing check ---
|
|
function checkLanding() {
|
|
const next = pads[currentPad + 1];
|
|
if (!next) return;
|
|
|
|
const dist = Math.hypot(frog.x - next.x, frog.y - next.y);
|
|
|
|
if (dist < 40) {
|
|
currentPad++;
|
|
score += 10;
|
|
} else {
|
|
score -= 5;
|
|
}
|
|
|
|
resetFrog();
|
|
}
|
|
|
|
// --- Isometric projection ---
|
|
function iso(x, y, z = 0) {
|
|
const sx = x - camera.x;
|
|
const sy = y - camera.y;
|
|
|
|
return {
|
|
x: canvas.width / 2 + (sx - sy),
|
|
y: canvas.height / 2 + (sx + sy) / 2 - z
|
|
};
|
|
}
|
|
|
|
// --- 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 ---
|
|
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);
|
|
|
|
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);
|
|
ctx.fill();
|
|
|
|
// frog
|
|
ctx.fillStyle = "lime";
|
|
ctx.beginPath();
|
|
ctx.arc(p.x, p.y - 10, 15, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
}
|
|
|
|
// --- Trajectory preview (red dashed, higher arc) ---
|
|
function drawTrajectory() {
|
|
if (!charging || jumping) return;
|
|
|
|
const next = pads[currentPad + 1];
|
|
if (!next) return;
|
|
|
|
const dx = next.x - frog.x;
|
|
const dy = next.y - frog.y;
|
|
|
|
let vx = dx * charge * HORIZONTAL_SCALE;
|
|
let vy = dy * charge * HORIZONTAL_SCALE;
|
|
let vz = charge * JUMP_POWER * 1.3; // boosted arc preview
|
|
|
|
let tx = frog.x;
|
|
let ty = frog.y;
|
|
let tz = frog.z;
|
|
|
|
ctx.strokeStyle = "red";
|
|
ctx.setLineDash([5, 5]);
|
|
ctx.beginPath();
|
|
|
|
for (let i = 0; i < 50; i++) {
|
|
tx += vx;
|
|
ty += vy;
|
|
tz += vz;
|
|
vz -= GRAVITY;
|
|
|
|
if (tz < 0) break;
|
|
|
|
const p = iso(tx, ty, tz);
|
|
ctx.lineTo(p.x, p.y);
|
|
}
|
|
|
|
ctx.stroke();
|
|
ctx.setLineDash([]);
|
|
}
|
|
|
|
// --- Depth sorting ---
|
|
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: "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);
|
|
|
|
// 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();
|
|
|
|
} else if (obj.type === "frog") {
|
|
drawFrog();
|
|
}
|
|
}
|
|
}
|
|
|
|
// --- UI ---
|
|
function drawUI() {
|
|
ctx.fillStyle = "white";
|
|
ctx.font = "20px Arial";
|
|
ctx.fillText("Score: " + score, 20, 30);
|
|
}
|
|
|
|
// --- Main loop ---
|
|
function loop() {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
update();
|
|
drawScene();
|
|
drawTrajectory();
|
|
drawUI();
|
|
|
|
requestAnimationFrame(loop);
|
|
}
|
|
|
|
loop();
|
|
</script>
|
|
</body>
|
|
</html>
|