Games Io Github !!install!! -

<div class="controls"> <button id="restartButton">🔄 NEW GAME</button> <button id="resetBestBtn">✨ RESET BEST</button> </div> <div class="controls" style="margin-top: 8px;"> <span style="font-size: 12px; color:#8aaec0;">⬆️ ⬇️ ⬅️ ➡️ | WASD | Swipe (mobile)</span> </div> </div> </div>

.info-panel display: flex; justify-content: space-between; align-items: baseline; margin-top: 20px; margin-bottom: 8px; flex-wrap: wrap; gap: 15px; games io github

// Snake state let snake = []; // array of x, y let direction = 'RIGHT'; // current moving direction let nextDirection = 'RIGHT'; let food = x: 12, y: 12 ; let score = 0; let gameLoop = null; let gameActive = true; // UI elements const currentScoreSpan = document.getElementById('currentScore'); const bestScoreSpan = document.getElementById('bestScore'); const gameStatusSpan = document.getElementById('gameStatusText'); // ---------- PERSISTENT BEST SCORE (solid feature) ---------- let bestScore = 0; const STORAGE_KEY = 'snakeio_best_score'; function loadBestScore() const stored = localStorage.getItem(STORAGE_KEY); if(stored !== null && !isNaN(parseInt(stored))) bestScore = parseInt(stored); else bestScore = 0; bestScoreSpan.innerText = bestScore; function updateBestScoreUI() bestScoreSpan.innerText = bestScore; function tryUpdateBestScore(currentScore) if(currentScore > bestScore) bestScore = currentScore; localStorage.setItem(STORAGE_KEY, bestScore); updateBestScoreUI(); // extra visual feedback: little flash effect on best card const bestCard = document.querySelector('.best-card'); if(bestCard) bestCard.style.transition = '0.1s'; bestCard.style.transform = 'scale(1.02)'; bestCard.style.borderRightColor = '#ffd966'; setTimeout(() => bestCard.style.transform = ''; bestCard.style.borderRightColor = '#ffb347'; , 200); return true; return false; // Reset best score manually (solid feature reset option) function resetBestScore() bestScore = 0; localStorage.setItem(STORAGE_KEY, 0); updateBestScoreUI(); // show subtle message on status gameStatusSpan.innerText = '✨ BEST RESET ✨'; setTimeout(() => if(gameActive) gameStatusSpan.innerText = '▶️ PLAYING'; else gameStatusSpan.innerText = '💀 GAME OVER'; , 1200); // ----- Game Helpers ----- function initGame() // classic start: 3 segments snake = [ x: 10, y: 10 , x: 9, y: 10 , x: 8, y: 10 ]; direction = 'RIGHT'; nextDirection = 'RIGHT'; score = 0; gameActive = true; currentScoreSpan.innerText = score; gameStatusSpan.innerText = '▶️ PLAYING'; generateValidFood(); clearGameLoop(); startLoop(); draw(); // immediate render function clearGameLoop() if(gameLoop) clearInterval(gameLoop); gameLoop = null; function startLoop() if(gameLoop) clearInterval(gameLoop); // classic 120ms per frame -> feels responsive but not too fast gameLoop = setInterval(updateGame, 130); function generateValidFood() const totalCells = GRID_SIZE * GRID_SIZE; if(snake.length >= totalCells) // You win! but we'll treat as game win (special case) // In classic snake, win condition triggers game over with victory. gameWin(); return; // Fast method: collect free positions const snakeSet = new Set(snake.map(seg => `$seg.x,$seg.y`)); const freePositions = []; for(let i = 0; i < GRID_SIZE; i++) for(let j = 0; j < GRID_SIZE; j++) if(!snakeSet.has(`$i,$j`)) freePositions.push( x: i, y: j ); if(freePositions.length === 0) gameWin(); return; const randIndex = Math.floor(Math.random() * freePositions.length); food = freePositions[randIndex]; function gameWin() if(!gameActive) return; gameActive = false; clearGameLoop(); gameStatusSpan.innerText = '🏆 YOU WIN! 🏆'; tryUpdateBestScore(score); draw(); // final draw shows win message on canvas function gameOver() if(!gameActive) return; gameActive = false; clearGameLoop(); gameStatusSpan.innerText = '💀 GAME OVER 💀'; tryUpdateBestScore(score); draw(); // draw game over overlay function updateGame() newHead.y >= GRID_SIZE) gameOver(); draw(); return; // self collision (skip if head just ate? careful: but newHead is already in snake[0]) // check if head position collides with any other segment (index > 0) const headPos = snake[0]; for(let i = 1; i < snake.length; i++) if(snake[i].x === headPos.x && snake[i].y === headPos.y) gameOver(); draw(); return; // extra win condition: if snake length equals total cells, trigger win if(snake.length === GRID_SIZE * GRID_SIZE) gameWin(); draw(); return; // all good, redraw draw(); // ----- Drawing with modern neon/io style ----- function draw() if(!ctx) return; ctx.clearRect(0, 0, canvas.width, canvas.height); // draw subtle grid (io style) ctx.strokeStyle = '#1e3347'; ctx.lineWidth = 0.8; for(let i = 0; i <= GRID_SIZE; i++) ctx.beginPath(); ctx.moveTo(i * CELL_SIZE, 0); ctx.lineTo(i * CELL_SIZE, canvas.height); ctx.stroke(); ctx.moveTo(0, i * CELL_SIZE); ctx.lineTo(canvas.width, i * CELL_SIZE); ctx.stroke(); // draw food (glowing berry) ctx.shadowBlur = 12; ctx.shadowColor = '#ff5e7e'; ctx.fillStyle = '#ff3860'; ctx.beginPath(); ctx.arc(food.x * CELL_SIZE + CELL_SIZE/2, food.y * CELL_SIZE + CELL_SIZE/2, CELL_SIZE * 0.4, 0, Math.PI*2); ctx.fill(); ctx.fillStyle = '#ffb3c6'; ctx.beginPath(); ctx.arc(food.x * CELL_SIZE + CELL_SIZE/2 - 2, food.y * CELL_SIZE + CELL_SIZE/2 - 2, 3, 0, Math.PI*2); ctx.fill(); ctx.shadowBlur = 0; // draw snake (gradient segments + shiny eyes) for(let i = 0; i < snake.length; i++) const seg = snake[i]; const x = seg.x * CELL_SIZE; const y = seg.y * CELL_SIZE; const isHead = (i === 0); const gradient = ctx.createLinearGradient(x, y, x+CELL_SIZE, y+CELL_SIZE); if(isHead) gradient.addColorStop(0, '#3acb6b'); gradient.addColorStop(1, '#1f9e4a'); else gradient.addColorStop(0, '#2ab15b'); gradient.addColorStop(1, '#18853c'); ctx.fillStyle = gradient; ctx.shadowBlur = isHead ? 6 : 2; ctx.shadowColor = '#29ff8b'; ctx.fillRect(x + 1, y + 1, CELL_SIZE - 2, CELL_SIZE - 2); // rounded corners effect ctx.fillStyle = isHead ? '#d9ffb0' : '#b0e57c'; ctx.beginPath(); ctx.arc(x + CELL_SIZE - 6, y + 6, 3, 0, Math.PI*2); ctx.fill(); if(isHead) // eyes ctx.fillStyle = '#ffffff'; ctx.beginPath(); ctx.arc(x + CELL_SIZE * 0.7, y + CELL_SIZE * 0.35, 4, 0, Math.PI*2); ctx.arc(x + CELL_SIZE * 0.3, y + CELL_SIZE * 0.35, 4, 0, Math.PI*2); ctx.fill(); ctx.fillStyle = '#000000'; ctx.beginPath(); ctx.arc(x + CELL_SIZE * 0.72, y + CELL_SIZE * 0.33, 2, 0, Math.PI*2); ctx.arc(x + CELL_SIZE * 0.32, y + CELL_SIZE * 0.33, 2, 0, Math.PI*2); ctx.fill(); ctx.shadowBlur = 0; // if game inactive: overlay message if(!gameActive) ctx.fillStyle = 'rgba(0,0,0,0.75)'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.font = `bold $Math.floor(CELL_SIZE * 1.6)px 'Segoe UI', monospace`; ctx.fillStyle = '#f0fcff'; ctx.shadowBlur = 0; ctx.textAlign = 'center'; let msg = gameStatusSpan.innerText.includes('WIN') ? '🌟 PERFECT WIN! 🌟' : (gameStatusSpan.innerText.includes('GAME OVER') ? '💀 GAME OVER 💀' : 'STOPPED'); if(gameStatusSpan.innerText.includes('YOU WIN')) msg = '🏆 VICTORY! 🏆'; ctx.fillText(msg, canvas.width/2, canvas.height/2); ctx.font = `16px monospace`; ctx.fillStyle = '#bbd4ff'; ctx.fillText('click NEW GAME', canvas.width/2, canvas.height/2 + 45); ctx.textAlign = 'left'; else // draw subtle "io" effect ctx.font = `bold 16px 'Courier New'`; ctx.fillStyle = '#6ea8fe30'; ctx.fillText('⚡ SNAKE.IO', 12, 32); // ----- Direction & Controls (keyboard + swipe)----- function changeDirection(newDir) if(!gameActive) return; const opposite = 'UP': 'DOWN', 'DOWN': 'UP', 'LEFT': 'RIGHT', 'RIGHT': 'LEFT' ; // prevent 180-degree turn if(opposite[newDir] !== direction) nextDirection = newDir; function handleKey(e) // restart function function restartGame() clearGameLoop(); initGame(); // ----- Mobile Swipe Support (solid feature: full mobile friendly) ----- let touchStart = null; function handleTouchStart(e) e.preventDefault(); const rect = canvas.getBoundingClientRect(); const touch = e.touches[0]; touchStart = x: touch.clientX - rect.left, y: touch.clientY - rect.top ; function handleTouchEnd(e) if(!touchStart) return; e.preventDefault(); const rect = canvas.getBoundingClientRect(); const endX = e.changedTouches[0].clientX - rect.left; const endY = e.changedTouches[0].clientY - rect.top; const dx = endX - touchStart.x; const dy = endY - touchStart.y; if(Math.abs(dx) < 15 && Math.abs(dy) < 15) return; if(Math.abs(dx) > Math.abs(dy)) if(dx > 0) changeDirection('RIGHT'); else changeDirection('LEFT'); else if(dy > 0) changeDirection('DOWN'); else changeDirection('UP'); touchStart = null; // manual canvas touch cancel function attachMobileEvents() canvas.addEventListener('touchstart', handleTouchStart, passive: false); canvas.addEventListener('touchend', handleTouchEnd, passive: false); canvas.addEventListener('touchcancel', (e) => touchStart = null; ); // ----- Event binding ----- window.addEventListener('load', () => loadBestScore(); initGame(); attachMobileEvents(); window.addEventListener('keydown', (e) => e.key === 'D' ); document.getElementById('restartButton').addEventListener('click', () => restartGame(); ); document.getElementById('resetBestBtn').addEventListener('click', () => resetBestScore(); if(!gameActive) // just visual sync, but also if game active, best reset is just ui update draw(); ); ); // avoid page scroll on arrow keys fully window.addEventListener('keydown', function(e) ); // extra: ensure canvas focus not needed )(); </script> </body> </html> '#d9ffb0' : '#b0e57c'; ctx

<div class="info-panel"> <div class="score-card"> <span class="score-label">🍎 SCORE</span> <span class="score-value" id="currentScore">0</span> </div> <div class="best-card"> <span class="best-label">🏆 BEST SCORE</span> <span class="best-value" id="bestScore">0</span> </div> <div class="status" id="gameStatusText">▶️ PLAYING</div> </div> '💀 GAME OVER 💀' : 'STOPPED')

.game-container background: rgba(10, 20, 30, 0.65); backdrop-filter: blur(4px); border-radius: 64px; padding: 20px 25px 25px 25px; box-shadow: 0 25px 45px rgba(0, 0, 0, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.08); border: 1px solid rgba(72, 187, 255, 0.25);