Maxi
566 lines
19 KiB
JavaScript
Executable File
566 lines
19 KiB
JavaScript
Executable File
// Broomstick Flight: Golden Ring Course (Quidditch-Flugtraining) - Mobile & Touch Optimized
|
|
(function() {
|
|
const canvas = document.getElementById('broomCanvas');
|
|
if (!canvas) return;
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
// UI elements
|
|
const scoreVal = document.getElementById('scoreVal');
|
|
const timerVal = document.getElementById('timerVal');
|
|
const ringsVal = document.getElementById('ringsVal');
|
|
const comboVal = document.getElementById('comboVal');
|
|
const statusMsg = document.getElementById('statusMsg');
|
|
const modalBackdrop = document.getElementById('modalBackdrop');
|
|
const modalTitle = document.getElementById('modalTitle');
|
|
const modalText = document.getElementById('modalText');
|
|
const modalBtn = document.getElementById('modalBtn');
|
|
|
|
let width = 800, height = 460;
|
|
function resize() {
|
|
const rect = canvas.getBoundingClientRect();
|
|
width = Math.round(rect.width || canvas.parentElement.clientWidth || 800);
|
|
height = Math.round(Math.min(500, Math.max(280, width * 0.56)));
|
|
canvas.width = width;
|
|
canvas.height = height;
|
|
canvas.style.height = height + 'px';
|
|
}
|
|
|
|
// Game Configuration
|
|
const TOTAL_RINGS_NEEDED = 12;
|
|
let gameRunning = false; // Does not start automatically!
|
|
let startTime = Date.now();
|
|
let score = 0;
|
|
let ringsCollected = 0;
|
|
let combo = 0;
|
|
|
|
window.startFlight = function() {
|
|
const overlay = document.getElementById('broomStartOverlay');
|
|
if (overlay) {
|
|
overlay.classList.add('hidden');
|
|
overlay.style.display = 'none';
|
|
}
|
|
|
|
rings.length = 0;
|
|
rings.push({ x: width + 60, y: height * 0.4, radius: 25, speed: 3.5, golden: false, collected: false, scale: 1, alpha: 1, pulse: 0 });
|
|
rings.push({ x: width + 290, y: height * 0.65, radius: 25, speed: 3.6, golden: true, collected: false, scale: 1, alpha: 1, pulse: 0 });
|
|
rings.push({ x: width + 530, y: height * 0.3, radius: 25, speed: 3.7, golden: false, collected: false, scale: 1, alpha: 1, pulse: 0 });
|
|
|
|
score = 0;
|
|
ringsCollected = 0;
|
|
combo = 0;
|
|
if (scoreVal) scoreVal.innerText = score;
|
|
if (ringsVal) ringsVal.innerText = `0/${TOTAL_RINGS_NEEDED}`;
|
|
if (comboVal) comboVal.innerText = '';
|
|
|
|
startTime = Date.now();
|
|
lastRingSpawn = Date.now();
|
|
gameRunning = true;
|
|
|
|
if (window.soundFX) window.soundFX.playWhoosh();
|
|
if (window.navigator && window.navigator.vibrate) window.navigator.vibrate(40);
|
|
};
|
|
|
|
// Explicitly bind click and pointerdown to start button for instant mobile activation
|
|
const startFlightBtn = document.getElementById('startFlightBtn');
|
|
if (startFlightBtn) {
|
|
const onStartTrigger = (e) => {
|
|
if (e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
}
|
|
window.startFlight();
|
|
};
|
|
startFlightBtn.addEventListener('click', onStartTrigger);
|
|
startFlightBtn.addEventListener('pointerdown', onStartTrigger);
|
|
}
|
|
|
|
// Player (Broomstick)
|
|
const player = {
|
|
x: 90,
|
|
y: 220,
|
|
targetY: 220,
|
|
targetX: 90,
|
|
vx: 0,
|
|
vy: 0,
|
|
speed: 6.5,
|
|
boost: 1.0,
|
|
angle: 0,
|
|
trail: []
|
|
};
|
|
|
|
// Flying Golden Rings
|
|
const rings = [];
|
|
let lastRingSpawn = Date.now();
|
|
|
|
function spawnRing() {
|
|
// Rings glide from right to left
|
|
const ringY = Math.random() * (height - 120) + 60;
|
|
const isGoldenBonus = Math.random() > 0.75;
|
|
rings.push({
|
|
x: width + 40,
|
|
y: ringY,
|
|
radius: isGoldenBonus ? 28 : 24,
|
|
speed: (Math.random() * 1.5 + 3.2),
|
|
golden: isGoldenBonus,
|
|
collected: false,
|
|
scale: 1.0,
|
|
alpha: 1.0,
|
|
pulse: 0
|
|
});
|
|
}
|
|
|
|
// Sparkles & Confetti particles
|
|
const particles = [];
|
|
function spawnSparkles(x, y, color) {
|
|
for (let i = 0; i < 18; i++) {
|
|
const angle = Math.random() * Math.PI * 2;
|
|
const spd = Math.random() * 5 + 2;
|
|
particles.push({
|
|
x: x,
|
|
y: y,
|
|
vx: Math.cos(angle) * spd,
|
|
vy: Math.sin(angle) * spd,
|
|
color: color || '#ffd700',
|
|
size: Math.random() * 4 + 2,
|
|
alpha: 1.0
|
|
});
|
|
}
|
|
}
|
|
|
|
// Initialize Canvas
|
|
window.addEventListener('resize', resize);
|
|
resize();
|
|
|
|
// Controls: Keyboard
|
|
const keysDown = {};
|
|
window.addEventListener('keydown', e => {
|
|
keysDown[e.key.toLowerCase()] = true;
|
|
if (e.key === ' ' || e.key === 'Shift') {
|
|
player.boost = 1.7;
|
|
if (window.soundFX) window.soundFX.playWhoosh();
|
|
}
|
|
});
|
|
window.addEventListener('keyup', e => {
|
|
keysDown[e.key.toLowerCase()] = false;
|
|
if (e.key === ' ' || e.key === 'Shift') player.boost = 1.0;
|
|
});
|
|
|
|
// Touch & Pointer Direct Steering (Smooth Follow-Touch)
|
|
let touchSteering = false;
|
|
|
|
function getCanvasCoords(clientX, clientY) {
|
|
const rect = canvas.getBoundingClientRect();
|
|
return {
|
|
x: (clientX - rect.left) * (canvas.width / rect.width),
|
|
y: (clientY - rect.top) * (canvas.height / rect.height)
|
|
};
|
|
}
|
|
|
|
canvas.addEventListener('touchstart', e => {
|
|
e.preventDefault();
|
|
touchSteering = true;
|
|
if (e.touches.length > 0) {
|
|
const coords = getCanvasCoords(e.touches[0].clientX, e.touches[0].clientY);
|
|
player.targetX = coords.x;
|
|
player.targetY = coords.y;
|
|
player.boost = 1.4;
|
|
if (window.soundFX) window.soundFX.playWhoosh();
|
|
}
|
|
}, { passive: false });
|
|
|
|
canvas.addEventListener('touchmove', e => {
|
|
e.preventDefault();
|
|
if (e.touches.length > 0) {
|
|
const coords = getCanvasCoords(e.touches[0].clientX, e.touches[0].clientY);
|
|
player.targetX = coords.x;
|
|
player.targetY = coords.y;
|
|
}
|
|
}, { passive: false });
|
|
|
|
canvas.addEventListener('touchend', e => {
|
|
e.preventDefault();
|
|
touchSteering = false;
|
|
player.boost = 1.0;
|
|
}, { passive: false });
|
|
|
|
canvas.addEventListener('touchcancel', () => {
|
|
touchSteering = false;
|
|
player.boost = 1.0;
|
|
});
|
|
|
|
// Pointer events for Desktop Mouse
|
|
canvas.addEventListener('pointerdown', e => {
|
|
if (e.pointerType === 'mouse') {
|
|
touchSteering = true;
|
|
const coords = getCanvasCoords(e.clientX, e.clientY);
|
|
player.targetX = coords.x;
|
|
player.targetY = coords.y;
|
|
player.boost = 1.5;
|
|
if (window.soundFX) window.soundFX.playWhoosh();
|
|
}
|
|
});
|
|
canvas.addEventListener('pointermove', e => {
|
|
if (touchSteering) {
|
|
const coords = getCanvasCoords(e.clientX, e.clientY);
|
|
player.targetX = coords.x;
|
|
player.targetY = coords.y;
|
|
}
|
|
});
|
|
canvas.addEventListener('pointerup', () => {
|
|
touchSteering = false;
|
|
player.boost = 1.0;
|
|
});
|
|
|
|
// Mobile D-Pad Buttons
|
|
function bindDpad(btnId, keyName) {
|
|
const btn = document.getElementById(btnId);
|
|
if (!btn) return;
|
|
const start = (e) => { e.preventDefault(); keysDown[keyName] = true; };
|
|
const end = (e) => { e.preventDefault(); keysDown[keyName] = false; };
|
|
btn.addEventListener('touchstart', start, { passive: false });
|
|
btn.addEventListener('touchend', end, { passive: false });
|
|
btn.addEventListener('pointerdown', start);
|
|
btn.addEventListener('pointerup', end);
|
|
btn.addEventListener('pointerleave', end);
|
|
}
|
|
|
|
bindDpad('mBtnUp', 'arrowup');
|
|
bindDpad('mBtnDown', 'arrowdown');
|
|
bindDpad('mBtnLeft', 'arrowleft');
|
|
bindDpad('mBtnRight', 'arrowright');
|
|
|
|
const btnBoost = document.getElementById('mBtnBoost');
|
|
if (btnBoost) {
|
|
const startBoost = (e) => {
|
|
e.preventDefault();
|
|
player.boost = 1.8;
|
|
if (window.soundFX) window.soundFX.playWhoosh();
|
|
};
|
|
const endBoost = (e) => {
|
|
e.preventDefault();
|
|
player.boost = 1.0;
|
|
};
|
|
btnBoost.addEventListener('touchstart', startBoost, { passive: false });
|
|
btnBoost.addEventListener('touchend', endBoost, { passive: false });
|
|
btnBoost.addEventListener('pointerdown', startBoost);
|
|
btnBoost.addEventListener('pointerup', endBoost);
|
|
btnBoost.addEventListener('pointerleave', endBoost);
|
|
}
|
|
|
|
function update() {
|
|
if (!gameRunning) {
|
|
// Idle gentle float before start
|
|
player.y = (height * 0.5) + Math.sin(Date.now() * 0.003) * 8;
|
|
player.angle = Math.sin(Date.now() * 0.003) * 0.04;
|
|
return;
|
|
}
|
|
|
|
const elapsedSec = Math.floor((Date.now() - startTime) / 1000);
|
|
if (timerVal) timerVal.innerText = elapsedSec + 's';
|
|
|
|
// Spawn new rings continuously
|
|
if (Date.now() - lastRingSpawn > 1400) {
|
|
spawnRing();
|
|
lastRingSpawn = Date.now();
|
|
}
|
|
|
|
// Steer player
|
|
let ax = 0, ay = 0;
|
|
if (keysDown['arrowup'] || keysDown['w']) ay -= 1;
|
|
if (keysDown['arrowdown'] || keysDown['s']) ay += 1;
|
|
if (keysDown['arrowleft'] || keysDown['a']) ax -= 1;
|
|
if (keysDown['arrowright'] || keysDown['d']) ax += 1;
|
|
|
|
if (touchSteering) {
|
|
const dx = player.targetX - player.x;
|
|
const dy = player.targetY - player.y;
|
|
const dist = Math.hypot(dx, dy);
|
|
if (dist > 8) {
|
|
ax = dx / dist;
|
|
ay = dy / dist;
|
|
}
|
|
}
|
|
|
|
const curSpeed = player.speed * player.boost;
|
|
player.vx = player.vx * 0.82 + ax * curSpeed * 0.24;
|
|
player.vy = player.vy * 0.82 + ay * curSpeed * 0.24;
|
|
|
|
player.x += player.vx;
|
|
player.y += player.vy;
|
|
|
|
// Keep inside bounds
|
|
player.x = Math.max(35, Math.min(width - 55, player.x));
|
|
player.y = Math.max(30, Math.min(height - 35, player.y));
|
|
|
|
player.angle = Math.atan2(player.vy, player.vx + 3) * 0.5;
|
|
|
|
// Particle trail from broom tail
|
|
player.trail.push({ x: player.x - 24, y: player.y, alpha: 1, size: Math.random() * 4 + 2 });
|
|
if (player.trail.length > 20) player.trail.shift();
|
|
player.trail.forEach(p => { p.alpha *= 0.88; p.x -= 2; });
|
|
|
|
// Update rings
|
|
for (let i = rings.length - 1; i >= 0; i--) {
|
|
const r = rings[i];
|
|
r.x -= r.speed * (player.boost > 1.2 ? 1.4 : 1.0);
|
|
r.pulse += 0.08;
|
|
|
|
if (!r.collected) {
|
|
// Check if player flew through ring
|
|
const dist = Math.hypot(player.x - r.x, player.y - r.y);
|
|
if (dist < r.radius + 18) {
|
|
r.collected = true;
|
|
ringsCollected++;
|
|
combo++;
|
|
const ringPts = (r.golden ? 300 : 150) * Math.min(4, combo);
|
|
score += ringPts;
|
|
|
|
if (scoreVal) scoreVal.innerText = score;
|
|
if (ringsVal) ringsVal.innerText = `${ringsCollected}/${TOTAL_RINGS_NEEDED}`;
|
|
if (comboVal) comboVal.innerText = combo > 1 ? `x${combo} Combo!` : '';
|
|
|
|
if (window.soundFX) window.soundFX.playKeyChime();
|
|
spawnSparkles(r.x, r.y, r.golden ? '#ffd700' : '#00ffff');
|
|
|
|
// Check Course Win
|
|
if (ringsCollected >= TOTAL_RINGS_NEEDED) {
|
|
gameRunning = false;
|
|
onCourseWin(elapsedSec);
|
|
}
|
|
}
|
|
} else {
|
|
// Animation after collection
|
|
r.scale += 0.08;
|
|
r.alpha -= 0.08;
|
|
if (r.alpha <= 0) {
|
|
rings.splice(i, 1);
|
|
continue;
|
|
}
|
|
}
|
|
|
|
// Remove rings that flew past screen
|
|
if (r.x < -60) {
|
|
if (!r.collected) {
|
|
combo = 0; // Combo reset on miss
|
|
if (comboVal) comboVal.innerText = '';
|
|
}
|
|
rings.splice(i, 1);
|
|
}
|
|
}
|
|
|
|
// Update sparkles
|
|
for (let i = particles.length - 1; i >= 0; i--) {
|
|
const p = particles[i];
|
|
p.x += p.vx;
|
|
p.y += p.vy;
|
|
p.alpha *= 0.92;
|
|
if (p.alpha <= 0.02) {
|
|
particles.splice(i, 1);
|
|
}
|
|
}
|
|
}
|
|
|
|
function render() {
|
|
ctx.clearRect(0, 0, width, height);
|
|
|
|
// Night sky gradient with Hogwarts towers silhouettes
|
|
const skyGrad = ctx.createLinearGradient(0, 0, 0, height);
|
|
skyGrad.addColorStop(0, '#0c0b17');
|
|
skyGrad.addColorStop(1, '#1b142e');
|
|
ctx.fillStyle = skyGrad;
|
|
ctx.fillRect(0, 0, width, height);
|
|
|
|
// Stars
|
|
ctx.fillStyle = 'rgba(255, 255, 255, 0.6)';
|
|
for (let i = 0; i < 25; i++) {
|
|
const sx = (i * 37 + (Date.now() * 0.02)) % width;
|
|
const sy = (i * 53) % (height * 0.65);
|
|
ctx.fillRect(sx, sy, 1.5, 1.5);
|
|
}
|
|
|
|
// Hogwarts distant castle spires in background
|
|
ctx.fillStyle = 'rgba(15, 12, 25, 0.85)';
|
|
ctx.beginPath();
|
|
ctx.moveTo(0, height);
|
|
ctx.lineTo(80, height - 90);
|
|
ctx.lineTo(120, height - 160);
|
|
ctx.lineTo(160, height - 90);
|
|
ctx.lineTo(240, height - 120);
|
|
ctx.lineTo(310, height - 190);
|
|
ctx.lineTo(380, height - 100);
|
|
ctx.lineTo(460, height - 140);
|
|
ctx.lineTo(550, height - 80);
|
|
ctx.lineTo(650, height - 180);
|
|
ctx.lineTo(750, height - 110);
|
|
ctx.lineTo(width, height - 90);
|
|
ctx.lineTo(width, height);
|
|
ctx.closePath();
|
|
ctx.fill();
|
|
|
|
// Sparkle trail behind broom
|
|
player.trail.forEach(p => {
|
|
ctx.fillStyle = `rgba(229, 185, 72, ${p.alpha})`;
|
|
ctx.beginPath();
|
|
ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
});
|
|
|
|
// Touch steer indicator
|
|
if (touchSteering && gameRunning) {
|
|
ctx.strokeStyle = 'rgba(229, 185, 72, 0.45)';
|
|
ctx.lineWidth = 2;
|
|
ctx.beginPath();
|
|
ctx.arc(player.targetX, player.targetY, 22 + Math.sin(Date.now() * 0.01) * 3, 0, Math.PI * 2);
|
|
ctx.stroke();
|
|
}
|
|
|
|
// Render Golden Rings
|
|
rings.forEach(r => {
|
|
ctx.save();
|
|
ctx.translate(r.x, r.y);
|
|
ctx.scale(r.scale, r.scale);
|
|
ctx.globalAlpha = r.alpha;
|
|
|
|
// Outer golden glow
|
|
ctx.shadowColor = r.golden ? '#ffd700' : '#4cc9f0';
|
|
ctx.shadowBlur = r.golden ? 18 : 12;
|
|
|
|
// Ring Outer Circle
|
|
ctx.strokeStyle = r.golden ? '#ffd700' : '#7209b7';
|
|
ctx.lineWidth = r.golden ? 5 : 4;
|
|
ctx.beginPath();
|
|
ctx.arc(0, 0, r.radius, 0, Math.PI * 2);
|
|
ctx.stroke();
|
|
|
|
// Inner Ring Highlights
|
|
ctx.strokeStyle = r.golden ? '#fff275' : '#4895ef';
|
|
ctx.lineWidth = 2;
|
|
ctx.beginPath();
|
|
ctx.arc(0, 0, r.radius - 3, 0, Math.PI * 2);
|
|
ctx.stroke();
|
|
|
|
// Ring Mount / Pole at bottom
|
|
ctx.fillStyle = '#6b5338';
|
|
ctx.fillRect(-2, r.radius, 4, 30);
|
|
|
|
ctx.restore();
|
|
});
|
|
ctx.shadowBlur = 0;
|
|
|
|
// Render Sparkles
|
|
particles.forEach(p => {
|
|
ctx.fillStyle = p.color;
|
|
ctx.globalAlpha = p.alpha;
|
|
ctx.beginPath();
|
|
ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
});
|
|
ctx.globalAlpha = 1.0;
|
|
|
|
// Player (Broom & Wizard)
|
|
ctx.save();
|
|
ctx.translate(player.x, player.y);
|
|
ctx.rotate(player.angle);
|
|
|
|
// Broomstick handle
|
|
ctx.strokeStyle = '#5a3d1b';
|
|
ctx.lineWidth = 5;
|
|
ctx.beginPath();
|
|
ctx.moveTo(-35, 2);
|
|
ctx.lineTo(30, -2);
|
|
ctx.stroke();
|
|
|
|
// Broom twigs
|
|
ctx.fillStyle = '#8a6229';
|
|
ctx.beginPath();
|
|
ctx.moveTo(-35, 2);
|
|
ctx.lineTo(-55, -8);
|
|
ctx.lineTo(-58, 12);
|
|
ctx.closePath();
|
|
ctx.fill();
|
|
|
|
// Wizard silhouette (Cloak & Hat)
|
|
ctx.fillStyle = '#1c172a';
|
|
ctx.beginPath();
|
|
ctx.arc(5, -12, 7, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
// Hat
|
|
ctx.fillStyle = '#120e1e';
|
|
ctx.beginPath();
|
|
ctx.moveTo(-4, -13);
|
|
ctx.lineTo(14, -13);
|
|
ctx.lineTo(2, -26);
|
|
ctx.closePath();
|
|
ctx.fill();
|
|
// Gryffindor / House cloak fluttering
|
|
ctx.fillStyle = '#800e13';
|
|
ctx.beginPath();
|
|
ctx.moveTo(0, -6);
|
|
ctx.lineTo(-20, -10 + Math.sin(Date.now() * 0.012) * 3);
|
|
ctx.lineTo(-24, 6);
|
|
ctx.lineTo(10, 0);
|
|
ctx.closePath();
|
|
ctx.fill();
|
|
|
|
// Wand tip spark
|
|
ctx.fillStyle = '#ffff99';
|
|
ctx.shadowColor = '#ffff00';
|
|
ctx.shadowBlur = 12;
|
|
ctx.beginPath();
|
|
ctx.arc(24, -8, 3.5, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
ctx.shadowBlur = 0;
|
|
|
|
ctx.restore();
|
|
}
|
|
|
|
function loop() {
|
|
update();
|
|
render();
|
|
requestAnimationFrame(loop);
|
|
}
|
|
requestAnimationFrame(loop);
|
|
|
|
async function onCourseWin(elapsedSec) {
|
|
let newItem = null;
|
|
try {
|
|
const res = await fetch('/api/broom/complete', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ score: score, time_taken: elapsedSec })
|
|
});
|
|
const data = await res.json();
|
|
if (data.new_item) newItem = data.new_item;
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
|
|
if (!newItem) {
|
|
newItem = {
|
|
id: "winged_key",
|
|
name: "Geflügelter Schlüssel",
|
|
icon: "🗝️",
|
|
desc: "Ein surrender Schlüssel mit Libellenflügeln. Er öffnet die Tür zur Duellier-Kammer!"
|
|
};
|
|
}
|
|
|
|
if (window.showChamberVictory) {
|
|
window.showChamberVictory({
|
|
chamberBadge: "Kammer I: Ring-Flug",
|
|
title: "🏆 Ring-Parcours Gemeistert!",
|
|
statsHtml: `<span>⏱️ Flugzeit: <strong>${elapsedSec}s</strong></span><span>✨ Punkte: <strong>${score} Pkt</strong></span><span>⭕ Ringe: <strong>${TOTAL_RINGS_NEEDED}/${TOTAL_RINGS_NEEDED}</strong></span>`,
|
|
item: newItem,
|
|
storyText: "Mit einem meisterhaften Sturzflug fängst du den surrenden <strong>geflügelten Schlüssel</strong>! Madam Hoochs Silberpfeife ertönt anerkennend über dem Schloss. Die massive Eichentür zur verzauberten <strong>Duellier-Kammer</strong> öffnet sich!",
|
|
nextUrl: "/duel",
|
|
nextBtnText: "➔ Weiter zu Kammer II: Spruch-Duell 🪄"
|
|
});
|
|
} else {
|
|
modalTitle.innerText = "🏆 Ring-Parcours Gemeistert!";
|
|
modalText.innerHTML = `Mit atemberaubenden Manövern hast du alle <strong>${TOTAL_RINGS_NEEDED} goldenen Ringe</strong> durchflogen!<br>Flugzeit: ${elapsedSec}s · Punkte: ${score}`;
|
|
modalBtn.innerText = "Weiter zum Zauberspruch-Duell 🪄";
|
|
modalBtn.onclick = () => { window.location.href = '/duel'; };
|
|
modalBackdrop.classList.add('show');
|
|
}
|
|
}
|
|
})();
|