const canvas = document.getElementById("game"); const ctx = canvas.getContext("2d"); const scoreEl = document.getElementById("score"); const timeEl = document.getElementById("time"); const closeEl = document.getElementById("close"); const bestEl = document.getElementById("best"); const phaseEl = document.getElementById("phase"); const startOverlay = document.getElementById("startOverlay"); const gameOverOverlay = document.getElementById("gameOverOverlay"); const finalScore = document.getElementById("finalScore"); const finalTime = document.getElementById("finalTime"); const finalClose = document.getElementById("finalClose"); const bestLine = document.getElementById("bestLine"); let W = 0; let H = 0; let dpr = 1; function resize() { dpr = Math.min(window.devicePixelRatio || 1, 2); W = window.innerWidth; H = window.innerHeight; canvas.width = Math.round(W * dpr); canvas.height = Math.round(H * dpr); canvas.style.width = W + "px"; canvas.style.height = H + "px"; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); } window.addEventListener("resize", resize); resize(); /* ------------------------------ INPUT ------------------------------ */ const keys = new Set(); window.addEventListener( "keydown", (e) => { keys.add(e.key.toLowerCase()); if ( ["arrowup", "arrowdown", "arrowleft", "arrowright", " "].includes( e.key.toLowerCase() ) ) { e.preventDefault(); } }, { passive: false } ); window.addEventListener("keyup", (e) => { keys.delete(e.key.toLowerCase()); }); const pointer = { x: W / 2, y: H / 2, active: false }; function pointerSet(e) { const rect = canvas.getBoundingClientRect(); pointer.x = e.clientX - rect.left; pointer.y = e.clientY - rect.top; pointer.active = true; } canvas.addEventListener("pointermove", (e) => { pointerSet(e); }); canvas.addEventListener("pointerdown", (e) => { pointerSet(e); }); canvas.addEventListener("pointerleave", () => { pointer.active = false; }); canvas.addEventListener("pointerup", (e) => { if (e.pointerType !== "mouse") { pointer.active = false; } }); /* ------------------------------ GAME STATE ------------------------------ */ let running = false; let last = 0; let elapsed = 0; let score = 0; let closeCalls = 0; let lastClose = 0; let hazards = []; let particles = []; let shockwaves = []; let spawnClock = 0; let laserClock = 0; let phaseIndex = -1; let best = Number(localStorage.getItem("dtr_best") || 0); bestEl.textContent = best.toLocaleString(); const player = { x: W / 2, y: H / 2, r: 10, speed: 375, vx: 0, vy: 0 }; const phases = [ { t: 0, name: "STAY ALIVE" }, { t: 8, name: "RED MOVES FASTER" }, { t: 18, name: "RED CHASES" }, { t: 30, name: "LASERS" }, { t: 45, name: "NO SAFE CORNERS" }, { t: 60, name: "PANIC MODE" } ]; /* ------------------------------ UTILITIES ------------------------------ */ function rand(a, b) { return Math.random() * (b - a) + a; } function clamp(value, min, max) { return Math.max(min, Math.min(max, value)); } function dist(ax, ay, bx, by) { return Math.hypot(ax - bx, ay - by); } /* ------------------------------ RESET ------------------------------ */ function reset() { elapsed = 0; score = 0; closeCalls = 0; lastClose = 0; hazards = []; particles = []; shockwaves = []; spawnClock = 0; laserClock = 0; phaseIndex = -1; player.x = W / 2; player.y = H / 2; player.vx = 0; player.vy = 0; pointer.active = false; for (let i = 0; i < 4; i++) { spawnHazard(true); } updateHud(); } /* ------------------------------ HAZARDS ------------------------------ */ function spawnHazard(initial = false) { const margin = 50; const side = Math.floor(Math.random() * 4); let x; let y; if (side === 0) { x = rand(margin, W - margin); y = -30; } if (side === 1) { x = W + 30; y = rand(margin, H - margin); } if (side === 2) { x = rand(margin, W - margin); y = H + 30; } if (side === 3) { x = -30; y = rand(margin, H - margin); } const angle = Math.atan2(H / 2 - y, W / 2 - x) + rand(-0.55, 0.55); const speed = initial ? rand(90, 150) : rand(125, 190) + elapsed * 1.8; const isChaser = elapsed >= 18 && Math.random() < 0.42; hazards.push({ type: "orb", x, y, r: rand(13, 24), vx: Math.cos(angle) * speed, vy: Math.sin(angle) * speed, chase: isChaser, chaseAge: 0, chaseDuration: isChaser ? rand(5, 7) : 0, near: false }); } function spawnLaser() { const horizontal = Math.random() < 0.5; const warning = 1.15; const active = 0.55; hazards.push({ type: "laser", horizontal, pos: horizontal ? rand(80, H - 80) : rand(80, W - 80), thickness: 16, age: 0, warning, active }); } /* ------------------------------ EFFECTS ------------------------------ */ function particlesAt(x, y, amount = 18) { for (let i = 0; i < amount; i++) { const angle = rand(0, Math.PI * 2); const speed = rand(50, 260); particles.push({ x, y, vx: Math.cos(angle) * speed, vy: Math.sin(angle) * speed, life: rand(0.3, 0.8), age: 0, size: rand(1, 4) }); } } function flashPhase(text) { phaseEl.textContent = text; phaseEl.classList.add("show"); clearTimeout(flashPhase.timeout); flashPhase.timeout = setTimeout(() => { phaseEl.classList.remove("show"); }, 1200); } /* ------------------------------ START / DEATH ------------------------------ */ function start() { reset(); running = true; startOverlay.style.display = "none"; gameOverOverlay.style.display = "none"; last = performance.now(); requestAnimationFrame(loop); } function die() { if (!running) { return; } running = false; particlesAt( player.x, player.y, 48 ); draw(); const rounded = Math.floor(score); if (window.Arcade && typeof window.Arcade.submitScore === 'function') { window.Arcade.submitScore({ score: rounded, duration: elapsed, stats: { closeCalls: closeCalls } }); } if (rounded > best) { best = rounded; localStorage.setItem( "dtr_best", best ); bestEl.textContent = best.toLocaleString(); bestLine.textContent = "NEW HIGH SCORE"; } else { bestLine.textContent = "Best: " + best.toLocaleString(); } finalScore.textContent = rounded.toLocaleString(); finalTime.textContent = elapsed.toFixed(1) + "s"; finalClose.textContent = closeCalls; setTimeout(() => { gameOverOverlay.style.display = "grid"; }, 180); } /* ------------------------------ UPDATE ------------------------------ */ function update(dt) { elapsed += dt; /* Phase changes */ let currentPhase = 0; for (let i = 0; i < phases.length; i++) { if (elapsed >= phases[i].t) { currentPhase = i; } } if (currentPhase !== phaseIndex) { phaseIndex = currentPhase; flashPhase( phases[currentPhase].name ); } /* -------------------------- PLAYER MOVEMENT -------------------------- */ const keyboardActive = keys.has("w") || keys.has("arrowup") || keys.has("s") || keys.has("arrowdown") || keys.has("a") || keys.has("arrowleft") || keys.has("d") || keys.has("arrowright"); /* * Mouse / touch: * directly follows pointer position. */ if (pointer.active && !keyboardActive) { player.x = clamp( pointer.x, player.r + 5, W - player.r - 5 ); player.y = clamp( pointer.y, player.r + 5, H - player.r - 5 ); player.vx = 0; player.vy = 0; } /* * Keyboard: * standard direct movement. */ else { let dx = 0; let dy = 0; if ( keys.has("w") || keys.has("arrowup") ) { dy--; } if ( keys.has("s") || keys.has("arrowdown") ) { dy++; } if ( keys.has("a") || keys.has("arrowleft") ) { dx--; } if ( keys.has("d") || keys.has("arrowright") ) { dx++; } const magnitude = Math.hypot(dx, dy) || 1; dx /= magnitude; dy /= magnitude; player.vx = dx * player.speed; player.vy = dy * player.speed; player.x = clamp( player.x + player.vx * dt, player.r + 5, W - player.r - 5 ); player.y = clamp( player.y + player.vy * dt, player.r + 5, H - player.r - 5 ); } /* -------------------------- SPAWNING -------------------------- */ spawnClock -= dt; const spawnRate = Math.max( 0.42, 1.65 - elapsed * 0.014 ); if (spawnClock <= 0) { spawnHazard(); if ( elapsed > 45 && Math.random() < 0.28 ) { spawnHazard(); } spawnClock = spawnRate; } if (elapsed >= 30) { laserClock -= dt; if (laserClock <= 0) { spawnLaser(); laserClock = Math.max( 2.1, 4.8 - elapsed * 0.025 ); } } /* -------------------------- HAZARD UPDATE -------------------------- */ let dangerBonus = 0; for ( let i = hazards.length - 1; i >= 0; i-- ) { const hazard = hazards[i]; if (hazard.type === "orb") { /* -------------------------- CHASER LOGIC -------------------------- */ if (hazard.chase) { hazard.chaseAge += dt; /* * Stop chasing after the * configured lifetime. */ if ( hazard.chaseAge >= hazard.chaseDuration ) { hazard.chase = false; } else { const targetAngle = Math.atan2( player.y - hazard.y, player.x - hazard.x ); const steer = Math.min( 1.7 * dt, 0.09 ); /* * Current speed before turning. */ const speed = Math.hypot( hazard.vx, hazard.vy ); /* * Blend current direction * toward player direction. */ let newVx = hazard.vx * (1 - steer) + Math.cos(targetAngle) * speed * steer; let newVy = hazard.vy * (1 - steer) + Math.sin(targetAngle) * speed * steer; /* * Normalize the result back * to the original speed. */ const newSpeed = Math.hypot( newVx, newVy ); if (newSpeed > 0) { newVx = (newVx / newSpeed) * speed; newVy = (newVy / newSpeed) * speed; } hazard.vx = newVx; hazard.vy = newVy; } } /* Move orb */ hazard.x += hazard.vx * dt; hazard.y += hazard.vy * dt; const distance = dist( player.x, player.y, hazard.x, hazard.y ); /* Collision */ if ( distance < player.r + hazard.r ) { return die(); } /* Close-call zone */ const nearRadius = player.r + hazard.r + 44; if ( distance < nearRadius ) { dangerBonus += (nearRadius - distance) / nearRadius; if ( !hazard.near && elapsed - lastClose > 0.12 ) { hazard.near = true; closeCalls++; lastClose = elapsed; score += 125; shockwaves.push({ x: player.x, y: player.y, r: 10, age: 0, life: 0.4 }); } } else if ( distance > nearRadius + 18 ) { hazard.near = false; } /* * Once a chaser stops chasing, * it continues straight and * eventually exits here. */ if ( hazard.x < -120 || hazard.x > W + 120 || hazard.y < -120 || hazard.y > H + 120 ) { hazards.splice(i, 1); } } /* -------------------------- LASERS -------------------------- */ else { hazard.age += dt; const activeStart = hazard.warning; const activeEnd = hazard.warning + hazard.active; if ( hazard.age >= activeStart && hazard.age <= activeEnd ) { if (hazard.horizontal) { if ( Math.abs( player.y - hazard.pos ) < player.r + hazard.thickness / 2 ) { return die(); } } else { if ( Math.abs( player.x - hazard.pos ) < player.r + hazard.thickness / 2 ) { return die(); } } } if ( hazard.age > activeEnd + 0.2 ) { hazards.splice(i, 1); } } } /* -------------------------- SCORE -------------------------- */ score += dt * ( 18 + elapsed * 0.55 + dangerBonus * 135 ); /* -------------------------- PARTICLES -------------------------- */ for ( let i = particles.length - 1; i >= 0; i-- ) { const particle = particles[i]; particle.age += dt; particle.x += particle.vx * dt; particle.y += particle.vy * dt; particle.vx *= 0.985; particle.vy *= 0.985; if ( particle.age >= particle.life ) { particles.splice(i, 1); } } /* -------------------------- SHOCKWAVES -------------------------- */ for ( let i = shockwaves.length - 1; i >= 0; i-- ) { const wave = shockwaves[i]; wave.age += dt; wave.r += 140 * dt; if ( wave.age >= wave.life ) { shockwaves.splice(i, 1); } } updateHud(); } /* ------------------------------ HUD ------------------------------ */ function updateHud() { scoreEl.textContent = Math.floor(score).toLocaleString(); timeEl.textContent = elapsed.toFixed(1); closeEl.textContent = closeCalls; } /* ------------------------------ DRAW ------------------------------ */ function draw() { ctx.clearRect( 0, 0, W, H ); /* Background */ ctx.fillStyle = "#08090b"; ctx.fillRect( 0, 0, W, H ); /* Grid */ ctx.strokeStyle = "rgba(255,255,255,.035)"; ctx.lineWidth = 1; const grid = 42; for ( let x = (W % grid) / 2; x < W; x += grid ) { ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, H); ctx.stroke(); } for ( let y = (H % grid) / 2; y < H; y += grid ) { ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(W, y); ctx.stroke(); } /* Vignette */ const gradient = ctx.createRadialGradient( W / 2, H / 2, Math.min(W, H) * 0.2, W / 2, H / 2, Math.max(W, H) * 0.7 ); gradient.addColorStop( 0, "rgba(255,255,255,0)" ); gradient.addColorStop( 1, "rgba(0,0,0,.42)" ); ctx.fillStyle = gradient; ctx.fillRect( 0, 0, W, H ); /* Hazards */ for (const hazard of hazards) { if (hazard.type === "orb") { /* Outer glow */ ctx.beginPath(); ctx.arc( hazard.x, hazard.y, hazard.r + 8, 0, Math.PI * 2 ); ctx.fillStyle = "rgba(255,51,77,.10)"; ctx.fill(); /* * Optional chaser indicator. * Chasing balls get a subtle * extra outer ring. */ if (hazard.chase) { ctx.beginPath(); ctx.arc( hazard.x, hazard.y, hazard.r + 12, 0, Math.PI * 2 ); ctx.strokeStyle = "rgba(255,51,77,.45)"; ctx.lineWidth = 2; ctx.stroke(); } /* Main orb */ ctx.beginPath(); ctx.arc( hazard.x, hazard.y, hazard.r, 0, Math.PI * 2 ); ctx.fillStyle = "#ff334d"; ctx.fill(); /* Highlight */ ctx.beginPath(); ctx.arc( hazard.x - hazard.r * 0.28, hazard.y - hazard.r * 0.28, hazard.r * 0.23, 0, Math.PI * 2 ); ctx.fillStyle = "rgba(255,255,255,.28)"; ctx.fill(); } else { const active = hazard.age >= hazard.warning && hazard.age <= hazard.warning + hazard.active; const warning = hazard.age < hazard.warning; if (hazard.horizontal) { if (warning) { ctx.fillStyle = `rgba(255,51,77,${ 0.1 + 0.12 * Math.sin( hazard.age * 18 ) })`; ctx.fillRect( 0, hazard.pos - 2, W, 4 ); } else if (active) { ctx.fillStyle = "rgba(255,51,77,.17)"; ctx.fillRect( 0, hazard.pos - hazard.thickness * 1.3, W, hazard.thickness * 2.6 ); ctx.fillStyle = "#ff334d"; ctx.fillRect( 0, hazard.pos - hazard.thickness / 2, W, hazard.thickness ); ctx.fillStyle = "rgba(255,255,255,.5)"; ctx.fillRect( 0, hazard.pos - 2, W, 4 ); } } else { if (warning) { ctx.fillStyle = `rgba(255,51,77,${ 0.1 + 0.12 * Math.sin( hazard.age * 18 ) })`; ctx.fillRect( hazard.pos - 2, 0, 4, H ); } else if (active) { ctx.fillStyle = "rgba(255,51,77,.17)"; ctx.fillRect( hazard.pos - hazard.thickness * 1.3, 0, hazard.thickness * 2.6, H ); ctx.fillStyle = "#ff334d"; ctx.fillRect( hazard.pos - hazard.thickness / 2, 0, hazard.thickness, H ); ctx.fillStyle = "rgba(255,255,255,.5)"; ctx.fillRect( hazard.pos - 2, 0, 4, H ); } } } } /* Close-call shockwaves */ for (const wave of shockwaves) { const alpha = 1 - wave.age / wave.life; ctx.beginPath(); ctx.arc( wave.x, wave.y, wave.r, 0, Math.PI * 2 ); ctx.strokeStyle = `rgba(255,255,255,${ alpha * 0.65 })`; ctx.lineWidth = 2; ctx.stroke(); } /* Player glow */ ctx.beginPath(); ctx.arc( player.x, player.y, player.r + 10, 0, Math.PI * 2 ); ctx.fillStyle = "rgba(255,255,255,.08)"; ctx.fill(); /* Player */ ctx.beginPath(); ctx.arc( player.x, player.y, player.r, 0, Math.PI * 2 ); ctx.fillStyle = "#fff"; ctx.fill(); /* Player highlight */ ctx.beginPath(); ctx.arc( player.x - 3, player.y - 3, 2.4, 0, Math.PI * 2 ); ctx.fillStyle = "#bfc3ca"; ctx.fill(); /* Particles */ for (const particle of particles) { const alpha = 1 - particle.age / particle.life; ctx.globalAlpha = alpha; ctx.fillStyle = "#ff334d"; ctx.fillRect( particle.x, particle.y, particle.size, particle.size ); } ctx.globalAlpha = 1; /* Panic tint */ if ( running && elapsed > 60 ) { ctx.fillStyle = `rgba(255,0,30,${ 0.015 + 0.012 * Math.sin( elapsed * 6 ) })`; ctx.fillRect( 0, 0, W, H ); } } /* ------------------------------ GAME LOOP ------------------------------ */ function loop(now) { if (!running) { return; } const dt = Math.min( 0.033, (now - last) / 1000 || 0 ); last = now; update(dt); draw(); if (running) { requestAnimationFrame(loop); } } /* ------------------------------ BUTTONS ------------------------------ */ document .getElementById("startBtn") .addEventListener( "click", start ); document .getElementById("restartBtn") .addEventListener( "click", start ); draw();

DON'T TOUCH RED

RUN OVER