Hugging Face's logo

Spaces:
pijou
/
snake
Running

App Files Community
snake / index.html
pijou's picture
pijou
Add 1 files
0ce141e verified
raw
history blame contribute delete
41.5 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Rainbow Neon Snake</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
body {
 font-family: 'Press Start 2P', cursive;
 background: linear-gradient(135deg, #0f172a, #1e293b);
 overflow: hidden;
 touch-action: none;
 }
#gameCanvas {
 box-shadow: 0 0 30px rgba(99, 102, 241, 0.8),
0 0 60px rgba(139, 92, 246, 0.6),
 0 0 90px rgba(217, 70, 239, 0.4);
 border-radius: 8px;
 border: 2px solid #6366f1;
 }
.rainbow-text {
 background: linear-gradient(90deg,
#ef4444, #f97316, #eab308, #22c55e,
#3b82f6, #6366f1, #8b5cf6, #d946ef);
 -webkit-background-clip: text;
 background-clip: text;
 color: transparent;
 text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
 }
.neon-button {
 transition: all 0.3s;
 box-shadow: 0 0 15px rgba(99, 102, 241, 0.7);
 position: relative;
 overflow: hidden;
 }
.neon-button:hover {
 box-shadow: 0 0 25px rgba(139, 92, 246, 0.8);
 transform: translateY(-2px);
 }
.neon-button::before {
 content: '';
 position: absolute;
 top: -50%;
 left: -50%;
 width: 200%;
 height: 200%;
 background: linear-gradient(
 to bottom right,
 rgba(255, 255, 255, 0.3) 0%,
 rgba(255, 255, 255, 0) 60%
 );
 transform: rotate(30deg);
 transition: all 0.3s;
 }
.neon-button:hover::before {
 left: 100%;
 }
.pulse {
 animation: pulse 1.5s infinite;
 }
@keyframes pulse {
 0% { transform: scale(0.98); opacity: 0.9; }
 50% { transform: scale(1.02); opacity: 1; }
 100% { transform: scale(0.98); opacity: 0.9; }
 }
.glow {
 animation: glow 2s infinite alternate;
 }
@keyframes glow {
 from {
box-shadow: 0 0 15px rgba(99, 102, 241, 0.7),
 0 0 30px rgba(139, 92, 246, 0.5);
 }
 to {
box-shadow: 0 0 25px rgba(99, 102, 241, 0.9),
 0 0 50px rgba(139, 92, 246, 0.7),
 0 0 75px rgba(217, 70, 239, 0.5);
 }
 }
.particle {
 position: absolute;
 border-radius: 50%;
 pointer-events: none;
 z-index: 10;
 }
.controls {
 touch-action: none;
 }
.control-btn {
 width: 70px;
 height: 70px;
 background: rgba(30, 41, 59, 0.7);
 border: 2px solid;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 color: white;
 font-size: 28px;
 user-select: none;
 touch-action: none;
 transition: all 0.2s;
 position: relative;
 overflow: hidden;
 }
.control-btn::before {
 content: '';
 position: absolute;
 top: -50%;
 left: -50%;
 width: 200%;
 height: 200%;
 background: linear-gradient(
 to bottom right,
 rgba(255, 255, 255, 0.2) 0%,
 rgba(255, 255, 255, 0) 60%
 );
 transform: rotate(30deg);
 }
.control-btn:active {
 transform: scale(0.95);
 }
#upBtn {
 border-color: #22c55e;
 box-shadow: 0 0 15px rgba(34, 197, 94, 0.5);
 }
#downBtn {
 border-color: #3b82f6;
 box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
 }
#leftBtn {
 border-color: #f97316;
 box-shadow: 0 0 15px rgba(249, 115, 22, 0.5);
 }
#rightBtn {
 border-color: #d946ef;
 box-shadow: 0 0 15px rgba(217, 70, 239, 0.5);
 }
.score-box {
 background: rgba(30, 41, 59, 0.7);
 border: 2px solid #6366f1;
 border-radius: 10px;
 box-shadow: 0 0 15px rgba(99, 102, 241, 0.5);
 padding: 10px 20px;
 position: relative;
 overflow: hidden;
 }
.score-box::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 3px;
 background: linear-gradient(90deg,
#ef4444, #f97316, #eab308, #22c55e,
#3b82f6, #6366f1, #8b5cf6, #d946ef);
 }
