一、游戏截图
二、源码
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>离谱贪吃蛇</title><style>body {margin: 0;padding: 20px;font-family: 'Arial', sans-serif;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);min-height: 100vh;display: flex;align-items: center;justify-content: center;}.game-container {background: rgba(255, 255, 255, 0.1);backdrop-filter: blur(10px);border-radius: 20px;padding: 25px;box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);border: 1px solid rgba(255, 255, 255, 0.2);text-align: center;max-width: 900px;width: 100%;}.game-title {color: white;font-size: 2.8em;margin-bottom: 15px;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;}.game-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;flex-wrap: wrap;gap: 15px;}.game-info {display: flex;gap: 20px;background: rgba(0, 0, 0, 0.2);padding: 12px 20px;border-radius: 15px;color: white;font-weight: bold;font-size: 1.1em;}.info-item {display: flex;align-items: center;gap: 5px;}.grid-container {display: flex;justify-content: center;margin: 20px 0;}.grid {display: grid;grid-template-columns: repeat(20, 25px);grid-template-rows: repeat(15, 25px);gap: 1px;background-color: rgba(0, 0, 0, 0.3);border-radius: 10px;padding: 15px;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);}.cell {width: 25px;height: 25px;display: flex;align-items: center;justify-content: center;font-size: 14px;border-radius: 4px;background-color: rgba(0, 0, 0, 0.2);transition: all 0.1s ease;}.snake-head {background: linear-gradient(135deg, #4ade80, #22c55e);color: white;font-weight: bold;box-shadow: 0 0 10px rgba(74, 222, 128, 0.5);}.snake-body {background: linear-gradient(135deg, #22c55e, #16a34a);color: white;}.food {background: linear-gradient(135deg, #ef4444, #dc2626);color: white;animation: pulse 1s infinite;}.power-up {background: linear-gradient(135deg, #f59e0b, #d97706);color: white;animation: spin 2s infinite linear;}.special-food {background: linear-gradient(135deg, #fbbf24, #f59e0b);color: white;animation: bounce 1s infinite;}@keyframes pulse {0%, 100% { transform: scale(1); }50% { transform: scale(1.1); }}@keyframes spin {from { transform: rotate(0deg); }to { transform: rotate(360deg); }}@keyframes bounce {0%, 100% { transform: translateY(0); }50% { transform: translateY(-5px); }}.controls {margin: 25px 0;display: flex;justify-content: center;gap: 15px;flex-wrap: wrap;}button {padding: 12px 25px;border: none;border-radius: 25px;background: rgba(255, 255, 255, 0.2);color: white;font-weight: bold;cursor: pointer;transition: all 0.3s;backdrop-filter: blur(5px);box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);font-size: 1em;}button:hover {background: rgba(255, 255, 255, 0.3);transform: translateY(-2px);}.instructions {color: white;margin: 20px 0;font-size: 0.95em;line-height: 1.6;background: rgba(0, 0, 0, 0.2);padding: 20px;border-radius: 15px;}.rules-section {margin: 15px 0;}.rules-section h3 {margin-top: 0;margin-bottom: 10px;color: #4ecdc4;}.power-ups-list, .special-foods-list {display: flex;justify-content: center;gap: 15px;margin: 10px 0;flex-wrap: wrap;}.item {display: flex;align-items: center;gap: 5px;background: rgba(255, 255, 255, 0.1);padding: 8px 15px;border-radius: 20px;font-size: 0.85em;}.game-over {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background: rgba(0, 0, 0, 0.9);color: white;padding: 40px;border-radius: 20px;text-align: center;z-index: 1000;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);max-width: 400px;width: 90%;}.pause-screen {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background: rgba(0, 0, 0, 0.8);color: white;padding: 40px;border-radius: 20px;text-align: center;z-index: 1000;}.combo-display {background: rgba(255, 215, 0, 0.3);color: gold;padding: 8px 15px;border-radius: 20px;font-weight: bold;margin: 5px 0;animation: glow 0.5s infinite alternate;}@keyframes glow {from { box-shadow: 0 0 5px gold; }to { box-shadow: 0 0 20px gold; }}.active-power {animation: pulse 0.5s infinite;}@media (max-width: 768px) {.game-container {padding: 15px;}.game-title {font-size: 2em;}.game-info {flex-direction: column;gap: 10px;}.grid {grid-template-columns: repeat(20, 20px);grid-template-rows: repeat(15, 20px);padding: 10px;}.cell {width: 20px;height: 20px;font-size: 12px;}.controls {flex-direction: column;align-items: center;}button {width: 100%;max-width: 200px;}}</style>
</head>
<body><div class="game-container"><h1 class="game-title">🎮 离谱贪吃蛇 🎮</h1><div class="game-header"><div class="game-info"><div class="info-item"><span>🏆</span><span>分数: <span id="score">0</span></span></div><div class="info-item"><span>❤️</span><span>生命: <span id="lives">3</span></span></div><div class="info-item"><span>⚡</span><span>等级: <span id="level">1</span></span></div><div class="info-item"><span>🔥</span><span>连击: <span id="combo" class="combo-display">0</span></span></div></div></div><div class="grid-container"><div id="game-grid" class="grid"></div></div><div class="controls"><button id="start-btn">▶️ 开始游戏</button><button id="pause-btn">⏸️ 暂停</button><button id="reset-btn">🔄 重置游戏</button></div><div class="instructions"><div class="rules-section"><h3>🎮 游戏规则:</h3><p>🎯 目标：吃到食物获得分数，避开自身碰撞</p><p>⚡ 特殊道具：⚡❄️🌱🔻🌀✨ - 每个都有独特效果</p><p>🌟 特殊食物：⭐❤️💎☁️ - 获得额外奖励</p><p>💥 连击系统：连续吃到5个食物获得额外50分奖励！</p></div><div class="rules-section"><h3>⚡ 道具效果:</h3><div class="power-ups-list"><div class="item">⚡ 速度加速 (5秒) - 快速移动</div><div class="item">❄️ 减速道具 - 慢速移动</div><div class="item">🌱 增长道具 - 蛇身增长</div><div class="item">🔻 缩小道具 - 蛇身缩短</div><div class="item">🌀 传送道具 - 随机传送</div><div class="item">✨ 无敌道具 - 5秒无敌</div></div></div><div class="rules-section"><h3>🌟 特殊食物效果:</h3><div class="special-foods-list"><div class="item">⭐ 超级星星 (+50分) - 大量分数</div><div class="item">❤️ 爱心生命 (+1生命) - 生命恢复</div><div class="item">💎 钻石宝石 (+50分) - 高分奖励</div><div class="item">☁️ 云朵祝福 (+50分) - 额外分数</div></div></div><div class="rules-section"><h3>🎮 操作说明:</h3><p>🎮 方向键控制方向 | ⚡ 空格键暂停 | 🔄 R键重置</p></div></div></div><script>let snake = [{x: 10, y: 10}];let direction = {x: 0, y: -1};let food = {x: 15, y: 15};let powerUps = [];let specialFoods = [];let gameRunning = false;let gameOver = false;let score = 0;let level = 1;let lives = 3;let activePowerUps = [];let gameSpeed = 150;let gameLoop;let combo = 0;let isPaused = false;let invincible = false;const gameGrid = document.getElementById('game-grid');const scoreElement = document.getElementById('score');const livesElement = document.getElementById('lives');const levelElement = document.getElementById('level');const comboElement = document.getElementById('combo');const startBtn = document.getElementById('start-btn');const pauseBtn = document.getElementById('pause-btn');const resetBtn = document.getElementById('reset-btn');function generateRandomPosition() {return {x: Math.floor(Math.random() * 20),y: Math.floor(Math.random() * 15)};}function checkCollision(head, snakeBody) {if (invincible) return false;return snakeBody.slice(1).some(segment => segment.x === head.x && segment.y === head.y);}function generateFood() {let newFood;let valid = false;while (!valid) {newFood = generateRandomPosition();valid = !snake.some(segment => segment.x === newFood.x && segment.y === newFood.y) &&!powerUps.some(power => power.x === newFood.x && power.y === newFood.y) &&!specialFoods.some(food => food.x === newFood.x && food.y === newFood.y);}return newFood;}function generatePowerUp() {const types = ['speed', 'slow', 'grow', 'shrink', 'teleport', 'invincible'];const type = types[Math.floor(Math.random() * types.length)];return {...generateRandomPosition(),type: type,id: Date.now() + Math.random()};}function generateSpecialFood() {const types = ['star', 'heart', 'diamond', 'cloud'];const type = types[Math.floor(Math.random() * types.length)];return {...generateRandomPosition(),type: type,id: Date.now() + Math.random()};}function renderGrid() {gameGrid.innerHTML = '';for (let y = 0; y < 15; y++) {for (let x = 0; x < 20; x++) {const cell = document.createElement('div');cell.className = 'cell';const isSnakeHead = snake[0].x === x && snake[0].y === y;const isSnakeBody = snake.slice(1).some(segment => segment.x === x && segment.y === y);const isFood = food.x === x && food.y === y;const isPowerUp = powerUps.some(power => power.x === x && power.y === y);const isSpecialFood = specialFoods.some(food => food.x === x && food.y === y);if (isSnakeHead) {cell.classList.add('snake-head');cell.textContent = '🐍';} else if (isSnakeBody) {cell.classList.add('snake-body');cell.textContent = '🟢';} else if (isFood) {cell.classList.add('food');cell.textContent = '🍎';} else if (isPowerUp) {cell.classList.add('power-up');const icons = {'speed': '⚡', 'slow': '❄️', 'grow': '🌱', 'shrink': '🔻', 'teleport': '🌀', 'invincible': '✨'};cell.textContent = icons[powerUps.find(p => p.x === x && p.y === y).type];} else if (isSpecialFood) {cell.classList.add('special-food');const icons = {'star': '⭐', 'heart': '❤️', 'diamond': '💎', 'cloud': '☁️'};cell.textContent = icons[specialFoods.find(f => f.x === x && f.y === y).type];}gameGrid.appendChild(cell);}}}function updateGame() {if (!gameRunning || gameOver || isPaused) return;const newSnake = [...snake];const head = {...newSnake[0]};head.x += direction.x;head.y += direction.y;if (head.x < 0) head.x = 19;if (head.x > 19) head.x = 0;if (head.y < 0) head.y = 14;if (head.y > 14) head.y = 0;if (checkCollision(head, newSnake)) {lives--;livesElement.textContent = lives;if (lives <= 0) {gameOver = true;gameRunning = false;showGameOver();return;}snake = [{x: 10, y: 10}];direction = {x: 0, y: -1};invincible = false;return;}newSnake.unshift(head);if (head.x === food.x && head.y === food.y) {score += 10;combo++;comboElement.textContent = combo;scoreElement.textContent = score;if (combo >= 5) {score += 50;scoreElement.textContent = score;combo = 0;comboElement.textContent = combo;comboElement.style.animation = 'glow 0.5s infinite alternate';setTimeout(() => comboElement.style.animation = '', 2000);}food = generateFood();} else {newSnake.pop();}powerUps = powerUps.filter(power => {if (power.x === head.x && power.y === head.y) {switch (power.type) {case 'speed':gameSpeed = 100;setTimeout(() => gameSpeed = 150, 5000);break;case 'grow':newSnake.push(...Array(2).fill().map(() => ({...newSnake[newSnake.length - 1]})));break;case 'shrink':if (newSnake.length > 3) {newSnake.splice(-2, 2);}break;case 'teleport':const teleportPos = generateRandomPosition();head.x = teleportPos.x;head.y = teleportPos.y;break;case 'invincible':invincible = true;setTimeout(() => invincible = false, 3000);break;}return false; }return true;});specialFoods = specialFoods.filter(foodItem => {if (foodItem.x === head.x && foodItem.y === head.y) {switch (foodItem.type) {case 'star':score += 50;scoreElement.textContent = score;break;case 'heart':lives++;livesElement.textContent = lives;break;case 'diamond':score += 50;scoreElement.textContent = score;break;case 'cloud':score += 50;scoreElement.textContent = score;break;}return false; }return true;});snake = newSnake;if (Math.random() < 0.02) {powerUps.push(generatePowerUp());}if (Math.random() < 0.01) {specialFoods.push(generateSpecialFood());}renderGrid();}function showGameOver() {const gameOverDiv = document.createElement('div');gameOverDiv.className = 'game-over';gameOverDiv.innerHTML = `<h2>🎮 游戏结束! 🎮</h2><p>最终得分: ${score}</p><p>最高连击: ${Math.max(combo, 5)}</p><button onclick="this.parentElement.remove(); resetGame()" style="margin-top: 15px; padding: 12px 25px; background: #ff6b6b; border: none; border-radius: 25px; color: white; font-weight: bold; cursor: pointer;">再玩一次!</button>`;document.body.appendChild(gameOverDiv);}function showPauseScreen() {const pauseDiv = document.createElement('div');pauseDiv.className = 'pause-screen';pauseDiv.innerHTML = `<h2>⏸️ 暂停中 ⏸️</h2><p>按空格键继续游戏</p>`;document.body.appendChild(pauseDiv);return pauseDiv;}function startGame() {if (gameRunning) return;gameRunning = true;gameOver = false;isPaused = false;score = 0;lives = 3;level = 1;combo = 0;snake = [{x: 10, y: 10}];direction = {x: 0, y: -1};food = generateFood();powerUps = [];specialFoods = [];gameSpeed = 150;invincible = false;scoreElement.textContent = score;livesElement.textContent = lives;levelElement.textContent = level;comboElement.textContent = combo;renderGrid();if (gameLoop) clearInterval(gameLoop);gameLoop = setInterval(updateGame, gameSpeed);}function togglePause() {if (!gameRunning || gameOver) return;isPaused = !isPaused;pauseBtn.textContent = isPaused ? '▶️ 继续' : '⏸️ 暂停';if (isPaused) {showPauseScreen();} else {const pauseDiv = document.querySelector('.pause-screen');if (pauseDiv) pauseDiv.remove();}}function resetGame() {if (gameLoop) clearInterval(gameLoop);gameRunning = false;gameOver = false;isPaused = false;const pauseDiv = document.querySelector('.pause-screen');if (pauseDiv) pauseDiv.remove();startGame();}document.addEventListener('keydown', (e) => {if (!gameRunning || gameOver) return;switch (e.key) {case 'ArrowUp':if (direction.y === 0) direction = {x: 0, y: -1};break;case 'ArrowDown':if (direction.y === 0) direction = {x: 0, y: 1};break;case 'ArrowLeft':if (direction.x === 0) direction = {x: -1, y: 0};break;case 'ArrowRight':if (direction.x === 0) direction = {x: 1, y: 0};break;case ' ':togglePause();break;}});startBtn.addEventListener('click', startGame);pauseBtn.addEventListener('click', togglePause);resetBtn.addEventListener('click', resetGame);renderGrid();</script>
</body>
</html>
