Hugging Face's logo

Spaces:
Yoleo
/
snake-literario
Running

App Files Community
snake-literario / index.html
Yoleo's picture
Yoleo
Add 2 files
fa9d6ca verified
raw
history blame contribute delete
57.5 kB
 <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>炫酷道具贪吃蛇</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, #1a1a2e, #16213e);
color: #fff;
overflow: hidden;
}
.game-container {
position: relative;
box-shadow: 0 0 50px rgba(0, 255, 255, 0.3);
border: 4px solid rgba(0, 255, 255, 0.5);
border-radius: 8px;
overflow: hidden;
}
#game-canvas {
background-color: #0f0f23;
display: block;
}
.snake-cell {
box-shadow: 0 0 10px currentColor;
}
.food-cell {
animation: pulse 1.5s infinite;
}
.powerup-cell {
animation: glow 2s infinite alternate, spin 4s infinite linear;
}
.portal-cell {
animation: portalPulse 2s infinite;
}
.bomb-cell {
animation: bombPulse 1s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
@keyframes glow {
0% { filter: drop-shadow(0 0 5px currentColor); }
100% { filter: drop-shadow(0 0 15px currentColor); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes portalPulse {
0% { box-shadow: 0 0 10px #9c27b0, inset 0 0 10px #9c27b0; }
50% { box-shadow: 0 0 20px #9c27b0, inset 0 0 20px #9c27b0; }
100% { box-shadow: 0 0 10px #9c27b0, inset 0 0 10px #9c27b0; }
}
@keyframes bombPulse {
0% { opacity: 0.7; transform: scale(0.9); }
50% { opacity: 1; transform: scale(1.1); }
100% { opacity: 0.7; transform: scale(0.9); }
}
.score-display {
text-shadow: 0 0 10px #00ffaa;
font-size: 1.5rem;
letter-spacing: 2px;
}
.particle {
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
pointer-events: none;
}
.game-over {
backdrop-filter: blur(5px);
background-color: rgba(0, 0, 0, 0.7);
}
.powerup-indicator {
animation: indicatorPulse 1s infinite alternate;
box-shadow: 0 0 10px currentColor;
}
@keyframes indicatorPulse {
0% { opacity: 0.7; transform: scale(0.9); }
100% { opacity: 1; transform: scale(1.1); }
}
</style>
</head>
<body class="min-h-screen flex flex-col items-center justify-center p-4">
<div class="text-center mb-6">
<h1 class="text-4xl md:text-5xl font-bold mb-2 text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-purple-500">
炫酷道具贪吃蛇
</h1>
<p class="text-amber-400 text-sm md:text-base">AI自动模式已启用 - 按空格键切换手动/自动</p>
</div>
<div class="flex flex-col md:flex-row gap-6 items-center justify-center">
<div class="game-container relative">
<canvas id="game-canvas" width="600" height="600"></canvas>
<div id="game-over" class="game-over absolute inset-0 flex flex-col items-center justify-center hidden">
<h2 class="text-4xl text-red-500 mb-6">游戏结束!</h2>
<p class="text-xl text-white mb-8">最终分数: <span id="final-score" class="text-green-400">0</span></p>
<button id="restart-btn" class="px-6 py-3 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-full font-bold uppercase tracking-wider hover:scale-105 transition-transform">
重新开始
</button>
</div>
</div>
<div class="w-full md:w-64 flex flex-col gap-6">
<div class="bg-gray-900 bg-opacity-70 p-4 rounded-lg border border-cyan-500 border-opacity-30">
<h3 class="text-xl text-cyan-400 mb-3 flex items-center gap-2">
<i class="fas fa-tachometer-alt"></i> 游戏状态
</h3>
<div class="space-y-4">
<div>
<p class="text-gray-400 text-sm mb-1">得分</p>
<p id="score" class="score-display text-2xl text-green-400">0</p>
</div>
<div>
<p class="text-gray-400 text-sm mb-1">长度</p>
<p id="length" class="text-xl text-white">1</p>
</div>
<div>
<p class="text-gray-400 text-sm mb-1">速度</p>
<p id="speed" class="text-xl text-white">1x</p>
</div>
<div>
<p class="text-gray-400 text-sm mb-1">模式</p>
<p id="mode" class="text-xl text-amber-400">AI自动</p>
</div>
</div>
</div>
<div class="bg-gray-900 bg-opacity-70 p-4 rounded-lg border border-purple-500 border-opacity-30">
<h3 class="text-xl text-purple-400 mb-3 flex items-center gap-2">
<i class="fas fa-magic"></i> 道具效果
</h3>
<div class="space-y-3">
<div class="flex items-center gap-3">
<div class="w-6 h-6 rounded-full bg-yellow-400 powerup-indicator" id="speed-indicator"></div>
<p class="text-sm">速度提升 <span id="speed-timer" class="text-yellow-400">0s</span></p>
</div>
<div class="flex items-center gap-3">
<div class="w-6 h-6 rounded-full bg-green-500 powerup-indicator" id="growth-indicator"></div>
<p class="text-sm">快速生长 <span id="growth-timer" class="text-green-500">0s</span></p>
</div>
<div class="flex items-center gap-3">
<div class="w-6 h-6 rounded-full bg-red-500 powerup-indicator" id="invincible-indicator"></div>
<p class="text-sm">无敌状态 <span id="invincible-timer" class="text-red-500">0s</span></p>
</div>
</div>
</div>
<div class="bg-gray-900 bg-opacity-70 p-4 rounded-lg border border-amber-500 border-opacity-30">
<h3 class="text-xl text-amber-400 mb-3 flex items-center gap-2">
<i class="fas fa-info-circle"></i> 道具说明
</h3>
<div class="space-y-3 text-xs">
<div class="flex items-start gap-2">
<div class="w-4 h-4 rounded-full bg-red-500 mt-1 flex-shrink-0"></div>
<p>普通食物 - +1分, 长度+1</p>
</div>
<div class="flex items-start gap-2">
<div class="w-4 h-4 rounded-full bg-yellow-400 mt-1 flex-shrink-0"></div>
<p>速度道具 - 移动速度加快</p>
</div>
<div class="flex items-start gap-2">
<div class="w-4 h-4 rounded-full bg-green-500 mt-1 flex-shrink-0"></div>
<p>生长道具 - 每次移动长度增加</p>
</div>
<div class="flex items-start gap-2">
<div class="w-4 h-4 rounded-full bg-blue-400 mt-1 flex-shrink-0"></div>
<p>无敌道具 - 可以穿过墙壁和身体</p>
</div>
<div class="flex items-start gap-2">
<div class="w-4 h-4 rounded-full bg-purple-500 mt-1 flex-shrink-0"></div>
<p>传送门 - 传送到随机位置</p>
</div>
<div class="flex items-start gap-2">
<div class="w-4 h-4 rounded-full bg-orange-500 mt-1 flex-shrink-0"></div>
<p>炸弹 - 长度减半</p>
</div>
</div>
</div>
</div>
</div>
<div class="mt-8 text-gray-400 text-xs">
<p>使用方向键或WASD控制 | 空格键切换手动/AI模式 | 躲避炸弹</p>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
// 游戏常量
const CELL_SIZE = 20;
const CELLS_X = 30;
const CELLS_Y = 30;
const FPS = 60;
const BASE_SPEED = 5; // 每x帧移动一次
const SPEED_INCREASE = 0.95; // 每次吃到食物速度增加系数
// 道具类型
const ITEM_TYPES = {
FOOD: { color: '#f44336', score: 1, grow: 1, lifetime: 0 },
SPEED: { color: '#ffeb3b', score: 2, grow: 0, lifetime: 10, effect: 'speed' },
GROWTH: { color: '#4caf50', score: 2, grow: 0, lifetime: 10, effect: 'growth' },
INVINCIBLE: { color: '#2196f3', score: 3, grow: 0, lifetime: 8, effect: 'invincible' },
PORTAL: { color: '#9c27b0', score: 0, grow: -1, lifetime: 0 },
BOMB: { color: '#ff9800', score: 0, grow: -0.5, lifetime: 0 }
};
// 游戏变量
let canvas = document.getElementById('game-canvas');
let ctx = canvas.getContext('2d');
let snake = [];
let direction = 'right';
let nextDirection = 'right';
let gameLoopInterval;
let gameSpeed = BASE_SPEED;
let speedCounter = 0;
let score = 0;
let items = [];
let particles = [];
let activeEffects = {};
let isGameOver = false;
let isAutoMode = true;
let lastPortalTime = 0;
let portalCooldown = 3; // seconds
// DOM 元素
const scoreElement = document.getElementById('score');
const lengthElement = document.getElementById('length');
const speedElement = document.getElementById('speed');
const modeElement = document.getElementById('mode');
const gameOverElement = document.getElementById('game-over');
const finalScoreElement = document.getElementById('final-score');
const restartButton = document.getElementById('restart-btn');
const speedIndicator = document.getElementById('speed-indicator');
const growthIndicator = document.getElementById('growth-indicator');
const invincibleIndicator = document.getElementById('invincible-indicator');
const speedTimer = document.getElementById('speed-timer');
const growthTimer = document.getElementById('growth-timer');
const invincibleTimer = document.getElementById('invincible-timer');
// 初始化游戏
function initGame() {
// 重置游戏状态
snake = [
{ x: 5, y: 15 },
{ x: 4, y: 15 },
{ x: 3, y: 15 }
];
direction = 'right';
nextDirection = 'right';
gameSpeed = BASE_SPEED;
speedCounter = 0;
score = 0;
items = [];
particles = [];
activeEffects = {};
isGameOver = false;
// 更新UI
updateScore(0);
lengthElement.textContent = snake.length;
speedElement.textContent = '1x';
modeElement.textContent = isAutoMode ? 'AI自动' : '手动控制';
modeElement.className = isAutoMode ? 'text-xl text-amber-400' : 'text-xl text-white';
// 隐藏游戏结束画面
gameOverElement.classList.add('hidden');
// 创建初始食物
createRandomItem(ITEM_TYPES.FOOD);
// 开始游戏循环
if (gameLoopInterval) clearInterval(gameLoopInterval);
gameLoopInterval = setInterval(gameLoop, 1000 / FPS);
}
// 游戏主循环
function gameLoop() {
// 清除画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 更新计时器
speedCounter++;
updateEffects();
// AI控制
if (isAutoMode && speedCounter % 2 === 0) {
aiControl();
}
// 每gameSpeed帧移动一次
if (speedCounter >= gameSpeed) {
moveSnake();
speedCounter = 0;
}
// 绘制网格线
drawGrid();
// 绘制道具
drawItems();
// 绘制蛇
drawSnake();
// 绘制粒子效果
drawParticles();
// 更新粒子
updateParticles();
// 随机生成道具
if (Math.random() < 0.002) { // 0.2% 每帧的几率
const availableTypes = Object.values(ITEM_TYPES).filter(type =>
type !== ITEM_TYPES.FOOD &&
(!activeEffects[type.effect] || type.effect === undefined)
);
if (availableTypes.length > 0) {
const randomType = availableTypes[Math.floor(Math.random() * availableTypes.length)];
createRandomItem(randomType);
}
}
}
// 绘制网格线
function drawGrid() {
ctx.strokeStyle = 'rgba(255, 255, 255, 0.05)';
ctx.lineWidth = 1;
// 垂直线
for (let x = 0; x <= CELLS_X; x++) {
ctx.beginPath();
ctx.moveTo(x * CELL_SIZE, 0);
ctx.lineTo(x * CELL_SIZE, CELLS_Y * CELL_SIZE);
ctx.stroke();
}
// 水平线
for (let y = 0; y <= CELLS_Y; y++) {
ctx.beginPath();
ctx.moveTo(0, y * CELL_SIZE);
ctx.lineTo(CELLS_X * CELL_SIZE, y * CELL_SIZE);
ctx.stroke();
}
}
// 移动蛇
function moveSnake() {
direction = nextDirection;
// 创建新头部
const head = { ...snake[0] };
switch (direction) {
case 'up': head.y--; break;
case 'down': head.y++; break;
case 'left': head.x--; break;
case 'right': head.x++; break;
}
// 检查是否撞墙（无敌状态下可以穿过墙壁）
if (!activeEffects.invincible) {
if (head.x < 0 || head.x >= CELLS_X || head.y < 0 || head.y >= CELLS_Y) {
gameOver();
return;
}
} else {
// 穿墙处理
if (head.x < 0) head.x = CELLS_X - 1;
if (head.x >= CELLS_X) head.x = 0;
if (head.y < 0) head.y = CELLS_Y - 1;
if (head.y >= CELLS_Y) head.y = 0;
}
// 检查是否撞到自己（无敌状态下可以穿过自己）
if (!activeEffects.invincible) {
for (let i = 0; i < snake.length - 1; i++) {
if (head.x === snake[i].x && head.y === snake[i].y) {
gameOver();
return;
}
}
}
// 添加到头部
snake.unshift(head);
// 检查是否吃到道具
let itemConsumed = false;
let itemIndex = -1;
for (let i = 0; i < items.length; i++) {
const item = items[i];
if (head.x === item.x && head.y === item.y) {
itemIndex = i;
// 应用道具效果
if (item.type.effect) {
activateEffect(item.type.effect, item.type.lifetime);
}
// 处理特殊道具
if (item.type === ITEM_TYPES.PORTAL) {
if (Date.now() - lastPortalTime > portalCooldown * 1000) {
teleportSnake();
lastPortalTime = Date.now();
} else {
continue; // 跳过传送门，因为冷却中
}
}
if (item.type === ITEM_TYPES.BOMB) {
createExplosion(head.x, head.y);
}
// 更新分数和长度
updateScore(score + item.type.score);
// 生长处理 (正数=增加长度，负数=减少长度)
if (item.type.grow > 0) {
// 如果吃的生长道具，额外添加几节
if (activeEffects.growth) {
for (let j = 0; j < 2; j++) {
snake.push({ ...snake[snake.length - 1] });
}
}
} else if (item.type.grow < 0) {
// 炸弹效果
const newLength = Math.ceil(snake.length / (Math.abs(item.type.grow) + 1));
snake = snake.slice(0, newLength);
if (snake.length < 1) {
gameOver();
return;
}
}
// 粒子效果
createParticles(head.x, head.y, item.type.color);
itemConsumed = true;
break;
}
}
// 移除吃到的道具
if (itemConsumed && itemIndex !== -1) {
items.splice(itemIndex, 1);
// 如果吃的是普通食物，创建新的食物
if (items.filter(item => item.type === ITEM_TYPES.FOOD).length < 1) {
createRandomItem(ITEM_TYPES.FOOD);
}
} else {
// 如果没有吃到道具，移除尾部
snake.pop();
}
// 快速生长效果
if (activeEffects.growth) {
snake.push({ ...snake[snake.length - 1] });
}
// 更新长度显示
lengthElement.textContent = snake.length;
}
// 绘制蛇
function drawSnake() {
const head = snake[0];
// 绘制身体
for (let i = 0; i < snake.length; i++) {
const segment = snake[i];
const isHead = i === 0;
let color;
if (isHead) {
if (activeEffects.invincible) {
// 头部无敌效果
color = `hsl(${(Date.now() / 20) % 360}, 100%, 60%)`;
} else {
color = '#00ffaa';
}
} else {
// 彩虹身体效果
const hue = (240 + i * 1) % 360;
color = `hsl(${hue}, 100%, 60%)`;
}
// 绘制蛇节
ctx.fillStyle = color;
ctx.beginPath();
ctx.roundRect(
segment.x * CELL_SIZE + 1,
segment.y * CELL_SIZE + 1,
CELL_SIZE - 2,
CELL_SIZE - 2,
4
);
ctx.fill();
// 添加视觉层次效果
if (i > 0) {
ctx.fillStyle = `rgba(255, 255, 255, 0.1)`;
ctx.beginPath();
ctx.roundRect(
segment.x * CELL_SIZE + 4,
segment.y * CELL_SIZE + 4,
CELL_SIZE - 8,
CELL_SIZE - 8,
2
);
ctx.fill();
}
// 如果是头部，添加眼睛
if (isHead) {
const eyeSize = CELL_SIZE * 0.15;
const eyeOffset = CELL_SIZE * 0.2;
ctx.fillStyle = 'white';
// 根据方向绘制眼睛
if (direction === 'right' || direction === 'left') {
// 水平方向 - 上下两只眼睛
ctx.beginPath();
ctx.arc(
segment.x * CELL_SIZE + (direction === 'right' ? CELL_SIZE - eyeOffset : eyeOffset),
segment.y * CELL_SIZE + eyeOffset,
eyeSize, 0, Math.PI * 2
);
ctx.fill();
ctx.beginPath();
ctx.arc(
segment.x * CELL_SIZE + (direction === 'right' ? CELL_SIZE - eyeOffset : eyeOffset),
segment.y * CELL_SIZE + CELL_SIZE - eyeOffset,
eyeSize, 0, Math.PI * 2
);
ctx.fill();
} else {
// 垂直方向 - 左右两只眼睛
ctx.beginPath();
ctx.arc(
segment.x * CELL_SIZE + eyeOffset,
segment.y * CELL_SIZE + (direction === 'down' ? CELL_SIZE - eyeOffset : eyeOffset),
eyeSize, 0, Math.PI * 2
);
ctx.fill();
ctx.beginPath();
ctx.arc(
segment.x * CELL_SIZE + CELL_SIZE - eyeOffset,
segment.y * CELL_SIZE + (direction === 'down' ? CELL_SIZE - eyeOffset : eyeOffset),
eyeSize, 0, Math.PI * 2
);
ctx.fill();
}
// 瞳孔
const pupilSize = eyeSize * 0.6;
ctx.fillStyle = '#333';
if (direction === 'right' || direction === 'left') {
// 水平方向
ctx.beginPath();
ctx.arc(
segment.x * CELL_SIZE + (direction === 'right' ? CELL_SIZE - eyeOffset : eyeOffset),
segment.y * CELL_SIZE + eyeOffset,
pupilSize, 0, Math.PI * 2
);
ctx.fill();
ctx.beginPath();
ctx.arc(
segment.x * CELL_SIZE + (direction === 'right' ? CELL_SIZE - eyeOffset : eyeOffset),
segment.y * CELL_SIZE + CELL_SIZE - eyeOffset,
pupilSize, 0, Math.PI * 2
);
ctx.fill();
} else {
// 垂直方向
ctx.beginPath();
ctx.arc(
segment.x * CELL_SIZE + eyeOffset,
segment.y * CELL_SIZE + (direction === 'down' ? CELL_SIZE - eyeOffset : eyeOffset),
pupilSize, 0, Math.PI * 2
);
ctx.fill();
ctx.beginPath();
ctx.arc(
segment.x * CELL_SIZE + CELL_SIZE - eyeOffset,
segment.y * CELL_SIZE + (direction === 'down' ? CELL_SIZE - eyeOffset : eyeOffset),
pupilSize, 0, Math.PI * 2
);
ctx.fill();
}
}
}
}
// 绘制道具
function drawItems() {
for (const item of items) {
const itemX = item.x * CELL_SIZE + CELL_SIZE / 2;
const itemY = item.y * CELL_SIZE + CELL_SIZE / 2;
const itemSize = CELL_SIZE * 0.6;
ctx.save();
ctx.translate(itemX, itemY);
// 不同类型的绘制效果
switch (item.type) {
case ITEM_TYPES.FOOD:
// 普通食物 - 圆形
ctx.fillStyle = item.type.color;
ctx.beginPath();
ctx.arc(0, 0, itemSize / 2, 0, Math.PI * 2);
ctx.fill();
// 高光
ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
ctx.beginPath();
ctx.arc(-itemSize / 4, -itemSize / 4, itemSize / 5, 0, Math.PI * 2);
ctx.fill();
break;
case ITEM_TYPES.SPEED:
// 速度道具 - 闪电形状
ctx.fillStyle = item.type.color;
ctx.beginPath();
ctx.moveTo(-itemSize / 2, -itemSize / 4);
ctx.lineTo(itemSize / 4, 0);
ctx.lineTo(-itemSize / 4, 0);
ctx.lineTo(itemSize / 2, itemSize / 4);
ctx.lineTo(-itemSize / 4, itemSize / 4);
ctx.lineTo(itemSize / 4, -itemSize / 4);
ctx.closePath();
ctx.fill();
break;
case ITEM_TYPES.GROWTH:
// 生长道具 - 加号形状
ctx.fillStyle = item.type.color;
ctx.fillRect(-itemSize / 8, -itemSize / 2, itemSize / 4, itemSize);
ctx.fillRect(-itemSize / 2, -itemSize / 8, itemSize, itemSize / 4);
break;
case ITEM_TYPES.INVINCIBLE:
// 无敌道具 - 星星形状
ctx.fillStyle = item.type.color;
ctx.beginPath();
for (let i = 0; i < 5; i++) {
ctx.lineTo(
0,
-itemSize / 2
);
ctx.rotate(Math.PI / 5);
ctx.lineTo(
0,
-itemSize / 5
);
ctx.rotate(Math.PI / 5);
}
ctx.closePath();
ctx.fill();
break;
case ITEM_TYPES.PORTAL:
// 传送门 - 环形
ctx.fillStyle = item.type.color;
ctx.beginPath();
ctx.arc(0, 0, itemSize / 2, 0, Math.PI * 2);
ctx.fill();
ctx.fillStyle = '#0f0f23';
ctx.beginPath();
ctx.arc(0, 0, itemSize / 3, 0, Math.PI * 2);
ctx.fill();
// 动态环
ctx.strokeStyle = item.type.color;
ctx.lineWidth = 2;
ctx.beginPath();
ctx.arc(0, 0, itemSize / 2 - 2, 0, Math.PI * (1 + performance.now() / 1000 % 1));
ctx.stroke();
break;
case ITEM_TYPES.BOMB:
// 炸弹 - 圆形带引线
ctx.fillStyle = item.type.color;
ctx.beginPath();
ctx.arc(0, 0, itemSize / 2, 0, Math.PI * 2);
ctx.fill();
// 引线
ctx.strokeStyle = '#333';
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(itemSize / 2, -itemSize / 4);
ctx.lineTo(itemSize / 2 + 5, -itemSize / 2);
ctx.stroke();
// 火花
ctx.fillStyle = `hsl(${(Date.now() / 30) % 360}, 100%, 60%)`;
ctx.beginPath();
ctx.arc(itemSize / 2 + 5, -itemSize / 2, 2, 0, Math.PI * 2);
ctx.fill();
break;
}
ctx.restore();
}
}
// 创建随机道具
function createRandomItem(type) {
const item = {
x: Math.floor(Math.random() * CELLS_X),
y: Math.floor(Math.random() * CELLS_Y),
type: type,
createdAt: Date.now()
};
// 确保道具不会生成在蛇身上
let isValidPosition = true;
for (const segment of snake) {
if (segment.x === item.x && segment.y === item.y) {
isValidPosition = false;
break;
}
}
// 确保道具不会重叠
for (const existingItem of items) {
if (existingItem.x === item.x && existingItem.y === item.y) {
isValidPosition = false;
break;
}
}
if (isValidPosition) {
items.push(item);
return true;
} else {
// 如果位置无效，尝试递归创建（最多3次）
return createRandomItem(type);
}
}
// 更新分数
function updateScore(newScore) {
score = newScore;
scoreElement.textContent = score;
// 随着分数增加，速度会提升
const speedMultiplier = 1 + score * 0.005;
gameSpeed = Math.max(BASE_SPEED * SPEED_INCREASE ** (score / 5), 3);
speedElement.textContent = speedMultiplier.toFixed(1) + 'x';
}
// 游戏结束
function gameOver() {
isGameOver = true;
clearInterval(gameLoopInterval);
// 显示游戏结束画面
finalScoreElement.textContent = score;
gameOverElement.classList.remove('hidden');
// 创建爆炸效果
createExplosion(snake[0].x, snake[0].y);
}
// 传送蛇
function teleportSnake() {
// 找到有效位置
let newX, newY;
let attempts = 0;
const maxAttempts = 100;
do {
newX = Math.floor(Math.random() * (CELLS_X - 10)) + 5;
newY = Math.floor(Math.random() * (CELLS_Y - 10)) + 5;
attempts++;
} while (
(attempts < maxAttempts) &&
items.some(item => item.x === newX && item.y === newY)
);
if (attempts < maxAttempts) {
// 计算偏移量
const offsetX = newX - snake[0].x;
const offsetY = newY - snake[0].y;
// 重新定位整条蛇
for (let i = 0; i < snake.length; i++) {
snake[i].x += offsetX;
snake[i].y += offsetY;
// 确保蛇不会超出边界
if (snake[i].x < 0) snake[i].x = 0;
if (snake[i].x >= CELLS_X) snake[i].x = CELLS_X - 1;
if (snake[i].y < 0) snake[i].y = 0;
if (snake[i].y >= CELLS_Y) snake[i].y = CELLS_Y - 1;
}
// 传送门粒子效果
createPortalEffect(snake[0].x, snake[0].y);
}
}
// 激活效果
function activateEffect(effect, duration) {
// 重置或延长已有效果
if (activeEffects[effect]) {
clearTimeout(activeEffects[effect].timeout);
}
activeEffects[effect] = {
startTime: Date.now(),
duration: duration * 1000, // 转换为毫秒
timeout: setTimeout(() => {
delete activeEffects[effect];
updateEffectIndicators();
}, duration * 1000)
};
// 应用效果
switch (effect) {
case 'speed':
break;
case 'growth':
break;
case 'invincible':
break;
}
updateEffectIndicators();
}
// 更新效果计时器显示
function updateEffects() {
const now = Date.now();
for (const effect in activeEffects) {
const remaining = Math.max(0, (activeEffects[effect].startTime + activeEffects[effect].duration - now) / 1000);
switch (effect) {
case 'speed':
speedTimer.textContent = remaining.toFixed(1) + 's';
break;
case 'growth':
growthTimer.textContent = remaining.toFixed(1) + 's';
break;
case 'invincible':
invincibleTimer.textContent = remaining.toFixed(1) + 's';
break;
}
}
}
// 更新效果指示器
function updateEffectIndicators() {
speedIndicator.style.display = activeEffects.speed ? 'block' : 'none';
growthIndicator.style.display = activeEffects.growth ? 'block' : 'none';
invincibleIndicator.style.display = activeEffects.invincible ? 'block' : 'none';
speedTimer.textContent = '0s';
growthTimer.textContent = '0s';
invincibleTimer.textContent = '0s';
}
// 创建粒子效果
function createParticles(x, y, color) {
const particleCount = 20;
const centerX = x * CELL_SIZE + CELL_SIZE / 2;
const centerY = y * CELL_SIZE + CELL_SIZE / 2;
for (let i = 0; i < particleCount; i++) {
const angle = Math.random() * Math.PI * 2;
const speed = Math.random() * 3 + 1;
const size = Math.random() * 4 + 2;
const lifetime = Math.random() * 1000 + 500;
particles.push({
x: centerX,
y: centerY,
vx: Math.cos(angle) * speed,
vy: Math.sin(angle) * speed,
size: size,
color: color,
life: lifetime,
maxLife: lifetime,
alpha: 1
});
}
}
// 创建爆炸效果
function createExplosion(x, y) {
const particleCount = 50;
const centerX = x * CELL_SIZE + CELL_SIZE / 2;
const centerY = y * CELL_SIZE + CELL_SIZE / 2;
for (let i = 0; i < particleCount; i++) {
const angle = Math.random() * Math.PI * 2;
const speed = Math.random() * 5 + 2;
const size = Math.random() * 6 + 3;
const lifetime = Math.random() * 1500 + 500;
const hue = Math.random() * 60; // 橙红色调
particles.push({
x: centerX,
y: centerY,
vx: Math.cos(angle) * speed,
vy: Math.sin(angle) * speed,
size: size,
color: `hsl(${hue}, 100%, 50%)`,
life: lifetime,
maxLife: lifetime,
alpha: 1
});
}
}
// 创建传送门效果
function createPortalEffect(x, y) {
const particleCount = 40;
const centerX = x * CELL_SIZE + CELL_SIZE / 2;
const centerY = y * CELL_SIZE + CELL_SIZE / 2;
for (let i = 0; i < particleCount; i++) {
const angle = Math.random() * Math.PI * 2;
const radius = Math.random() * 20 + 10;
const startRadius = 0;
const endRadius = radius * 2;
const speed = Math.random() * 0.5 + 0.5;
const size = Math.random() * 3 + 2;
const lifetime = Math.random() * 2000 + 1000;
const hue = Math.random() * 40 + 280; // 紫色调
particles.push({
x: centerX + Math.cos(angle) * startRadius,
y: centerY + Math.sin(angle) * startRadius,
vx: Math.cos(angle) * speed,
vy: Math.sin(angle) * speed,
targetX: centerX + Math.cos(angle) * endRadius,
targetY: centerY + Math.sin(angle) * endRadius,
size: size,
color: `hsl(${hue}, 100%, 60%)`,
life: lifetime,
maxLife: lifetime,
alpha: 1,
isPortal: true
});
}
}
// 更新粒子
function updateParticles() {
for (let i = particles.length - 1; i >= 0; i--) {
const p = particles[i];
// 更新位置
p.x += p.vx;
p.y += p.vy;
// 如果是传送门粒子，移动到目标位置
if (p.isPortal && p.targetX && p.targetY) {
const dx = p.targetX - p.x;
const dy = p.targetY - p.y;
const dist = Math.sqrt(dx * dx + dy * dy);
p.vx = dx / dist * p.vx * 2;
p.vy = dy / dist * p.vy * 2;
if (dist < 5) {
p.life = 0; // 到达目标后立即消失
}
} else {
// 重力效果
p.vy += 0.05;
// 摩擦力
p.vx *= 0.98;
p.vy *= 0.98;
}
// 更新生命周期
p.life -= 1000 / FPS;
p.alpha = p.life / p.maxLife;
// 移除死亡的粒子
if (p.life <= 0) {
particles.splice(i, 1);
}
}
}
// 绘制粒子
function drawParticles() {
for (const p of particles) {
ctx.globalAlpha = p.alpha;
ctx.fillStyle = p.color;
ctx.beginPath();
ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
ctx.fill();
}
ctx.globalAlpha = 1;
}
// AI控制算法
function aiControl() {
const head = snake[0];
const food = items.filter(item => item.type === ITEM_TYPES.FOOD)[0];
const dangerousItems = items.filter(item => item.type === ITEM_TYPES.BOMB);
// 如果没有食物，保持移动
if (!food) {
return;
}
// 计算到食物的方向
const dx = food.x - head.x;
const dy = food.y - head.y;
const adx = Math.abs(dx);
const ady = Math.abs(dy);
// 计算安全移动方向（避免撞墙和撞自己）
const safeDirections = [];
// 检查上方是否安全
if (!willCollide(head.x, head.y - 1) && direction !== 'down') {
safeDirections.push('up');
}
// 检查下方是否安全
if (!willCollide(head.x, head.y + 1) && direction !== 'up') {
safeDirections.push('down');
}
// 检查左方是否安全
if (!willCollide(head.x - 1, head.y) && direction !== 'right') {
safeDirections.push('left');
}
// 检查右方是否安全
if (!willCollide(head.x + 1, head.y) && direction !== 'left') {
safeDirections.push('right');
}
// 如果没有安全方向，保持当前方向（可能会撞上，但AI会尽量避障）
if (safeDirections.length === 0) {
nextDirection = direction;
return;
}
// 优先考虑靠近食物的方向
let bestDirection;
if (adx > ady) {
// 水平优先
if (dx > 0 && safeDirections.includes('right')) {
bestDirection = 'right';
} else if (dx < 0 && safeDirections.includes('left')) {
bestDirection = 'left';
} else {
// 水平不可行，尝试垂直
if (dy > 0 && safeDirections.includes('down')) {
bestDirection = 'down';
} else if (dy < 0 && safeDirections.includes('up')) {
bestDirection = 'up';
} else {
// 随机选择安全方向
bestDirection = safeDirections[Math.floor(Math.random() * safeDirections.length)];
}
}
} else {
// 垂直优先
if (dy > 0 && safeDirections.includes('down')) {
bestDirection = 'down';
} else if (dy < 0 && safeDirections.includes('up')) {
bestDirection = 'up';
} else {
// 垂直不可行，尝试水平
if (dx > 0 && safeDirections.includes('right')) {
bestDirection = 'right';
} else if (dx < 0 && safeDirections.includes('left')) {
bestDirection = 'left';
} else {
// 随机选择安全方向
bestDirection = safeDirections[Math.floor(Math.random() * safeDirections.length)];
}
}
}
// 检查危险的炸弹并避开
for (const bomb of dangerousItems) {
const distToBomb = Math.abs(bomb.x - head.x) + Math.abs(bomb.y - head.y);
if (distToBomb < 5) { // 如果在炸弹附近
// 计算远离炸弹的方向
const dxBomb = bomb.x - head.x;
const dyBomb = bomb.y - head.y;
// 尝试远离炸弹
const moveAwayDirections = [];
if (dxBomb > 0 && safeDirections.includes('left')) {
moveAwayDirections.push('left');
}
if (dxBomb < 0 && safeDirections.includes('right')) {
moveAwayDirections.push('right');
}
if (dyBomb > 0 && safeDirections.includes('up')) {
moveAwayDirections.push('up');
}
if (dyBomb < 0 && safeDirections.includes('down')) {
moveAwayDirections.push('down');
}
if (moveAwayDirections.length > 0) {
// 选择最远离炸弹的方向（如果可能）
let maxDist = 0;
let bestAvoidDirection = moveAwayDirections[0];
for (const dir of moveAwayDirections) {
let newX = head.x;
let newY = head.y;
switch (dir) {
case 'up': newY--; break;
case 'down': newY++; break;
case 'left': newX--; break;
case 'right': newX++; break;
}
const newDist = Math.abs(bomb.x - newX) + Math.abs(bomb.y - newY);
if (newDist > maxDist) {
maxDist = newDist;
bestAvoidDirection = dir;
}
}
bestDirection = bestAvoidDirection;
}
}
}
// 检查传送门，如果有无敌效果可以使用
const portal = items.find(item => item.type === ITEM_TYPES.PORTAL);
if (activeEffects.invincible && portal && Date.now() - lastPortalTime > portalCooldown * 1000) {
const dxPortal = portal.x - head.x;
const dyPortal = portal.y - head.y;
if (Math.abs(dxPortal) + Math.abs(dyPortal) < 3) { // 接近传送门
if (dxPortal > 0 && safeDirections.includes('right')) {
bestDirection = 'right';
} else if (dxPortal < 0 && safeDirections.includes('left')) {
bestDirection = 'left';
} else if (dyPortal > 0 && safeDirections.includes('down')) {
bestDirection = 'down';
} else if (dyPortal < 0 && safeDirections.includes('up')) {
bestDirection = 'up';
}
}
}
// 检查速度道具，如果有无敌效果可以使用
const speedItem = items.find(item => item.type === ITEM_TYPES.SPEED);
if (speedItem && !activeEffects.speed) {
const dxSpeed = speedItem.x - head.x;
const dySpeed = speedItem.y - head.y;
if (Math.abs(dxSpeed) + Math.abs(dySpeed) < 8) { // 在速度道具附近
if (dxSpeed > 0 && safeDirections.includes('right')) {
bestDirection = 'right';
} else if (dxSpeed < 0 && safeDirections.includes('left')) {
bestDirection = 'left';
} else if (dySpeed > 0 && safeDirections.includes('down')) {
bestDirection = 'down';
} else if (dySpeed < 0 && safeDirections.includes('up')) {
bestDirection = 'up';
}
}
}
nextDirection = bestDirection;
}
// 检查移动是否会碰撞
function willCollide(x, y) {
// 检查墙壁（无敌状态下可以穿过）
if (!activeEffects.invincible) {
if (x < 0 || x >= CELLS_X || y < 0 || y >= CELLS_Y) {
return true;
}
}
// 检查自己（无敌状态下可以穿过）
if (!activeEffects.invincible) {
for (let i = 0; i < snake.length; i++) {
if (x === snake[i].x && y === snake[i].y) {
return true;
}
}
}
return false;
}
// 键盘控制
document.addEventListener('keydown', (e) => {
if (isGameOver && e.key === 'r') {
initGame();
return;
}
// 空格键切换自动/手动模式
if (e.key === ' ') {
isAutoMode = !isAutoMode;
modeElement.textContent = isAutoMode ? 'AI自动' : '手动控制';
modeElement.className = isAutoMode ? 'text-xl text-amber-400' : 'text-xl text-white';
return;
}
// 手动控制
if (!isAutoMode) {
switch (e.key) {
case 'ArrowUp':
case 'w':
case 'W':
if (direction !== 'down') nextDirection = 'up';
break;
case 'ArrowDown':
case 's':
case 'S':
if (direction !== 'up') nextDirection = 'down';
break;
case 'ArrowLeft':
case 'a':
case 'A':
if (direction !== 'right') nextDirection = 'left';
break;
case 'ArrowRight':
case 'd':
case 'D':
if (direction !== 'left') nextDirection = 'right';
break;
}
}
});
// 重新开始按钮
restartButton.addEventListener('click', initGame);
// 开始游戏
initGame();
});
</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=yuliqing16/spider" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p><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=Yoleo/snake-literario" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>