457 lines
18 KiB
JavaScript
457 lines
18 KiB
JavaScript
(() => {
|
|
const canvas = document.getElementById('canvas');
|
|
const ctx = canvas.getContext('2d');
|
|
const W = canvas.width, H = canvas.height;
|
|
|
|
// DOM
|
|
const overlay = document.getElementById('overlay');
|
|
const startBtnCpu = document.getElementById('start-btn-cpu');
|
|
const startBtnPvp = document.getElementById('start-btn-pvp');
|
|
const hudLevel = document.getElementById('hud-level');
|
|
const hudShield = document.getElementById('hud-shield');
|
|
const hudPScore = document.getElementById('hud-pscore');
|
|
const hudCScore = document.getElementById('hud-cscore');
|
|
const popup = document.getElementById('popup');
|
|
const popupTitle = document.getElementById('popup-title');
|
|
const popupContent = document.getElementById('popup-content');
|
|
const popupSub = document.getElementById('popup-sub');
|
|
const popupBtn = document.getElementById('popup-btn');
|
|
const goalFlash = document.getElementById('goal-flash');
|
|
const flashScore = document.getElementById('flash-score');
|
|
const flashIcon = document.getElementById('flash-icon');
|
|
const flashTitle = document.getElementById('flash-title');
|
|
const flashText = document.getElementById('flash-text');
|
|
|
|
// ─── Game state ───
|
|
let level = 1, playerScore = 0, cpuScore = 0;
|
|
let running = false, paused = false;
|
|
let gameMode = 'cpu'; // 'cpu' or 'pvp'
|
|
|
|
let ballX, ballY, ballVX, ballVY;
|
|
let playerY = H/2 - PADDLE_H/2, cpuY = H/2 - PADDLE_H/2;
|
|
let cpuSpeed = 1.6;
|
|
let coveragePercent = 0, gapTop, gapBottom;
|
|
let keyW = false, keyS = false;
|
|
let keyUp = false, keyDown = false, mouseY = null;
|
|
let particles = [], trails = [];
|
|
let glowPhase = 0;
|
|
|
|
let playerMsgIndex = 0, cpuMsgIndex = 0;
|
|
|
|
// ─── Level config ───
|
|
function getCoverage(lvl) { const v = LEVEL_COVERAGE[lvl]; return v !== undefined ? v : 70; }
|
|
function getCpuSpeed(lvl) { const v = LEVEL_CPU_SPEED[lvl]; return v !== undefined ? v : 3.8; }
|
|
|
|
// ─── Helpers ───
|
|
function calcGap() {
|
|
const openH = H * ((100 - coveragePercent) / 100);
|
|
gapTop = (H - openH) / 2;
|
|
gapBottom = gapTop + openH;
|
|
}
|
|
|
|
function resetBall(dir) {
|
|
ballX = W / 2; ballY = H / 2;
|
|
const angle = (Math.random() * 0.7 - 0.35);
|
|
const speed = BASE_SPEED + level * 0.2;
|
|
ballVX = speed * dir;
|
|
ballVY = speed * Math.sin(angle);
|
|
}
|
|
|
|
function spawnParticles(x, y, color, count) {
|
|
for (let i = 0; i < count; i++) {
|
|
particles.push({ x, y, vx: (Math.random()-.5)*7, vy: (Math.random()-.5)*7, life: 1, decay: 0.02+Math.random()*0.03, r: 2+Math.random()*3, color });
|
|
}
|
|
}
|
|
|
|
function updateHUD() {
|
|
hudLevel.textContent = level;
|
|
hudShield.textContent = Math.round(coveragePercent);
|
|
hudPScore.textContent = playerScore;
|
|
hudCScore.textContent = cpuScore;
|
|
}
|
|
|
|
function startLevel() {
|
|
playerScore = 0; cpuScore = 0;
|
|
coveragePercent = getCoverage(level);
|
|
cpuSpeed = getCpuSpeed(level);
|
|
calcGap(); resetBall(1); updateHUD();
|
|
}
|
|
|
|
// ─── Score a goal ───
|
|
function scoreGoal(isPlayerGoal) {
|
|
if (isPlayerGoal) playerScore++;
|
|
else cpuScore++;
|
|
updateHUD();
|
|
void hudPScore.offsetHeight;
|
|
showGoalFlash(isPlayerGoal);
|
|
}
|
|
|
|
// ─── Goal flash (edu per goal) ───
|
|
function showGoalFlash(isPlayerGoal) {
|
|
paused = true;
|
|
|
|
let msg;
|
|
if (isPlayerGoal) {
|
|
msg = playerGoalMessages[playerMsgIndex % playerGoalMessages.length];
|
|
playerMsgIndex++;
|
|
} else {
|
|
msg = cpuGoalMessages[cpuMsgIndex % cpuGoalMessages.length];
|
|
cpuMsgIndex++;
|
|
}
|
|
|
|
flashScore.textContent = `${playerScore} : ${cpuScore}`;
|
|
flashIcon.textContent = msg.icon;
|
|
flashTitle.textContent = msg.title;
|
|
flashText.innerHTML = msg.text;
|
|
void goalFlash.offsetHeight;
|
|
goalFlash.className = isPlayerGoal ? 'show player-goal' : 'show cpu-goal';
|
|
|
|
function cont(e) {
|
|
if (e && e.type === 'keydown') {
|
|
const k = e.key;
|
|
if (k === 'ArrowUp' || k === 'ArrowDown' || k === 'w' || k === 'W' || k === 's' || k === 'S') return;
|
|
}
|
|
goalFlash.className = '';
|
|
document.removeEventListener('keydown', cont);
|
|
goalFlash.removeEventListener('click', cont);
|
|
if (playerScore >= WIN_SCORE) { advanceLevel(); }
|
|
else if (cpuScore >= WIN_SCORE) { showGameOver(); }
|
|
else { resetBall(isPlayerGoal ? -1 : 1); setTimeout(() => { paused = false; }, BALL_RESUME_DELAY); }
|
|
}
|
|
|
|
setTimeout(() => {
|
|
document.addEventListener('keydown', cont);
|
|
goalFlash.addEventListener('click', cont);
|
|
}, 400);
|
|
}
|
|
|
|
// ─── Popup helper ───
|
|
function showPopup(title, html, sub, btnText, btnClass, onContinue) {
|
|
popupTitle.textContent = title;
|
|
popupContent.innerHTML = html;
|
|
popupSub.textContent = sub || '';
|
|
popupBtn.textContent = btnText;
|
|
popupBtn.className = btnClass || 'game-btn';
|
|
popup.classList.add('show');
|
|
paused = true;
|
|
popupBtn.onclick = () => {
|
|
popup.classList.remove('show');
|
|
paused = false;
|
|
popupBtn.blur();
|
|
if (onContinue) onContinue();
|
|
};
|
|
}
|
|
|
|
// ─── Start screen ───
|
|
function showStartScreen() {
|
|
running = false;
|
|
paused = false;
|
|
level = 1;
|
|
coveragePercent = 0;
|
|
popup.classList.remove('show');
|
|
overlay.classList.remove('hidden');
|
|
}
|
|
|
|
// ─── Level transitions ───
|
|
function advanceLevel() {
|
|
if (level === 1) {
|
|
level = 2;
|
|
showPopup('LEVEL 1 GESCHAFFT!',
|
|
`<div class="edu-card">
|
|
<span class="edu-icon">🛡️</span>
|
|
<div class="edu-title">Verstärkung kommt: Thiola!</div>
|
|
<div class="edu-text">
|
|
Gut gespielt! Doch im nächsten Level wird der Gegner stärker.<br><br>
|
|
Zum Glück bekommst du jetzt Unterstützung von
|
|
<strong class="thl">✦ THIOLA ✦</strong><br><br>
|
|
Thiola-Wände schützen Teile deines Tors und blockieren eingehende Bälle —
|
|
genau wie <strong class="thl">Thiola (Tiopronin)</strong> die Neubildung von Cystinsteinen verhindert.
|
|
</div>
|
|
</div>`,
|
|
'Level 2 — 40% Thiola-Schutz',
|
|
'MIT THIOLA WEITERSPIELEN', 'game-btn thiola',
|
|
() => startLevel()
|
|
);
|
|
} else if (level === 2) {
|
|
level = 3;
|
|
showPopup('LEVEL 2 GESCHAFFT!',
|
|
`<div class="edu-card">
|
|
<span class="edu-icon">💊</span>
|
|
<div class="edu-title">Thiola verstärkt den Schutz!</div>
|
|
<div class="edu-text">
|
|
Der Gegner wird noch aggressiver — aber <strong class="thl">Thiola</strong> auch!<br><br>
|
|
Im finalen Level schützt Thiola <strong>70%</strong> deines Tors.<br>
|
|
<strong>Konsequente Therapie = maximaler Schutz.</strong>
|
|
</div>
|
|
</div>`,
|
|
'Finales Level — 70% Thiola-Schutz',
|
|
'THIOLA-SCHUTZ MAXIMIEREN', 'game-btn thiola',
|
|
() => startLevel()
|
|
);
|
|
} else {
|
|
showFinalScreen();
|
|
}
|
|
}
|
|
|
|
function showFinalScreen() {
|
|
showPopup('🏆 GEWONNEN!',
|
|
`<div class="final-summary">
|
|
<div class="final-title">ALLE 3 LEVEL GEMEISTERT!</div>
|
|
<div class="final-text">
|
|
Du hast erlebt, wie <strong style="color:#55efc4">Thiola</strong> dein Tor Schritt für Schritt geschützt hat —
|
|
genau so schützt <strong style="color:#55efc4">Thiola (Tiopronin)</strong> Cystinurie-Patienten
|
|
vor der Neubildung von Cystinsteinen.
|
|
</div>
|
|
<div class="pathway">
|
|
<span class="step">🔬 Steinanalyse</span>
|
|
<span class="arrow">→</span>
|
|
<span class="step">🎯 Diagnose</span>
|
|
<span class="arrow">→</span>
|
|
<span class="step" style="background:rgba(0,184,148,.2); border-color:rgba(0,184,148,.5)">💊 Thiola</span>
|
|
</div>
|
|
<div class="final-text" style="font-size:10px; color:#aaa; margin-top:6px">
|
|
<strong>Jeder Stein verdient eine Analyse.</strong><br>
|
|
Denn nur wer Cystinsteine erkennt, kann sie gezielt verhindern.
|
|
</div>
|
|
</div>`,
|
|
'', 'NOCHMAL SPIELEN', 'game-btn',
|
|
() => showStartScreen()
|
|
);
|
|
}
|
|
|
|
function showGameOver() {
|
|
showPopup(`LEVEL ${level} VERLOREN`,
|
|
`<div class="edu-card">
|
|
<span class="edu-icon">⚡</span>
|
|
<div class="edu-title">Nicht aufgeben!</div>
|
|
<div class="edu-text">
|
|
Auch bei Cystinurie gilt: <strong>konsequente Therapie</strong> ist der Schlüssel.<br>
|
|
Versuche es erneut — mit <strong class="thl">Thiola</strong> an deiner Seite!
|
|
</div>
|
|
</div>`,
|
|
'Zurück zum Start', 'NOCHMAL VERSUCHEN', 'game-btn',
|
|
() => showStartScreen()
|
|
);
|
|
}
|
|
|
|
// ─── Input ───
|
|
document.addEventListener('keydown', e => {
|
|
if (e.key === 'ArrowUp') keyUp = true;
|
|
if (e.key === 'ArrowDown') keyDown = true;
|
|
if (e.key === 'w' || e.key === 'W') keyW = true;
|
|
if (e.key === 's' || e.key === 'S') keyS = true;
|
|
});
|
|
document.addEventListener('keyup', e => {
|
|
if (e.key === 'ArrowUp') keyUp = false;
|
|
if (e.key === 'ArrowDown') keyDown = false;
|
|
if (e.key === 'w' || e.key === 'W') keyW = false;
|
|
if (e.key === 's' || e.key === 'S') keyS = false;
|
|
});
|
|
document.addEventListener('mousemove', e => {
|
|
const rect = canvas.getBoundingClientRect();
|
|
mouseY = (e.clientY - rect.top) * (H / rect.height);
|
|
});
|
|
|
|
// ─── Update ───
|
|
function update() {
|
|
if (!running || paused) return;
|
|
glowPhase += 0.03;
|
|
|
|
const prevPlayerY = playerY;
|
|
const prevCpuY = cpuY;
|
|
|
|
// Player 1 (left) — PvP: W/S only; CPU mode: mouse OR W/S
|
|
if (gameMode === 'pvp') {
|
|
if (keyW) playerY -= 6;
|
|
if (keyS) playerY += 6;
|
|
} else {
|
|
if (mouseY !== null) {
|
|
playerY += (mouseY - PADDLE_H/2 - playerY) * 0.15;
|
|
} else {
|
|
if (keyUp || keyW) playerY -= 6;
|
|
if (keyDown || keyS) playerY += 6;
|
|
}
|
|
}
|
|
playerY = Math.max(0, Math.min(H - PADDLE_H, playerY));
|
|
|
|
// Player 2 / CPU (right)
|
|
if (gameMode === 'pvp') {
|
|
if (keyUp) cpuY -= 6;
|
|
if (keyDown) cpuY += 6;
|
|
} else {
|
|
const diff = ballY - (cpuY + PADDLE_H/2);
|
|
if (Math.abs(diff) > 10) cpuY += Math.sign(diff) * Math.min(cpuSpeed, Math.abs(diff) * 0.07);
|
|
}
|
|
cpuY = Math.max(0, Math.min(H - PADDLE_H, cpuY));
|
|
|
|
const playerVY = playerY - prevPlayerY;
|
|
const cpuVY = cpuY - prevCpuY;
|
|
|
|
// Ball movement
|
|
ballX += ballVX; ballY += ballVY;
|
|
if (ballY - BALL_R <= 0) { ballY = BALL_R; ballVY = Math.abs(ballVY); }
|
|
if (ballY + BALL_R >= H) { ballY = H - BALL_R; ballVY = -Math.abs(ballVY); }
|
|
trails.push({ x: ballX, y: ballY, life: 1 });
|
|
|
|
// Right (CPU) side
|
|
if (ballX + BALL_R >= W - PADDLE_MARGIN - PADDLE_W) {
|
|
if (ballX + BALL_R <= W - PADDLE_MARGIN + PADDLE_W && ballY >= cpuY && ballY <= cpuY + PADDLE_H) {
|
|
ballVX = -Math.abs(ballVX) * 1.03;
|
|
ballVY += ((ballY - cpuY)/PADDLE_H - 0.5) * 3 + cpuVY * PADDLE_SPIN_FACTOR;
|
|
ballX = W - PADDLE_MARGIN - PADDLE_W - BALL_R;
|
|
spawnParticles(ballX, ballY, '#ff6b35', 8);
|
|
} else if (ballX > W + BALL_R) {
|
|
spawnParticles(W, ballY, '#4ecdc4', 20);
|
|
scoreGoal(true);
|
|
}
|
|
}
|
|
|
|
// Left (Player) side + Thiola wall
|
|
if (ballX - BALL_R <= PADDLE_MARGIN + PADDLE_W) {
|
|
if (ballX - BALL_R >= PADDLE_MARGIN - PADDLE_W && ballY >= playerY && ballY <= playerY + PADDLE_H) {
|
|
ballVX = Math.abs(ballVX) * 1.03;
|
|
ballVY += ((ballY - playerY)/PADDLE_H - 0.5) * 3 + playerVY * PADDLE_SPIN_FACTOR;
|
|
ballX = PADDLE_MARGIN + PADDLE_W + BALL_R;
|
|
spawnParticles(ballX, ballY, '#4ecdc4', 8);
|
|
} else if (ballX - BALL_R <= WALL_WIDTH && coveragePercent > 0) {
|
|
if (ballY < gapTop || ballY > gapBottom) {
|
|
ballVX = Math.abs(ballVX);
|
|
ballX = WALL_WIDTH + BALL_R;
|
|
spawnParticles(WALL_WIDTH, ballY, '#55efc4', 15);
|
|
} else if (ballX - BALL_R <= 0) {
|
|
spawnParticles(0, ballY, '#ff6b35', 20);
|
|
scoreGoal(false);
|
|
}
|
|
} else if (ballX - BALL_R <= 0 && coveragePercent === 0) {
|
|
spawnParticles(0, ballY, '#ff6b35', 20);
|
|
scoreGoal(false);
|
|
}
|
|
}
|
|
|
|
// Clamp speed
|
|
const spd = Math.sqrt(ballVX*ballVX + ballVY*ballVY);
|
|
if (spd > 12) { ballVX = (ballVX/spd)*12; ballVY = (ballVY/spd)*12; }
|
|
|
|
particles = particles.filter(p => { p.x+=p.vx; p.y+=p.vy; p.life-=p.decay; p.vx*=.96; p.vy*=.96; return p.life>0; });
|
|
trails = trails.filter(t => { t.life -= 0.06; return t.life > 0; });
|
|
}
|
|
|
|
// ─── Draw ───
|
|
function draw() {
|
|
ctx.clearRect(0, 0, W, H);
|
|
|
|
// Background grid
|
|
ctx.strokeStyle = 'rgba(255,255,255,.02)'; ctx.lineWidth = 1;
|
|
for (let x = 0; x < W; x += 40) { ctx.beginPath(); ctx.moveTo(x,0); ctx.lineTo(x,H); ctx.stroke(); }
|
|
for (let y = 0; y < H; y += 40) { ctx.beginPath(); ctx.moveTo(0,y); ctx.lineTo(W,y); ctx.stroke(); }
|
|
|
|
// Center line
|
|
ctx.setLineDash([8,12]); ctx.strokeStyle='rgba(255,255,255,.08)'; ctx.lineWidth=2;
|
|
ctx.beginPath(); ctx.moveTo(W/2,0); ctx.lineTo(W/2,H); ctx.stroke(); ctx.setLineDash([]);
|
|
|
|
calcGap();
|
|
|
|
// Thiola walls
|
|
if (coveragePercent > 0) {
|
|
const pa = 0.7 + 0.3 * Math.sin(glowPhase);
|
|
if (gapTop > 0) { drawThiolaWall(0, 0, WALL_WIDTH, gapTop, pa); drawThiolaText(WALL_WIDTH/2, gapTop/2, gapTop); }
|
|
if (gapBottom < H) { drawThiolaWall(0, gapBottom, WALL_WIDTH, H-gapBottom, pa); drawThiolaText(WALL_WIDTH/2, gapBottom+(H-gapBottom)/2, H-gapBottom); }
|
|
ctx.fillStyle='#fff'; ctx.shadowColor='#55efc4'; ctx.shadowBlur=14;
|
|
ctx.fillRect(0, gapTop-3, WALL_WIDTH+6, 3);
|
|
ctx.fillRect(0, gapBottom, WALL_WIDTH+6, 3);
|
|
ctx.shadowBlur=0;
|
|
}
|
|
|
|
// Paddles
|
|
const pG = ctx.createLinearGradient(PADDLE_MARGIN, 0, PADDLE_MARGIN+PADDLE_W, 0);
|
|
pG.addColorStop(0,'#3ab0a5'); pG.addColorStop(1,'#4ecdc4');
|
|
ctx.fillStyle=pG; ctx.shadowColor='#4ecdc4'; ctx.shadowBlur=15;
|
|
roundRect(PADDLE_MARGIN, playerY, PADDLE_W, PADDLE_H, 4); ctx.shadowBlur=0;
|
|
|
|
const cG = ctx.createLinearGradient(W-PADDLE_MARGIN-PADDLE_W, 0, W-PADDLE_MARGIN, 0);
|
|
cG.addColorStop(0,'#e85d2a'); cG.addColorStop(1,'#ff6b35');
|
|
ctx.fillStyle=cG; ctx.shadowColor='#ff6b35'; ctx.shadowBlur=15;
|
|
roundRect(W-PADDLE_MARGIN-PADDLE_W, cpuY, PADDLE_W, PADDLE_H, 4); ctx.shadowBlur=0;
|
|
|
|
// Ball trail
|
|
trails.forEach(t => {
|
|
ctx.beginPath(); ctx.arc(t.x, t.y, BALL_R*t.life*0.6, 0, Math.PI*2);
|
|
ctx.fillStyle=`rgba(255,255,255,${t.life*0.12})`; ctx.fill();
|
|
});
|
|
|
|
// Ball
|
|
ctx.beginPath(); ctx.arc(ballX, ballY, BALL_R, 0, Math.PI*2);
|
|
ctx.fillStyle='#fff'; ctx.shadowColor='#fff'; ctx.shadowBlur=20; ctx.fill(); ctx.shadowBlur=0;
|
|
|
|
// Particles
|
|
particles.forEach(p => {
|
|
ctx.beginPath(); ctx.arc(p.x, p.y, p.r*p.life, 0, Math.PI*2);
|
|
ctx.fillStyle=p.color; ctx.globalAlpha=p.life; ctx.fill(); ctx.globalAlpha=1;
|
|
});
|
|
|
|
// Big score overlay
|
|
ctx.font='72px "Press Start 2P", monospace';
|
|
ctx.textAlign='center'; ctx.textBaseline='middle';
|
|
ctx.fillStyle='rgba(78,205,196,.2)'; ctx.shadowColor='rgba(78,205,196,.08)'; ctx.shadowBlur=30;
|
|
ctx.fillText(playerScore, W*0.3, H/2); ctx.shadowBlur=0;
|
|
ctx.fillStyle='rgba(255,107,53,.2)'; ctx.shadowColor='rgba(255,107,53,.08)'; ctx.shadowBlur=30;
|
|
ctx.fillText(cpuScore, W*0.7, H/2); ctx.shadowBlur=0;
|
|
ctx.textBaseline='alphabetic';
|
|
}
|
|
|
|
function drawThiolaWall(x, y, w, h, pulseAlpha) {
|
|
const g = ctx.createLinearGradient(x, 0, x+w, 0);
|
|
g.addColorStop(0, `rgba(0,184,148,${0.9*pulseAlpha})`);
|
|
g.addColorStop(0.5, `rgba(85,239,196,${0.7*pulseAlpha})`);
|
|
g.addColorStop(1, `rgba(78,205,196,${0.35*pulseAlpha})`);
|
|
ctx.fillStyle=g; ctx.fillRect(x, y, w, h);
|
|
ctx.fillStyle=`rgba(255,255,255,${0.06*pulseAlpha})`; ctx.fillRect(x+w-3, y, 3, h);
|
|
}
|
|
|
|
function drawThiolaText(cx, cy, segH) {
|
|
if (segH < 50) return;
|
|
ctx.save(); ctx.translate(cx, cy); ctx.rotate(-Math.PI/2);
|
|
const fs = Math.min(18, segH * 0.14);
|
|
ctx.font = `900 ${fs}px 'Orbitron', monospace`;
|
|
ctx.textAlign='center'; ctx.textBaseline='middle';
|
|
ctx.fillStyle='rgba(0,0,0,.35)'; ctx.fillText('THIOLA', 1, 1);
|
|
ctx.fillStyle='rgba(255,255,255,.93)'; ctx.shadowColor='rgba(85,239,196,.8)'; ctx.shadowBlur=12;
|
|
ctx.fillText('THIOLA', 0, 0); ctx.shadowBlur=0;
|
|
if (segH > 170) {
|
|
ctx.fillStyle='rgba(255,255,255,.45)';
|
|
const off = segH * 0.3;
|
|
ctx.fillText('THIOLA', -off, 0); ctx.fillText('THIOLA', off, 0);
|
|
}
|
|
ctx.restore();
|
|
}
|
|
|
|
function roundRect(x, y, w, h, r) {
|
|
ctx.beginPath(); ctx.moveTo(x+r, y); ctx.lineTo(x+w-r, y);
|
|
ctx.quadraticCurveTo(x+w, y, x+w, y+r); ctx.lineTo(x+w, y+h-r);
|
|
ctx.quadraticCurveTo(x+w, y+h, x+w-r, y+h); ctx.lineTo(x+r, y+h);
|
|
ctx.quadraticCurveTo(x, y+h, x, y+h-r); ctx.lineTo(x, y+r);
|
|
ctx.quadraticCurveTo(x, y, x+r, y); ctx.closePath(); ctx.fill();
|
|
}
|
|
|
|
// ─── Loop ───
|
|
function loop() { update(); draw(); requestAnimationFrame(loop); }
|
|
|
|
function startGame(mode) {
|
|
gameMode = mode;
|
|
document.getElementById('hud-plabel').textContent = mode === 'pvp' ? 'SP1' : 'SPIELER';
|
|
document.getElementById('hud-clabel').textContent = mode === 'pvp' ? 'SP2' : 'CPU';
|
|
overlay.classList.add('hidden');
|
|
if (document.activeElement && document.activeElement.blur) {
|
|
document.activeElement.blur();
|
|
}
|
|
running = true; level = 1; coveragePercent = 0;
|
|
playerMsgIndex = 0; cpuMsgIndex = 0;
|
|
startLevel();
|
|
}
|
|
|
|
startBtnCpu.addEventListener('click', () => startGame('cpu'));
|
|
startBtnPvp.addEventListener('click', () => startGame('pvp'));
|
|
|
|
calcGap(); resetBall(1); draw(); loop();
|
|
})();
|