| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Slither Game</title> |
| | <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| | <style> |
| | body { |
| | margin: 0; |
| | overflow: hidden; |
| | background: #000; |
| | } |
| | canvas { |
| | display: block; |
| | } |
| | </style> |
| | </head> |
| | <body> |
| | <canvas id="gameCanvas"></canvas> |
| | |
| | <script> |
| | const canvas = document.getElementById('gameCanvas'); |
| | const ctx = canvas.getContext('2d'); |
| | |
| | canvas.width = window.innerWidth; |
| | canvas.height = window.innerHeight; |
| | |
| | |
| | const player = { |
| | x: canvas.width / 2, |
| | y: canvas.height / 2, |
| | size: 10, |
| | speed: 3, |
| | trail: [], |
| | maxTrail: 100, |
| | color: '#00FF00' |
| | }; |
| | |
| | const food = { |
| | x: Math.random() * canvas.width, |
| | y: Math.random() * canvas.height, |
| | size: 5, |
| | color: '#FF0000' |
| | }; |
| | |
| | let direction = { x: 0, y: 0 }; |
| | |
| | |
| | window.addEventListener('mousemove', (e) => { |
| | const angle = Math.atan2(e.clientY - player.y, e.clientX - player.x); |
| | direction.x = Math.cos(angle) * player.speed; |
| | direction.y = Math.sin(angle) * player.speed; |
| | }); |
| | |
| | |
| | window.addEventListener('touchmove', (e) => { |
| | e.preventDefault(); |
| | const touch = e.touches[0]; |
| | const angle = Math.atan2(touch.clientY - player.y, touch.clientX - player.x); |
| | direction.x = Math.cos(angle) * player.speed; |
| | direction.y = Math.sin(angle) * player.speed; |
| | }); |
| | |
| | function gameLoop() { |
| | |
| | ctx.fillStyle = '#000'; |
| | ctx.fillRect(0, 0, canvas.width, canvas.height); |
| | |
| | |
| | player.x += direction.x; |
| | player.y += direction.y; |
| | |
| | |
| | if (player.x < 0) player.x = canvas.width; |
| | if (player.x > canvas.width) player.x = 0; |
| | if (player.y < 0) player.y = canvas.height; |
| | if (player.y > canvas.height) player.y = 0; |
| | |
| | |
| | player.trail.push({ x: player.x, y: player.y }); |
| | if (player.trail.length > player.maxTrail) { |
| | player.trail.shift(); |
| | } |
| | |
| | |
| | for (let i = 0; i < player.trail.length; i++) { |
| | const segment = player.trail[i]; |
| | const size = player.size * (i / player.trail.length); |
| | ctx.fillStyle = player.color; |
| | ctx.beginPath(); |
| | ctx.arc(segment.x, segment.y, size, 0, Math.PI * 2); |
| | ctx.fill(); |
| | } |
| | |
| | |
| | ctx.fillStyle = player.color; |
| | ctx.beginPath(); |
| | ctx.arc(player.x, player.y, player.size, 0, Math.PI * 2); |
| | ctx.fill(); |
| | |
| | |
| | ctx.fillStyle = food.color; |
| | ctx.beginPath(); |
| | ctx.arc(food.x, food.y, food.size, 0, Math.PI * 2); |
| | ctx.fill(); |
| | |
| | |
| | const dist = Math.sqrt( |
| | Math.pow(player.x - food.x, 2) + |
| | Math.pow(player.y - food.y, 2) |
| | ); |
| | |
| | if (dist < player.size + food.size) { |
| | |
| | player.maxTrail += 50; |
| | |
| | |
| | food.x = Math.random() * canvas.width; |
| | food.y = Math.random() * canvas.height; |
| | } |
| | |
| | requestAnimationFrame(gameLoop); |
| | } |
| | |
| | gameLoop(); |
| | |
| | |
| | window.addEventListener('resize', () => { |
| | canvas.width = window.innerWidth; |
| | canvas.height = window.innerHeight; |
| | }); |
| | </script> |
| | </body> |
| | </html> |
