Maxi
455 lines
15 KiB
JavaScript
Executable File
455 lines
15 KiB
JavaScript
Executable File
// Wand Spell Tracing & Dueling Mini-Game (Das Zauberspruch-Duell)
|
|
(function() {
|
|
const canvas = document.getElementById('spellCanvas');
|
|
if (!canvas) return;
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
const spellNameEl = document.getElementById('spellName');
|
|
const spellDescEl = document.getElementById('spellDesc');
|
|
const spellProgressEl = document.getElementById('spellProgress');
|
|
const dummyHpEl = document.getElementById('dummyHp');
|
|
const modalBackdrop = document.getElementById('modalBackdrop');
|
|
const modalTitle = document.getElementById('modalTitle');
|
|
const modalText = document.getElementById('modalText');
|
|
const modalBtn = document.getElementById('modalBtn');
|
|
|
|
let width = 700, height = 440;
|
|
function resize() {
|
|
const rect = canvas.getBoundingClientRect();
|
|
width = Math.round(rect.width || canvas.parentElement.clientWidth || 700);
|
|
height = Math.round(Math.min(480, Math.max(280, width * 0.62)));
|
|
canvas.width = width;
|
|
canvas.height = height;
|
|
canvas.style.height = height + 'px';
|
|
setupSpellNodes();
|
|
}
|
|
|
|
// 3 Sequential Spells with distinct gestures
|
|
const SPELLS = [
|
|
{
|
|
id: 'flipendo',
|
|
name: 'Flipendo ⚡',
|
|
incantation: '"Flipendo!" (Ruck-Schockzauber)',
|
|
desc: 'Verbinde die 4 Runensterne im Zickzack-Muster, um den Schockzauber zu entfesseln!',
|
|
color: '#00f2fe',
|
|
beamColor: '#4facfe',
|
|
// Relative coordinates (0 to 1) for responsive scaling
|
|
points: [
|
|
{ x: 0.22, y: 0.28 },
|
|
{ x: 0.52, y: 0.28 },
|
|
{ x: 0.25, y: 0.72 },
|
|
{ x: 0.55, y: 0.72 }
|
|
]
|
|
},
|
|
{
|
|
id: 'incendio',
|
|
name: 'Incendio 🔥',
|
|
incantation: '"Incendio!" (Feuer-Zauber)',
|
|
desc: 'Zeichne das lodernde Flammendreieck, um die Zielattrappe in Brand zu setzen!',
|
|
color: '#ff4500',
|
|
beamColor: '#ff8c00',
|
|
points: [
|
|
{ x: 0.38, y: 0.22 },
|
|
{ x: 0.55, y: 0.74 },
|
|
{ x: 0.22, y: 0.74 },
|
|
{ x: 0.38, y: 0.22 }
|
|
]
|
|
},
|
|
{
|
|
id: 'alohomora',
|
|
name: 'Alohomora 🗝️',
|
|
incantation: '"Alohomora!" (Entriegelungszauber)',
|
|
desc: 'Zeichne die magische Schlüsselloch-Kurve, um das verzauberte Siegel zu sprengen!',
|
|
color: '#ffd700',
|
|
beamColor: '#fff275',
|
|
points: [
|
|
{ x: 0.38, y: 0.25 },
|
|
{ x: 0.48, y: 0.38 },
|
|
{ x: 0.42, y: 0.52 },
|
|
{ x: 0.42, y: 0.78 }
|
|
]
|
|
}
|
|
];
|
|
|
|
let currentSpellIdx = 0;
|
|
let spellNodes = [];
|
|
let nextNodeIdx = 0;
|
|
let isDrawing = false;
|
|
let userPath = [];
|
|
let wandParticles = [];
|
|
let blastParticles = [];
|
|
let dummyShake = 0;
|
|
let spellCastAnim = 0;
|
|
let gameWon = false;
|
|
|
|
function setupSpellNodes() {
|
|
const spell = SPELLS[currentSpellIdx];
|
|
if (!spell) return;
|
|
spellNodes = spell.points.map((pt, idx) => ({
|
|
x: Math.round(pt.x * width),
|
|
y: Math.round(pt.y * height),
|
|
radius: 20,
|
|
hit: idx < nextNodeIdx
|
|
}));
|
|
}
|
|
|
|
window.addEventListener('resize', resize);
|
|
resize();
|
|
|
|
function updateSpellUI() {
|
|
const spell = SPELLS[currentSpellIdx];
|
|
if (!spell) return;
|
|
if (spellNameEl) spellNameEl.innerText = spell.name;
|
|
if (spellDescEl) spellDescEl.innerText = spell.desc;
|
|
if (spellProgressEl) spellProgressEl.innerText = `Zauberspruch ${currentSpellIdx + 1} von ${SPELLS.length}`;
|
|
if (dummyHpEl) dummyHpEl.innerText = `${SPELLS.length - currentSpellIdx} Zauber übrig`;
|
|
setupSpellNodes();
|
|
}
|
|
updateSpellUI();
|
|
|
|
// Touch & Pointer Coordinates
|
|
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)
|
|
};
|
|
}
|
|
|
|
function addWandSpark(x, y, color) {
|
|
for (let i = 0; i < 4; i++) {
|
|
wandParticles.push({
|
|
x: x,
|
|
y: y,
|
|
vx: (Math.random() - 0.5) * 3,
|
|
vy: (Math.random() - 0.5) * 3,
|
|
color: color || '#fff',
|
|
size: Math.random() * 4 + 2,
|
|
alpha: 1.0
|
|
});
|
|
}
|
|
}
|
|
|
|
function handleInputStart(x, y) {
|
|
if (gameWon) return;
|
|
isDrawing = true;
|
|
userPath = [{ x, y }];
|
|
checkNodeHit(x, y);
|
|
}
|
|
|
|
function handleInputMove(x, y) {
|
|
if (!isDrawing || gameWon) return;
|
|
userPath.push({ x, y });
|
|
addWandSpark(x, y, SPELLS[currentSpellIdx].color);
|
|
checkNodeHit(x, y);
|
|
}
|
|
|
|
function handleInputEnd() {
|
|
isDrawing = false;
|
|
// If not all nodes hit, reset progress for this spell
|
|
if (nextNodeIdx < spellNodes.length) {
|
|
nextNodeIdx = 0;
|
|
userPath = [];
|
|
setupSpellNodes();
|
|
}
|
|
}
|
|
|
|
function checkNodeHit(x, y) {
|
|
if (nextNodeIdx >= spellNodes.length) return;
|
|
const targetNode = spellNodes[nextNodeIdx];
|
|
const dist = Math.hypot(x - targetNode.x, y - targetNode.y);
|
|
|
|
// Tolerant hit radius for easy finger play: 36px
|
|
if (dist < 36) {
|
|
targetNode.hit = true;
|
|
nextNodeIdx++;
|
|
if (window.soundFX) window.soundFX.playKeyChime();
|
|
addWandSpark(targetNode.x, targetNode.y, '#ffd700');
|
|
|
|
// All nodes connected for this spell!
|
|
if (nextNodeIdx >= spellNodes.length) {
|
|
castSpellSuccess();
|
|
}
|
|
}
|
|
}
|
|
|
|
// Touch events with touch-action none
|
|
canvas.addEventListener('touchstart', e => {
|
|
e.preventDefault();
|
|
if (e.touches.length > 0) {
|
|
const p = getCanvasCoords(e.touches[0].clientX, e.touches[0].clientY);
|
|
handleInputStart(p.x, p.y);
|
|
}
|
|
}, { passive: false });
|
|
|
|
canvas.addEventListener('touchmove', e => {
|
|
e.preventDefault();
|
|
if (e.touches.length > 0) {
|
|
const p = getCanvasCoords(e.touches[0].clientX, e.touches[0].clientY);
|
|
handleInputMove(p.x, p.y);
|
|
}
|
|
}, { passive: false });
|
|
|
|
canvas.addEventListener('touchend', e => {
|
|
e.preventDefault();
|
|
handleInputEnd();
|
|
}, { passive: false });
|
|
|
|
// Pointer events for desktop
|
|
canvas.addEventListener('pointerdown', e => {
|
|
if (e.pointerType === 'mouse') {
|
|
const p = getCanvasCoords(e.clientX, e.clientY);
|
|
handleInputStart(p.x, p.y);
|
|
}
|
|
});
|
|
|
|
canvas.addEventListener('pointermove', e => {
|
|
if (e.pointerType === 'mouse' && isDrawing) {
|
|
const p = getCanvasCoords(e.clientX, e.clientY);
|
|
handleInputMove(p.x, p.y);
|
|
}
|
|
});
|
|
|
|
canvas.addEventListener('pointerup', () => {
|
|
handleInputEnd();
|
|
});
|
|
|
|
function castSpellSuccess() {
|
|
const spell = SPELLS[currentSpellIdx];
|
|
spellCastAnim = 1.0;
|
|
dummyShake = 18;
|
|
if (window.soundFX) window.soundFX.playMagicSuccess();
|
|
|
|
// Explosion on target dummy
|
|
const dummyX = width * 0.78;
|
|
const dummyY = height * 0.5;
|
|
for (let i = 0; i < 40; i++) {
|
|
const angle = Math.random() * Math.PI * 2;
|
|
const spd = Math.random() * 8 + 3;
|
|
blastParticles.push({
|
|
x: dummyX,
|
|
y: dummyY,
|
|
vx: Math.cos(angle) * spd,
|
|
vy: Math.sin(angle) * spd,
|
|
color: spell.color,
|
|
size: Math.random() * 5 + 3,
|
|
alpha: 1.0
|
|
});
|
|
}
|
|
|
|
setTimeout(() => {
|
|
currentSpellIdx++;
|
|
nextNodeIdx = 0;
|
|
userPath = [];
|
|
|
|
if (currentSpellIdx >= SPELLS.length) {
|
|
gameWon = true;
|
|
onDuelWon();
|
|
} else {
|
|
updateSpellUI();
|
|
}
|
|
}, 800);
|
|
}
|
|
|
|
async function onDuelWon() {
|
|
if (window.soundFX) window.soundFX.playMagicSuccess();
|
|
try {
|
|
const res = await fetch('/api/duel/complete', { method: 'POST' });
|
|
const data = await res.json();
|
|
if (data.new_item && window.notifyNewItem) {
|
|
window.notifyNewItem(data.new_item);
|
|
}
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
|
|
modalTitle.innerText = "⚡ Duell Gemeistert!";
|
|
modalText.innerHTML = `
|
|
Mit meisterhafter Zauberstabführung hast du alle 3 Zaubersprüche entfesselt und die verzauberte Rüstung bezwungen!<br><br>
|
|
<strong>Gelehrte Sprüche:</strong> Flipendo ⚡, Incendio 🔥 & Alohomora 🗝️<br><br>
|
|
Professor Flitwick applaudiert begeistert. Das uralte Schlosstor schwingt auf...
|
|
Dahinter flackern die unheimlichen Flammen von <strong>Snapes Flammenkammer</strong>!<br><br>
|
|
🎒 <em>Das goldene Duellanten-Abzeichen wurde deinem Zauberbeutel hinzugefügt!</em>
|
|
`;
|
|
modalBtn.innerText = "Weiter zu Snapes Flaschenrätsel 🧪";
|
|
modalBtn.onclick = () => { window.location.href = '/bottles'; };
|
|
modalBackdrop.classList.add('show');
|
|
}
|
|
|
|
function render() {
|
|
ctx.clearRect(0, 0, width, height);
|
|
|
|
// Dungeon stone chamber background
|
|
const bgGrad = ctx.createRadialGradient(width * 0.5, height * 0.5, 30, width * 0.5, height * 0.5, width * 0.6);
|
|
bgGrad.addColorStop(0, '#1c172e');
|
|
bgGrad.addColorStop(1, '#0c0a14');
|
|
ctx.fillStyle = bgGrad;
|
|
ctx.fillRect(0, 0, width, height);
|
|
|
|
// Stone floor tiles
|
|
ctx.strokeStyle = '#2d253d';
|
|
ctx.lineWidth = 1;
|
|
for (let y = height * 0.75; y < height; y += 25) {
|
|
ctx.beginPath();
|
|
ctx.moveTo(0, y);
|
|
ctx.lineTo(width, y);
|
|
ctx.stroke();
|
|
}
|
|
|
|
const spell = SPELLS[currentSpellIdx] || SPELLS[SPELLS.length - 1];
|
|
|
|
// Draw Spell Beam if casting
|
|
if (spellCastAnim > 0) {
|
|
ctx.save();
|
|
ctx.strokeStyle = spell.beamColor;
|
|
ctx.lineWidth = 14 * spellCastAnim;
|
|
ctx.shadowColor = spell.color;
|
|
ctx.shadowBlur = 30;
|
|
ctx.beginPath();
|
|
ctx.moveTo(width * 0.45, height * 0.5);
|
|
ctx.lineTo(width * 0.78, height * 0.5);
|
|
ctx.stroke();
|
|
ctx.restore();
|
|
spellCastAnim -= 0.05;
|
|
}
|
|
|
|
// Draw Enchanted Target Dummy (Right side)
|
|
ctx.save();
|
|
const dummyBaseX = width * 0.78 + (dummyShake > 0 ? (Math.random() - 0.5) * dummyShake : 0);
|
|
const dummyBaseY = height * 0.5;
|
|
if (dummyShake > 0) dummyShake *= 0.85;
|
|
|
|
// Dummy wooden post & shield
|
|
ctx.fillStyle = '#4a3319';
|
|
ctx.fillRect(dummyBaseX - 8, dummyBaseY - 60, 16, 120);
|
|
|
|
// Armor Breastplate
|
|
ctx.fillStyle = '#6c757d';
|
|
ctx.strokeStyle = '#e5b948';
|
|
ctx.lineWidth = 3;
|
|
ctx.beginPath();
|
|
ctx.arc(dummyBaseX, dummyBaseY - 10, 32, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
|
|
// Armor Helmet
|
|
ctx.fillStyle = '#495057';
|
|
ctx.beginPath();
|
|
ctx.arc(dummyBaseX, dummyBaseY - 50, 20, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
|
|
// Glowing Rune Shield Aura on Dummy
|
|
ctx.strokeStyle = spell.color;
|
|
ctx.shadowColor = spell.color;
|
|
ctx.shadowBlur = 15;
|
|
ctx.lineWidth = 2;
|
|
ctx.beginPath();
|
|
ctx.arc(dummyBaseX, dummyBaseY - 10, 42 + Math.sin(Date.now() * 0.008) * 4, 0, Math.PI * 2);
|
|
ctx.stroke();
|
|
ctx.restore();
|
|
|
|
// Draw Spell Tracing Guide Lines (Left / Center side)
|
|
if (spellNodes.length > 1 && !gameWon) {
|
|
ctx.save();
|
|
ctx.strokeStyle = 'rgba(255, 255, 255, 0.15)';
|
|
ctx.setLineDash([8, 8]);
|
|
ctx.lineWidth = 3;
|
|
ctx.beginPath();
|
|
ctx.moveTo(spellNodes[0].x, spellNodes[0].y);
|
|
for (let i = 1; i < spellNodes.length; i++) {
|
|
ctx.lineTo(spellNodes[i].x, spellNodes[i].y);
|
|
}
|
|
ctx.stroke();
|
|
ctx.restore();
|
|
}
|
|
|
|
// Draw Player's Drawn Line
|
|
if (userPath.length > 1) {
|
|
ctx.save();
|
|
ctx.strokeStyle = spell.color;
|
|
ctx.lineWidth = 6;
|
|
ctx.lineCap = 'round';
|
|
ctx.lineJoin = 'round';
|
|
ctx.shadowColor = spell.color;
|
|
ctx.shadowBlur = 18;
|
|
ctx.beginPath();
|
|
ctx.moveTo(userPath[0].x, userPath[0].y);
|
|
for (let i = 1; i < userPath.length; i++) {
|
|
ctx.lineTo(userPath[i].x, userPath[i].y);
|
|
}
|
|
ctx.stroke();
|
|
ctx.restore();
|
|
}
|
|
|
|
// Draw Spell Nodes (Rune Stars to connect)
|
|
if (!gameWon) {
|
|
spellNodes.forEach((node, idx) => {
|
|
ctx.save();
|
|
const isNext = (idx === nextNodeIdx);
|
|
const isHit = node.hit;
|
|
|
|
ctx.shadowColor = isHit ? '#2ecc71' : (isNext ? spell.color : '#888');
|
|
ctx.shadowBlur = isNext ? 20 : 8;
|
|
|
|
ctx.fillStyle = isHit ? '#2ecc71' : (isNext ? '#ffffff' : '#332a42');
|
|
ctx.strokeStyle = isNext ? spell.color : '#e5b948';
|
|
ctx.lineWidth = isNext ? 4 : 2;
|
|
|
|
const r = node.radius + (isNext ? Math.sin(Date.now() * 0.01) * 3 : 0);
|
|
ctx.beginPath();
|
|
ctx.arc(node.x, node.y, r, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
|
|
// Number label
|
|
ctx.fillStyle = isHit ? '#000' : (isNext ? '#000' : '#e5b948');
|
|
ctx.font = 'bold 14px sans-serif';
|
|
ctx.textAlign = 'center';
|
|
ctx.textBaseline = 'middle';
|
|
ctx.fillText(idx + 1, node.x, node.y);
|
|
|
|
ctx.restore();
|
|
});
|
|
}
|
|
|
|
// Update & Render Wand Sparks
|
|
for (let i = wandParticles.length - 1; i >= 0; i--) {
|
|
const p = wandParticles[i];
|
|
p.x += p.vx;
|
|
p.y += p.vy;
|
|
p.alpha *= 0.90;
|
|
if (p.alpha <= 0.02) {
|
|
wandParticles.splice(i, 1);
|
|
continue;
|
|
}
|
|
ctx.fillStyle = p.color;
|
|
ctx.globalAlpha = p.alpha;
|
|
ctx.beginPath();
|
|
ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
}
|
|
|
|
// Update & Render Blast Particles
|
|
for (let i = blastParticles.length - 1; i >= 0; i--) {
|
|
const p = blastParticles[i];
|
|
p.x += p.vx;
|
|
p.y += p.vy;
|
|
p.alpha *= 0.92;
|
|
if (p.alpha <= 0.02) {
|
|
blastParticles.splice(i, 1);
|
|
continue;
|
|
}
|
|
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;
|
|
|
|
requestAnimationFrame(render);
|
|
}
|
|
requestAnimationFrame(render);
|
|
})();
|