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