实用指南:贪吃蛇游戏(纯HTML)

一、游戏截图

在这里插入图片描述

二、源码

<!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;
            // DOM元素
            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>
posted @ 2025-08-23 22:56  yfceshi  阅读(24)  评论(0)    收藏  举报