.trail {
 position: absolute;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 background: rgba(255, 255, 255, 0.4);
 pointer-events: none;
 z-index: 5;
 }
.power-up {
 position: absolute;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 background: #eab308;
 box-shadow: 0 0 10px #eab308, 0 0 20px rgba(234, 179, 8, 0.7);
 animation: float 3s ease-in-out infinite;
 z-index: 5;
 }
@keyframes float {
 0%, 100% { transform: translateY(0); }
 50% { transform: translateY(-10px); }
 }
.power-up::after {
 content: '';
 position: absolute;
 top: -5px;
 left: -5px;
 right: -5px;
 bottom: -5px;
 border: 2px solid #eab308;
 border-radius: 50%;
 animation: pulse-ring 2s ease-out infinite;
 opacity: 0;
 }
@keyframes pulse-ring {
 0% { transform: scale(0.8); opacity: 0.8; }
 100% { transform: scale(1.5); opacity: 0; }
 }
 </style>
</head>
<body class="min-h-screen flex flex-col items-center justify-center p-4">
 <div class="text-center mb-8">
 <h1 class="text-4xl md:text-5xl font-bold rainbow-text mb-4">RAINBOW SNAKE</h1>
 <div class="flex justify-center gap-8 mb-6">
 <div class="score-box">
 <p class="text-sm text-blue-300">SCORE</p>
 <p id="score" class="text-2xl text-white">0</p>
 </div>
 <div class="score-box">
 <p class="text-sm text-blue-300">HIGH SCORE</p>
 <p id="highScore" class="text-2xl text-white">0</p>
 </div>
 </div>
 </div>
<div class="relative">
 <canvas id="gameCanvas" width="400" height="400" class="bg-gray-900"></canvas>
<div id="gameOver" class="hidden absolute inset-0 flex flex-col items-center justify-center bg-black bg-opacity-90 rounded">
 <h2 class="text-red-500 text-3xl mb-6 rainbow-text">GAME OVER!</h2>
 <p class="text-blue-300 mb-4">Your score: <span id="finalScore" class="text-white">0</span></p>
 <p class="text-blue-300 mb-8">High score: <span id="finalHighScore" class="text-white">0</span></p>
 <button id="restartButton" class="px-6 py-3 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-full neon-button font-bold glow">
 <i class="fas fa-redo mr-2"></i> PLAY AGAIN
 </button>
 </div>
<div id="startScreen" class="absolute inset-0 flex flex-col items-center justify-center bg-black bg-opacity-90 rounded">
 <h2 class="rainbow-text text-3xl mb-6 pulse">RAINBOW SNAKE</h2>
 <p class="text-blue-300 mb-8 text-center px-4">Eat the food to grow longer! Collect power-ups for bonuses!</p>
 <button id="startButton" class="px-6 py-3 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-full neon-button font-bold glow">
 <i class="fas fa-play mr-2"></i> START GAME
 </button>
 </div>
 </div>
<div class="mt-6 grid grid-cols-3 gap-4 controls" id="mobileControls">
 <div></div>
 <button class="control-btn" id="upBtn"><i class="fas fa-arrow-up"></i></button>
 <div></div>
 <button class="control-btn" id="leftBtn"><i class="fas fa-arrow-left"></i></button>
 <div class="flex items-center justify-center">
 <div class="w-12 h-12 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center text-white">
 <i class="fas fa-gamepad"></i>
 </div>
 </div>
 <button class="control-btn" id="rightBtn"><i class="fas fa-arrow-right"></i></button>
 <div></div>
 <button class="control-btn" id="downBtn"><i class="fas fa-arrow-down"></i></button>
 <div></div>
 </div>
<div class="mt-4 text-blue-300 text-sm text-center">
 <p>Controls: Arrow Keys, WASD, or Touch Buttons</p>
 </div>
