<script> (function() // ---------- CANVAS ---------- const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d');
.game-container background: #2b1e0f; padding: 20px; border-radius: 48px; box-shadow: 0 20px 35px rgba(0,0,0,0.5), inset 0 1px 4px rgba(255,255,200,0.2); border: 2px solid #e6c27a;
Below is a browser-based mini-game where you play as Naruto trying to get Tsunade’s attention (following her around the village) without being too obvious.
.alert-box background: #632c1c; color: #ffbc6e; font-size: 1.1rem; Play Tsunade Stalker Game hit
// distance thresholds const IDEAL_DIST_MIN = 40; // too close = suspicious const IDEAL_DIST_MAX = 140; // perfect following range const LOSE_DIST = 280; // too far -> lose points
.info-panel display: flex; justify-content: space-between; align-items: baseline; margin-top: 18px; background: #261d12e0; backdrop-filter: blur(4px); padding: 10px 20px; border-radius: 60px; border: 1px solid #f3d382; color: #ffefb9; text-shadow: 2px 2px 0 #5a2e0e; font-weight: bold;
// game logic: update score & suspicion based on distance function updateStalkMechanics() if (gameOver) return; 💀"; function drawUI() // suspicion bar ctx
function drawPlayer() ctx.save(); ctx.shadowBlur = 0; ctx.beginPath(); ctx.arc(player.x, player.y, player.radius, 0, Math.PI*2); ctx.fillStyle = "#f7b32b"; ctx.fill(); ctx.fillStyle = "#d45a1c"; ctx.beginPath(); ctx.ellipse(player.x-5, player.y-4, 4, 6, 0, 0, Math.PI*2); ctx.fill(); ctx.beginPath(); ctx.ellipse(player.x+5, player.y-4, 4, 6, 0, 0, Math.PI*2); ctx.fill(); // whisker marks ctx.fillStyle = "#804e2a"; for (let s of [-1,1]) ctx.fillRect(player.x-9 + (s*2), player.y+2, 4, 2); ctx.fillRect(player.x-11 + (s*2), player.y+5, 4, 2); ctx.fillRect(player.x-7 + (s*2), player.y+8, 4, 2); // headband ctx.fillStyle = "#2f6b4a"; ctx.fillRect(player.x-14, player.y-12, 28, 8); ctx.fillStyle = "#c0a26a"; ctx.fillText("木", player.x-4, player.y-6); ctx.restore();
// ---------- GAME STATE ---------- let stalkScore = 0; // reputation / attention meter let suspicion = 0; // if suspicion > 100 -> game over let gameOver = false; let warningFlash = 0; // visual flash timer
// reset game fully function resetGame() gameOver = false; stalkScore = 0; suspicion = 0; warningFlash = 0; player.x = 400; player.y = 400; tsunade.x = 220; tsunade.y = 180; tsunade.direction = x: 0.9, y: 0.6 ; applyBoundary(tsunade, tsunade.radius); applyBoundary(player, player.radius); const msgDiv = document.getElementById('alertMessage'); if (msgDiv) msgDiv.innerText = "✨ Follow Tsunade-sama ✨"; messageTimeout = 0; frameCounter = 0; ctx.fillStyle = "#e34d2b"
// GAME OVER condition: suspicion >= 100 if (suspicion >= 100 && !gameOver) gameOver = true; const msgDiv = document.getElementById('alertMessage'); if (msgDiv) msgDiv.innerText = "💀 GAME OVER! Tsunade reported you! 💀";
function drawUI() // suspicion bar ctx.fillStyle = "#411a0a"; ctx.fillRect(20, 15, 204, 22); ctx.fillStyle = "#e34d2b"; ctx.fillRect(22, 17, (suspicion/100)*200, 18); ctx.fillStyle = "#fcd48e"; ctx.font = "bold 14px 'Courier New'"; ctx.fillText(`SUSPICION: $Math.floor(suspicion)%`, 25, 33);
// warning flash effect if (warningFlash > 0 && !gameOver) ctx.globalAlpha = 0.25 + Math.sin(Date.now() * 0.02) * 0.1; ctx.fillStyle = "#ff6655"; ctx.fillRect(0, 0, W, H); ctx.globalAlpha = 1; warningFlash--;
// ---- event listeners ---- window.addEventListener('keydown', (e) => const key = e.key; if (keys.hasOwnProperty(key)) keys[key] = true; e.preventDefault(); // optional R restart if (key === 'r' ); window.addEventListener('keyup', (e) => const key = e.key; if (keys.hasOwnProperty(key)) keys[key] = false; ); document.getElementById('resetBtn').addEventListener('click', () => resetGame(); );
