KEXEL/git
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Slither Game</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <style>9 body {10 margin: 0;11 overflow: hidden;12 background: #000;13 }14 canvas {15 display: block;16 }17 </style>18</head>19<body>20 <canvas id="gameCanvas"></canvas>21 22 <script>23 const canvas = document.getElementById('gameCanvas');24 const ctx = canvas.getContext('2d');25 26 canvas.width = window.innerWidth;27 canvas.height = window.innerHeight;28 29 // Game variables30 const player = {31 x: canvas.width / 2,32 y: canvas.height / 2,33 size: 10,34 speed: 3,35 trail: [],36 maxTrail: 100,37 color: '#00FF00'38 };39 40 const food = {41 x: Math.random() * canvas.width,42 y: Math.random() * canvas.height,43 size: 5,44 color: '#FF0000'45 };46 47 let direction = { x: 0, y: 0 };48 49 // Mouse movement50 window.addEventListener('mousemove', (e) => {51 const angle = Math.atan2(e.clientY - player.y, e.clientX - player.x);52 direction.x = Math.cos(angle) * player.speed;53 direction.y = Math.sin(angle) * player.speed;54 });55 56 // Touch movement (for mobile)57 window.addEventListener('touchmove', (e) => {58 e.preventDefault();59 const touch = e.touches[0];60 const angle = Math.atan2(touch.clientY - player.y, touch.clientX - player.x);61 direction.x = Math.cos(angle) * player.speed;62 direction.y = Math.sin(angle) * player.speed;63 });64 65 function gameLoop() {66 // Clear canvas67 ctx.fillStyle = '#000';68 ctx.fillRect(0, 0, canvas.width, canvas.height);69 70 // Update player position71 player.x += direction.x;72 player.y += direction.y;73 74 // Keep player on screen75 if (player.x < 0) player.x = canvas.width;76 if (player.x > canvas.width) player.x = 0;77 if (player.y < 0) player.y = canvas.height;78 if (player.y > canvas.height) player.y = 0;79 80 // Add current position to trail81 player.trail.push({ x: player.x, y: player.y });82 if (player.trail.length > player.maxTrail) {83 player.trail.shift();84 }85 86 // Draw trail87 for (let i = 0; i < player.trail.length; i++) {88 const segment = player.trail[i];89 const size = player.size * (i / player.trail.length);90 ctx.fillStyle = player.color;91 ctx.beginPath();92 ctx.arc(segment.x, segment.y, size, 0, Math.PI * 2);93 ctx.fill();94 }95 96 // Draw player97 ctx.fillStyle = player.color;98 ctx.beginPath();99 ctx.arc(player.x, player.y, player.size, 0, Math.PI * 2);100 ctx.fill();101 102 // Draw food103 ctx.fillStyle = food.color;104 ctx.beginPath();105 ctx.arc(food.x, food.y, food.size, 0, Math.PI * 2);106 ctx.fill();107 108 // Check collision with food109 const dist = Math.sqrt(110 Math.pow(player.x - food.x, 2) + 111 Math.pow(player.y - food.y, 2)112 );113 114 if (dist < player.size + food.size) {115 // Increase trail length116 player.maxTrail += 50;117 118 // Create new food119 food.x = Math.random() * canvas.width;120 food.y = Math.random() * canvas.height;121 }122 123 requestAnimationFrame(gameLoop);124 }125 126 gameLoop();127 128 // Resize handler129 window.addEventListener('resize', () => {130 canvas.width = window.innerWidth;131 canvas.height = window.innerHeight;132 });133 </script>134</body>135</html>