bdnugget/frugg
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update important documentation

Browse Source
This commit is contained in:
bdnugget
2026-05-03 22:42:49 +02:00
parent 2d33810f83
commit 53acafaa88
2 changed files with 6 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
README.md
View File

@ -1 +1,6 @@
TODO: Add frog like loud burping on jump # Frugg
Isometric frog jump to lilypad game, vibecoded and inspired by Vtech camera built-in game
## TODO
[X] Add frog like loud burping on jump
[ ] Make fg look like frog

215
old.index.html
View File

@ -1,215 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Frog Jump Game</title>
<style>
body { margin: 0; background: #222; overflow: hidden; }
canvas { display: block; margin: auto; background: #4aa3d8; }
</style>
</head>
<body>
<canvas id="game"></canvas>
<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;
// --- Settings ---
const GRAVITY = 0.5;
const MAX_CHARGE = 20;
const JUMP_POWER = 0.5;
// --- Create lily pads ---
function generatePads() {
pads = [{ x: 0, y: 0 }];
for (let i = 1; i < 10; 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;
}
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 * 0.02;
velocity.y = dy * charge * 0.02;
velocity.z = charge * JUMP_POWER;
jumping = true;
charge = 0;
}
// --- 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();
}
}
}
// --- 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) {
return {
x: canvas.width / 2 + (x - y),
y: canvas.height / 2 + (x + y) / 2 - z
};
}
// --- Draw lily pads ---
function drawPads() {
for (let i = 0; i < pads.length; i++) {
const p = iso(pads[i].x, pads[i].y);
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 p = iso(frog.x, frog.y, frog.z);
ctx.fillStyle = "lime";
ctx.beginPath();
ctx.arc(p.x, p.y - 10, 15, 0, Math.PI * 2);
ctx.fill();
}
// --- Trajectory preview ---
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 * 0.02;
let vy = dy * charge * 0.02;
let vz = charge * JUMP_POWER;
let tx = frog.x;
let ty = frog.y;
let tz = frog.z;
ctx.strokeStyle = "rgba(255,255,255,0.5)";
ctx.beginPath();
for (let i = 0; i < 30; 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();
}
// --- Draw score ---
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();
drawPads();
drawTrajectory();
drawFrog();
drawUI();
requestAnimationFrame(loop);
}
loop();
</script>
</body>
</html>