<script>
 document.addEventListener('DOMContentLoaded', () => {
 const canvas = document.getElementById('gameCanvas');
 const ctx = canvas.getContext('2d');
 const scoreElement = document.getElementById('score');
 const highScoreElement = document.getElementById('highScore');
 const finalScoreElement = document.getElementById('finalScore');
 const finalHighScoreElement = document.getElementById('finalHighScore');
 const gameOverScreen = document.getElementById('gameOver');
 const startScreen = document.getElementById('startScreen');
 const startButton = document.getElementById('startButton');
 const restartButton = document.getElementById('restartButton');
 const mobileControls = document.getElementById('mobileControls');
// Game settings
 const gridSize = 20;
 const tileCount = canvas.width / gridSize;
 let speed = 7;
// Game state
 let snake = [{x: 10, y: 10}];
 let food = {x: 5, y: 5};
 let powerUps = [];
 let direction = {x: 0, y: 0};
 let nextDirection = {x: 0, y: 0};
 let score = 0;
 let highScore = localStorage.getItem('snakeHighScore') || 0;
 let gameRunning = false;
 let gameLoop;
 let particles = [];
 let trails = [];
 let lastRenderTime = 0;
 let powerUpTimer = 0;
 let invincible = false;
 let rainbowMode = false;
 let rainbowTimer = 0;
highScoreElement.textContent = highScore;
// Color palette
 const colors = [
 '#ef4444', // red
 '#f97316', // orange
 '#eab308', // yellow
 '#22c55e', // green
 '#3b82f6', // blue
 '#6366f1', // indigo
 '#8b5cf6', // violet
 '#d946ef' // pink
 ];
// Visual effects
 function createParticles(x, y, color, count = 15) {
 for (let i = 0; i < count; i++) {
 const size = Math.random() * 4 + 2;
 particles.push({
 x: x,
 y: y,
 size: size,
 color: color || colors[Math.floor(Math.random() * colors.length)],
 speedX: Math.random() * 8 - 4,
 speedY: Math.random() * 8 - 4,
 life: 30 + Math.random() * 20,
 shrink: size * 0.05
 });
 }
 }
function createTrail(x, y) {
 if (Math.random() > 0.3) return; // Limit trail density
trails.push({
 x: x * gridSize + gridSize / 2,
 y: y * gridSize + gridSize / 2,
 size: Math.random() * 10 + 5,
 opacity: 0.7,
 fade: 0.02
 });
 }
function updateParticles() {
 for (let i = particles.length - 1; i >= 0; i--) {
 const p = particles[i];
 p.x += p.speedX;
 p.y += p.speedY;
 p.life--;
 p.size -= p.shrink;
if (p.life <= 0 || p.size <= 0) {
 particles.splice(i, 1);
 }
 }
for (let i = trails.length - 1; i >= 0; i--) {
 const t = trails[i];
 t.opacity -= t.fade;
 if (t.opacity <= 0) {
 trails.splice(i, 1);
 }
 }
 }
function drawParticles() {
 // Draw trails first (under everything)
 trails.forEach(t => {
 ctx.globalAlpha = t.opacity;
 ctx.fillStyle = 'rgba(255, 255, 255, 0.4)';
 ctx.beginPath();
 ctx.arc(t.x, t.y, t.size, 0, Math.PI * 2);
 ctx.fill();
 });
// Then draw particles
 particles.forEach(p => {
 ctx.globalAlpha = p.life / 50;
 ctx.fillStyle = p.color;
 ctx.beginPath();
 ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
 ctx.fill();
 });
ctx.globalAlpha = 1;
 }
// Draw functions
 function drawSnake() {
 snake.forEach((segment, index) => {
 // Create gradient based on position or rainbow mode
 let gradient;
 const x = segment.x * gridSize;
 const y = segment.y * gridSize;
if (rainbowMode) {
 // Rainbow effect for all segments
 gradient = ctx.createLinearGradient(x, y, x + gridSize, y + gridSize);
 gradient.addColorStop(0, colors[index % colors.length]);
 gradient.addColorStop(1, colors[(index + 4) % colors.length]);
 } else {
 // Head is a different color
 if (index === 0) {
 gradient = ctx.createRadialGradient(
 x + gridSize / 2,
 y + gridSize / 2,
 0,
 x + gridSize / 2,
 y + gridSize / 2,
 gridSize
 );
 gradient.addColorStop(0, '#3b82f6');
 gradient.addColorStop(1, 'rgba(59, 130, 246, 0.2)');
 } else {
 // Body segments get progressively darker
 const intensity = 200 - Math.min(190, index * 5);
 gradient = `rgb(59, 130, ${intensity})`;
 }
 }
ctx.fillStyle = gradient;
// Draw rounded rectangle for snake segments
 const radius = gridSize / 4;
ctx.beginPath();
 ctx.moveTo(x + radius, y);
 ctx.lineTo(x + gridSize - radius, y);
 ctx.quadraticCurveTo(x + gridSize, y, x + gridSize, y + radius);
 ctx.lineTo(x + gridSize, y + gridSize - radius);
 ctx.quadraticCurveTo(x + gridSize, y + gridSize, x + gridSize - radius, y + gridSize);
 ctx.lineTo(x + radius, y + gridSize);
 ctx.quadraticCurveTo(x, y + gridSize, x, y + gridSize - radius);
 ctx.lineTo(x, y + radius);
 ctx.quadraticCurveTo(x, y, x + radius, y);
 ctx.closePath();
 ctx.fill();
// Add glow effect to head
 if (index === 0) {
 ctx.shadowColor = rainbowMode ? colors[Math.floor(Math.random() * colors.length)] : '#3b82f6';
 ctx.shadowBlur = 15;
 ctx.fill();
 ctx.shadowBlur = 0;
 }
// Create trail effect
 if (gameRunning && index === 0) {
 createTrail(segment.x, segment.y);
 }
 });
 }
function drawFood() {
 const x = food.x * gridSize + gridSize / 2;
 const y = food.y * gridSize + gridSize / 2;
 const radius = gridSize / 2;
// Outer glow
 ctx.shadowColor = '#ef4444';
 ctx.shadowBlur = 15;
// Main food circle with gradient
 const gradient = ctx.createRadialGradient(x, y, 0, x, y, radius);
 gradient.addColorStop(0, '#ef4444');
 gradient.addColorStop(1, '#7f1d1d');
 ctx.fillStyle = gradient;
ctx.beginPath();
 ctx.arc(x, y, radius, 0, Math.PI * 2);
 ctx.fill();
// Inner highlight
 ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
 ctx.beginPath();
 ctx.arc(x - radius/3, y - radius/3, radius/4, 0, Math.PI * 2);
 ctx.fill();
// Spikes
 const spikeCount = 8;
 for (let i = 0; i < spikeCount; i++) {
 const angle = (i / spikeCount) * Math.PI * 2;
 const spikeLength = radius * 0.6;
 const spikeWidth = radius * 0.2;
ctx.fillStyle = '#ef4444';
 ctx.beginPath();
 ctx.moveTo(
 x + Math.cos(angle) * radius,
 y + Math.sin(angle) * radius
 );
 ctx.lineTo(
 x + Math.cos(angle) * (radius + spikeLength),
 y + Math.sin(angle) * (radius + spikeLength)
 );
 ctx.lineTo(
 x + Math.cos(angle + 0.2) * (radius + spikeWidth),
 y + Math.sin(angle + 0.2) * (radius + spikeWidth)
 );
 ctx.closePath();
 ctx.fill();
 }
// Reset shadow
 ctx.shadowBlur = 0;
 }
function drawPowerUps() {
 powerUps.forEach(pu => {
 const x = pu.x * gridSize + gridSize / 2;
 const y = pu.y * gridSize + gridSize / 2;
 const radius = gridSize / 2;
// Glowing effect
 ctx.shadowColor = '#eab308';
 ctx.shadowBlur = 15;
// Main circle
 const gradient = ctx.createRadialGradient(x, y, 0, x, y, radius);
 gradient.addColorStop(0, '#eab308');
 gradient.addColorStop(1, '#713f12');
 ctx.fillStyle = gradient;
ctx.beginPath();
 ctx.arc(x, y, radius, 0, Math.PI * 2);
 ctx.fill();
// Star shape
 ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
 ctx.beginPath();
 drawStar(x, y, 5, radius * 0.5, radius * 0.2);
 ctx.fill();
// Reset shadow
 ctx.shadowBlur = 0;
 });
 }
function drawStar(cx, cy, spikes, outerRadius, innerRadius) {
 let rot = Math.PI / 2 * 3;
 let x = cx;
 let y = cy;
 let step = Math.PI / spikes;
 ctx.beginPath();
 ctx.moveTo(cx, cy - outerRadius);
for (let i = 0; i < spikes; i++) {
 x = cx + Math.cos(rot) * outerRadius;
 y = cy + Math.sin(rot) * outerRadius;
 ctx.lineTo(x, y);
 rot += step;
 x = cx + Math.cos(rot) * innerRadius;
 y = cy + Math.sin(rot) * innerRadius;
 ctx.lineTo(x, y);
 rot += step;
 }
ctx.lineTo(cx, cy - outerRadius);
 ctx.closePath();
 }
function drawGrid() {
 ctx.strokeStyle = 'rgba(30, 41, 59, 0.5)';
 ctx.lineWidth = 0.5;
for (let i = 0; i < tileCount; i++) {
 // Vertical lines
 ctx.beginPath();
 ctx.moveTo(i * gridSize, 0);
 ctx.lineTo(i * gridSize, canvas.height);
 ctx.stroke();
// Horizontal lines
 ctx.beginPath();
 ctx.moveTo(0, i * gridSize);
 ctx.lineTo(canvas.width, i * gridSize);
 ctx.stroke();
 }
 }
function drawBackground() {
 // Gradient background
 const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
 gradient.addColorStop(0, '#0f172a');
 gradient.addColorStop(1, '#1e293b');
 ctx.fillStyle = gradient;
 ctx.fillRect(0, 0, canvas.width, canvas.height);
// Add subtle star effect
 if (Math.random() < 0.02) {
 const x = Math.random() * canvas.width;
 const y = Math.random() * canvas.height;
 const size = Math.random() * 2 + 1;
 const opacity = Math.random() * 0.5 + 0.3;
ctx.fillStyle = `rgba(255, 255, 255, ${opacity})`;
 ctx.beginPath();
 ctx.arc(x, y, size, 0, Math.PI * 2);
 ctx.fill();
 }
 }
// Game logic
 function update() {
 // Update direction from the next direction buffer
 direction = {...nextDirection};
// Move snake
 const head = {x: snake[0].x + direction.x, y: snake[0].y + direction.y};
// Check wall collision (unless invincible)
 if (!invincible && (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount)) {
 createParticles(
 head.x * gridSize + gridSize / 2,
 head.y * gridSize + gridSize / 2,
 '#ef4444',
 30
 );
 gameOver();
 return;
 }
// Wrap around if invincible
 if (invincible) {
 if (head.x < 0) head.x = tileCount - 1;
 if (head.x >= tileCount) head.x = 0;
 if (head.y < 0) head.y = tileCount - 1;
 if (head.y >= tileCount) head.y = 0;
 }
// Check self collision (unless invincible)
 if (!invincible) {
 for (let i = 1; i < snake.length; i++) {
 if (head.x === snake[i].x && head.y === snake[i].y) {
 createParticles(
 head.x * gridSize + gridSize / 2,
 head.y * gridSize + gridSize / 2,
 '#ef4444',
 30
 );
 gameOver();
 return;
 }
 }
 }
// Add new head
 snake.unshift(head);
// Check food collision
 if (head.x === food.x && head.y === food.y) {
 // Create food particles
 createParticles(
 food.x * gridSize + gridSize / 2,
 food.y * gridSize + gridSize / 2,
 null, // Random color
 20
 );
// Increase score
 score += 10;
 scoreElement.textContent = score;
// Generate new food (not on snake or power-ups)
 generateFood();
// Increase speed slightly every 50 points
 if (score % 50 === 0 && speed < 15) {
 speed += 0.5;
 }
// Chance to spawn power-up
 if (Math.random() < 0.3 && powerUps.length < 2) {
 generatePowerUp();
 }
 } else {
 // Remove tail if no food eaten
 snake.pop();
 }
// Check power-up collision
 for (let i = powerUps.length - 1; i >= 0; i--) {
 const pu = powerUps[i];
 if (head.x === pu.x && head.y === pu.y) {
 // Apply power-up effect
 applyPowerUp(pu.type);
// Remove power-up
 powerUps.splice(i, 1);
// Create particles
 createParticles(
 pu.x * gridSize + gridSize / 2,
 pu.y * gridSize + gridSize / 2,
 '#eab308',
 25
 );
 }
 }
// Update power-up timer
 if (powerUpTimer > 0) {
 powerUpTimer--;
 if (powerUpTimer === 0) {
 invincible = false;
 rainbowMode = false;
 }
 }
// Update rainbow timer
 if (rainbowTimer > 0) {
 rainbowTimer--;
 if (rainbowTimer === 0) {
 rainbowMode = false;
 }
 }
 }
function applyPowerUp(type) {
 switch(type) {
 case 'invincible':
 invincible = true;
 powerUpTimer = 300; // 5 seconds at 60fps
 break;
 case 'rainbow':
 rainbowMode = true;
 rainbowTimer = 450; // 7.5 seconds at 60fps
 break;
 case 'speed':
 speed = Math.max(5, speed - 2); // Slow down
 powerUpTimer = 300;
 break;
 }
// Add score bonus
 score += 50;
 scoreElement.textContent = score;
 }
function generateFood() {
 let validPosition = false;
while (!validPosition) {
 food = {
 x: Math.floor(Math.random() * tileCount),
 y: Math.floor(Math.random() * tileCount)
 };
// Check if food is on snake or power-ups
 validPosition = true;
for (let segment of snake) {
 if (segment.x === food.x && segment.y === food.y) {
 validPosition = false;
 break;
 }
 }
if (validPosition) {
 for (let pu of powerUps) {
 if (pu.x === food.x && pu.y === food.y) {
 validPosition = false;
 break;
 }
 }
 }
 }
 }
function generatePowerUp() {
 let validPosition = false;
 const types = ['invincible', 'rainbow', 'speed'];
 const type = types[Math.floor(Math.random() * types.length)];
while (!validPosition) {
 const pu = {
 x: Math.floor(Math.random() * tileCount),
 y: Math.floor(Math.random() * tileCount),
 type: type
 };
// Check if power-up is on snake or food
 validPosition = true;
for (let segment of snake) {
 if (segment.x === pu.x && segment.y === pu.y) {
 validPosition = false;
 break;
 }
 }
if (validPosition && (food.x === pu.x && food.y === pu.y)) {
 validPosition = false;
 }
if (validPosition) {
 for (let existingPu of powerUps) {
 if (existingPu.x === pu.x && existingPu.y === pu.y) {
 validPosition = false;
 break;
 }
 }
 }
if (validPosition) {
 powerUps.push(pu);
 break;
 }
 }
 }
function gameOver() {
 cancelAnimationFrame(gameLoop);
 gameRunning = false;
// Update high score
 if (score > highScore) {
 highScore = score;
 localStorage.setItem('snakeHighScore', highScore);
 highScoreElement.textContent = highScore;
 }
finalScoreElement.textContent = score;
 finalHighScoreElement.textContent = highScore;
 gameOverScreen.classList.remove('hidden');
 }
function resetGame() {
 snake = [{x: 10, y: 10}];
 direction = {x: 0, y: 0};
 nextDirection = {x: 0, y: 0};
 score = 0;
 scoreElement.textContent = score;
 speed = 7;
 powerUps = [];
 particles = [];
 trails = [];
 invincible = false;
 rainbowMode = false;
 powerUpTimer = 0;
 rainbowTimer = 0;
 generateFood();
 gameOverScreen.classList.add('hidden');
 }
function gameLoop(timestamp) {
 if (!gameRunning) return;
const secondsSinceLastRender = (timestamp - lastRenderTime) / 1000;
 if (secondsSinceLastRender < 1 / speed) {
 requestAnimationFrame(gameLoop);
 return;
 }
 lastRenderTime = timestamp;
drawBackground();
 drawGrid();
 updateParticles();
 drawParticles();
 drawPowerUps();
 drawFood();
 drawSnake();
 update();
requestAnimationFrame(gameLoop);
 }
function startGame() {
 resetGame();
 startScreen.classList.add('hidden');
 gameRunning = true;
 lastRenderTime = 0;
 requestAnimationFrame(gameLoop);
 }
// Event listeners
 document.addEventListener('keydown', (e) => {
 if (!gameRunning && (e.key === ' ' || e.key === 'Enter')) {
 startGame();
 return;
 }
// Prevent reverse direction
 switch (e.key) {
 case 'ArrowUp':
 case 'w':
 case 'W':
 if (direction.y === 0) nextDirection = {x: 0, y: -1};
 break;
 case 'ArrowDown':
 case 's':
 case 'S':
 if (direction.y === 0) nextDirection = {x: 0, y: 1};
 break;
 case 'ArrowLeft':
 case 'a':
 case 'A':
 if (direction.x === 0) nextDirection = {x: -1, y: 0};
 break;
 case 'ArrowRight':
 case 'd':
 case 'D':
 if (direction.x === 0) nextDirection = {x: 1, y: 0};
 break;
 }
 });
// Mobile control buttons
 document.getElementById('upBtn').addEventListener('touchstart', (e) => {
 e.preventDefault();
 if (direction.y === 0) nextDirection = {x: 0, y: -1};
 });
document.getElementById('downBtn').addEventListener('touchstart', (e) => {
 e.preventDefault();
 if (direction.y === 0) nextDirection = {x: 0, y: 1};
 });
document.getElementById('leftBtn').addEventListener('touchstart', (e) => {
 e.preventDefault();
 if (direction.x === 0) nextDirection = {x: -1, y: 0};
 });
document.getElementById('rightBtn').addEventListener('touchstart', (e) => {
 e.preventDefault();
 if (direction.x === 0) nextDirection = {x: 1, y: 0};
 });
// Mouse controls for desktop (click to change direction)
 canvas.addEventListener('click', (e) => {
 if (!gameRunning) return;
const rect = canvas.getBoundingClientRect();
 const clickX = e.clientX - rect.left;
 const clickY = e.clientY - rect.top;
 const headX = snake[0].x * gridSize + gridSize / 2;
 const headY = snake[0].y * gridSize + gridSize / 2;
const diffX = clickX - headX;
 const diffY = clickY - headY;
// Determine direction based on click position relative to head
 if (Math.abs(diffX) > Math.abs(diffY)) {
 // Horizontal movement
 if (diffX > 0 && direction.x === 0) {
 nextDirection = {x: 1, y: 0}; // Right
 } else if (diffX < 0 && direction.x === 0) {
 nextDirection = {x: -1, y: 0}; // Left
 }
 } else {
 // Vertical movement
 if (diffY > 0 && direction.y === 0) {
 nextDirection = {x: 0, y: 1}; // Down
 } else if (diffY < 0 && direction.y === 0) {
 nextDirection = {x: 0, y: -1}; // Up
 }
 }
 });
// Touch controls for mobile (swipe)
 let touchStartX = 0;
 let touchStartY = 0;
canvas.addEventListener('touchstart', (e) => {
 touchStartX = e.touches[0].clientX;
 touchStartY = e.touches[0].clientY;
 e.preventDefault();
 }, { passive: false });
canvas.addEventListener('touchmove', (e) => {
 if (!touchStartX || !touchStartY || !gameRunning) return;
const touchEndX = e.touches[0].clientX;
 const touchEndY = e.touches[0].clientY;
const diffX = touchStartX - touchEndX;
 const diffY = touchStartY - touchEndY;
// Determine swipe direction
 if (Math.abs(diffX) > Math.abs(diffY)) {
 // Horizontal swipe
 if (diffX > 30 && direction.x === 0) {
 nextDirection = {x: -1, y: 0}; // Left swipe
 touchStartX = 0;
 touchStartY = 0;
 } else if (diffX < -30 && direction.x === 0) {
 nextDirection = {x: 1, y: 0}; // Right swipe
 touchStartX = 0;
 touchStartY = 0;
 }
 } else {
 // Vertical swipe
 if (diffY > 30 && direction.y === 0) {
 nextDirection = {x: 0, y: -1}; // Up swipe
 touchStartX = 0;
 touchStartY = 0;
 } else if (diffY < -30 && direction.y === 0) {
 nextDirection = {x: 0, y: 1}; // Down swipe
 touchStartX = 0;
 touchStartY = 0;
 }
 }
e.preventDefault();
 }, { passive: false });
// Button event listeners
 startButton.addEventListener('click', startGame);
 restartButton.addEventListener('click', startGame);
// Keyboard controls for buttons (accessibility)
 startButton.addEventListener('keydown', (e) => {
 if (e.key === 'Enter' || e.key === ' ') {
 startGame();
 }
 });
restartButton.addEventListener('keydown', (e) => {
 if (e.key === 'Enter' || e.key === ' ') {
 startGame();
 }
 });
// Initial draw
 drawBackground();
 drawGrid();
 drawFood();
 drawSnake();
// Show mobile controls only on touch devices
 if ('ontouchstart' in window || navigator.maxTouchPoints) {
 mobileControls.classList.remove('hidden');
 } else {
 mobileControls.classList.add('hidden');
 }
 });
 </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=pijou/snake" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>