Tsunade Stalker Game Hit

// ---------- GAME DIMENSIONS ---------- const W = 800, H = 500;

@media (max-width: 700px) .score-box, .alert-box font-size: 1rem; padding: 4px 12px; .info-panel gap: 12px; flex-wrap: wrap; justify-content: center; .controls font-size: 0.7rem; </style> </head> <body> <div> <div class="game-container"> <canvas id="gameCanvas" width="800" height="500"></canvas> <div class="info-panel"> <div class="score-box">❤️ STALK FAME: <span id="scoreValue">0</span></div> <div class="alert-box" id="alertMessage">✨ Follow Tsunade-sama ✨</div> <button id="resetBtn">🔄 Reset Game</button> </div> <div class="controls"> 🎮 ARROW KEYS or WASD | Stay near Tsunade → +Points | If too far → lose points | Don't get caught staring! </div> </div> </div>

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--;

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();