lol burp
This commit is contained in:
103
index.html
103
index.html
@ -2,7 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Frugger</title>
|
||||
<title>Frugg</title>
|
||||
<style>
|
||||
body { margin: 0; background: #222; overflow: hidden; }
|
||||
canvas { display: block; margin: auto; background: #4aa3d8; }
|
||||
@ -11,6 +11,8 @@
|
||||
<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");
|
||||
@ -28,11 +30,14 @@ let score = 0;
|
||||
// --- Camera ---
|
||||
let camera = { x: 0, y: 0 };
|
||||
|
||||
// --- Settings (adjusted) ---
|
||||
const GRAVITY = 0.3; // lower gravity = slower fall
|
||||
const MAX_CHARGE = 20;
|
||||
const JUMP_POWER = 0.8; // higher arc
|
||||
const HORIZONTAL_SCALE = 0.012; // slower forward movement
|
||||
// --- 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() {
|
||||
@ -52,7 +57,6 @@ function resetFrog() {
|
||||
frog.y = pads[currentPad].y;
|
||||
frog.z = 0;
|
||||
|
||||
// center camera on current pad
|
||||
camera.x = frog.x;
|
||||
camera.y = frog.y;
|
||||
}
|
||||
@ -89,6 +93,10 @@ function jump() {
|
||||
|
||||
jumping = true;
|
||||
charge = 0;
|
||||
|
||||
// play sound
|
||||
jumpSound.currentTime = 0.25;
|
||||
jumpSound.play();
|
||||
}
|
||||
|
||||
// --- Update ---
|
||||
@ -108,7 +116,6 @@ function update() {
|
||||
if (frog.z <= 0) {
|
||||
frog.z = 0;
|
||||
jumping = false;
|
||||
|
||||
checkLanding();
|
||||
}
|
||||
}
|
||||
@ -135,7 +142,7 @@ function checkLanding() {
|
||||
resetFrog();
|
||||
}
|
||||
|
||||
// --- Isometric projection with camera ---
|
||||
// --- Isometric projection ---
|
||||
function iso(x, y, z = 0) {
|
||||
const sx = x - camera.x;
|
||||
const sy = y - camera.y;
|
||||
@ -151,6 +158,13 @@ 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);
|
||||
@ -160,15 +174,25 @@ function drawPads() {
|
||||
|
||||
// --- 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 ---
|
||||
// --- Trajectory preview (red dashed, higher arc) ---
|
||||
function drawTrajectory() {
|
||||
if (!charging || jumping) return;
|
||||
|
||||
@ -180,16 +204,17 @@ function drawTrajectory() {
|
||||
|
||||
let vx = dx * charge * HORIZONTAL_SCALE;
|
||||
let vy = dy * charge * HORIZONTAL_SCALE;
|
||||
let vz = charge * JUMP_POWER;
|
||||
let vz = charge * JUMP_POWER * 1.3; // boosted arc preview
|
||||
|
||||
let tx = frog.x;
|
||||
let ty = frog.y;
|
||||
let tz = frog.z;
|
||||
|
||||
ctx.strokeStyle = "rgba(255,255,255,0.5)";
|
||||
ctx.strokeStyle = "red";
|
||||
ctx.setLineDash([5, 5]);
|
||||
ctx.beginPath();
|
||||
|
||||
for (let i = 0; i < 40; i++) {
|
||||
for (let i = 0; i < 50; i++) {
|
||||
tx += vx;
|
||||
ty += vy;
|
||||
tz += vz;
|
||||
@ -202,9 +227,56 @@ function drawTrajectory() {
|
||||
}
|
||||
|
||||
ctx.stroke();
|
||||
ctx.setLineDash([]);
|
||||
}
|
||||
|
||||
// --- Draw score ---
|
||||
// --- 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";
|
||||
@ -216,9 +288,8 @@ function loop() {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
update();
|
||||
drawPads();
|
||||
drawScene();
|
||||
drawTrajectory();
|
||||
drawFrog();
|
||||
drawUI();
|
||||
|
||||
requestAnimationFrame(loop);
|
||||
|
||||
Reference in New Issue
Block a user