发帖
翼度科技»论坛 › 编程开发 › JavaScript › 查看内容

js+jquery实现贪吃蛇经典小游戏

蔺树忠

5

主题

5

帖子

15

积分

新手上路

Rank: 1

积分
15
显示全部楼层
项目只使用到了html,css,js,jquery技术点，没有使用游戏框架，下载本地直接双击index.html 运行即可体验游戏效果。
项目展示

进入游戏


游戏开始


游戏暂停


html文件
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>贪吃蛇游戏</title>
  7.     <link rel="stylesheet" href="style.css">
  8.    
  9. </head>
  10. <body>
  11.    
  12.         
  13.             <h1>贪吃蛇游戏</h1>
  14.             
  15.                
  16.                     得分: 0
  17.                     最高分: 0
  18.                
  19.                 <button id="startBtn">开始游戏</button>
  20.             
  21.             
  22.                
  23.             
  24.             
  25.                 <p>使用方向键 ← ↑ → ↓ 控制蛇的移动</p>
  26.                 <p>按空格键 Space 暂停/继续游戏</p>
  27.             
  28.         
  29.    
  30.    
  31. </body>
  32. </html>
复制代码
CSS文件
  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  5. }
  7. body {
  8.     background: linear-gradient(135deg, #1a1a2e, #16213e);
  9.     min-height: 100vh;
  10.     display: flex;
  11.     justify-content: center;
  12.     align-items: center;
  13.     color: #fff;
  14.     font-family: Arial, sans-serif;
  15. }
  17. .container {
  18.     width: 100%;
  19.     max-width: 800px;
  20.     padding: 20px;
  21. }
  23. .game-wrapper {
  24.     background: rgba(255, 255, 255, 0.1);
  25.     border-radius: 20px;
  26.     padding: 30px;
  27.     box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  28.     backdrop-filter: blur(4px);
  29.     border: 1px solid rgba(255, 255, 255, 0.18);
  30. }
  32. h1 {
  33.     text-align: center;
  34.     margin-bottom: 30px;
  35.     font-size: 2.5em;
  36.     color: #fff;
  37.     text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
  38. }
  40. .game-info {
  41.     display: flex;
  42.     justify-content: space-between;
  43.     align-items: center;
  44.     margin-bottom: 20px;
  45. }
  47. .score-container {
  48.     font-size: 1.2em;
  49. }
  51. .score, .high-score {
  52.     margin: 5px 0;
  53. }
  55. #score, #highScore {
  56.     color: #4CAF50;
  57.     font-weight: bold;
  58. }
  60. #startBtn {
  61.     background: #4CAF50;
  62.     color: white;
  63.     border: none;
  64.     padding: 12px 30px;
  65.     border-radius: 25px;
  66.     font-size: 1.1em;
  67.     cursor: pointer;
  68.     transition: all 0.3s ease;
  69.     box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
  70. }
  72. #startBtn:hover {
  73.     background: #45a049;
  74.     transform: translateY(-2px);
  75. }
  77. .game-board-wrapper {
  78.     display: flex;
  79.     justify-content: center;
  80.     margin: 20px 0;
  81. }
  83. #gameBoard {
  84.     width: 600px;
  85.     height: 600px;
  86.     border-radius: 10px;
  87.     background: rgba(255, 255, 255, 0.05);
  88.     border: 2px solid rgba(255, 255, 255, 0.1);
  89.     position: relative;
  90. }
  92. .snake-body {
  93.     width: 20px;
  94.     height: 20px;
  95.     background: #4CAF50;
  96.     position: absolute;
  97.     border-radius: 4px;
  98. }
  100. .snake-body.head {
  101.     background: #66bb6a;
  102.     box-shadow: 0 0 15px rgba(76, 175, 80, 0.7);
  103. }
  105. .food {
  106.     width: 20px;
  107.     height: 20px;
  108.     background: #ff4444;
  109.     position: absolute;
  110.     border-radius: 50%;
  111.     box-shadow: 0 0 15px rgba(255, 68, 68, 0.7);
  112. }
  114. .controls-info {
  115.     text-align: center;
  116.     margin-top: 20px;
  117.     color: rgba(255, 255, 255, 0.7);
  118.     font-size: 0.9em;
  119.     line-height: 1.6;
  120. }
  122. .controls-info p {
  123.     margin: 5px 0;
  124. }
  126. .key-space {
  127.     display: inline-block;
  128.     padding: 2px 8px;
  129.     background: rgba(255, 255, 255, 0.1);
  130.     border: 1px solid rgba(255, 255, 255, 0.2);
  131.     border-radius: 4px;
  132.     margin: 0 3px;
  133. }
  135. @media (max-width: 768px) {
  136.     #gameBoard {
  137.         width: 300px;
  138.         height: 300px;
  139.     }
  140.    
  141.     .snake-body, .food {
  142.         width: 10px;
  143.         height: 10px;
  144.     }
  145. }
  147. .pause-text {
  148.     position: absolute;
  149.     top: 50%;
  150.     left: 50%;
  151.     transform: translate(-50%, -50%);
  152.     font-size: 2em;
  153.     color: #fff;
  154.     background: rgba(0, 0, 0, 0.7);
  155.     padding: 20px 40px;
  156.     border-radius: 10px;
  157.     z-index: 100;
  158.     animation: pulse 1.5s infinite;
  159. }
  161. @keyframes pulse {
  162.     0% { opacity: 0.6; }
  163.     50% { opacity: 1; }
  164.     100% { opacity: 0.6; }
  165. }
复制代码
js文件
  1. $(document).ready(function() {
  2.     // 游戏配置
  3.     const boardSize = 600;
  4.     const cellSize = 20;
  5.     const gridSize = boardSize / cellSize;
  6.    
  7.     // 游戏状态
  8.     let snake = [];
  9.     let food = {};
  10.     let direction = 'right';
  11.     let gameLoop;
  12.     let score = 0;
  13.     let highScore = localStorage.getItem('highScore') || 0;
  14.     let isGameRunning = false;
  15.    
  16.     // 添加暂停状态变量
  17.     let isPaused = false;
  18.     let savedInterval = null;
  19.    
  20.     // 显示最高分
  21.     $('#highScore').text(highScore);
  23.     // 初始化蛇的位置
  24.     function initSnake() {
  25.         snake = [
  26.             {x: 6, y: 10},
  27.             {x: 5, y: 10},
  28.             {x: 4, y: 10}
  29.         ];
  30.     }
  32.     // 生成食物
  33.     function generateFood() {
  34.         while (true) {
  35.             food = {
  36.                 x: Math.floor(Math.random() * gridSize),
  37.                 y: Math.floor(Math.random() * gridSize)
  38.             };
  39.             
  40.             // 确保食物不会生成在蛇身上
  41.             let foodOnSnake = false;
  42.             for (let body of snake) {
  43.                 if (body.x === food.x && body.y === food.y) {
  44.                     foodOnSnake = true;
  45.                     break;
  46.                 }
  47.             }
  48.             if (!foodOnSnake) break;
  49.         }
  50.     }
  52.     // 绘制游戏画面
  53.     function draw() {
  54.         $('#gameBoard').empty();
  55.         
  56.         // 绘制蛇
  57.         snake.forEach((segment, index) => {
  58.             const snakeElement = $('')
  59.                 .addClass('snake-body')
  60.                 .css({
  61.                     left: segment.x * cellSize + 'px',
  62.                     top: segment.y * cellSize + 'px'
  63.                 });
  64.             
  65.             if (index === 0) {
  66.                 snakeElement.addClass('head');
  67.             }
  68.             
  69.             $('#gameBoard').append(snakeElement);
  70.         });
  71.         
  72.         // 绘制食物
  73.         $('#gameBoard').append(
  74.             $('')
  75.                 .addClass('food')
  76.                 .css({
  77.                     left: food.x * cellSize + 'px',
  78.                     top: food.y * cellSize + 'px'
  79.                 })
  80.         );
  81.     }
  83.     // 移动蛇
  84.     function moveSnake() {
  85.         const head = {x: snake[0].x, y: snake[0].y};
  86.         
  87.         switch(direction) {
  88.             case 'up': head.y--; break;
  89.             case 'down': head.y++; break;
  90.             case 'left': head.x--; break;
  91.             case 'right': head.x++; break;
  92.         }
  93.         
  94.         // 检查是否撞墙
  95.         if (head.x < 0 || head.x >= gridSize || head.y < 0 || head.y >= gridSize) {
  96.             gameOver();
  97.             return;
  98.         }
  99.         
  100.         // 检查是否撞到自己
  101.         for (let body of snake) {
  102.             if (head.x === body.x && head.y === body.y) {
  103.                 gameOver();
  104.                 return;
  105.             }
  106.         }
  107.         
  108.         snake.unshift(head);
  109.         
  110.         // 检查是否吃到食物
  111.         if (head.x === food.x && head.y === food.y) {
  112.             score += 10;
  113.             $('#score').text(score);
  114.             if (score > highScore) {
  115.                 highScore = score;
  116.                 localStorage.setItem('highScore', highScore);
  117.                 $('#highScore').text(highScore);
  118.             }
  119.             generateFood();
  120.         } else {
  121.             snake.pop();
  122.         }
  123.         
  124.         draw();
  125.     }
  127.     // 游戏结束
  128.     function gameOver() {
  129.         clearInterval(gameLoop);
  130.         alert('游戏结束！得分：' + score);
  131.         isGameRunning = false;
  132.         isPaused = false;
  133.         $('#startBtn').text('重新开始');
  134.         $('.pause-text').remove();
  135.     }
  137.     // 开始游戏
  138.     function startGame() {
  139.         if (isGameRunning) return;
  140.         
  141.         isGameRunning = true;
  142.         isPaused = false;
  143.         score = 0;
  144.         $('#score').text(score);
  145.         direction = 'right';
  146.         $('#startBtn').text('游戏中...');
  147.         
  148.         initSnake();
  149.         generateFood();
  150.         draw();
  151.         
  152.         if (gameLoop) clearInterval(gameLoop);
  153.         gameLoop = setInterval(moveSnake, 150);
  154.     }
  156.     // 添加暂停函数
  157.     function togglePause() {
  158.         if (!isGameRunning) return;
  159.         
  160.         if (isPaused) {
  161.             // 继续游戏
  162.             isPaused = false;
  163.             gameLoop = setInterval(moveSnake, 150);
  164.             $('#startBtn').text('游戏中...');
  165.             // 移除暂停提示
  166.             $('.pause-text').remove();
  167.         } else {
  168.             // 暂停游戏
  169.             isPaused = true;
  170.             clearInterval(gameLoop);
  171.             $('#startBtn').text('已暂停');
  172.             // 添加暂停提示
  173.             $('#gameBoard').append(
  174.                 $('')
  175.                     .addClass('pause-text')
  176.                     .text('游戏暂停')
  177.             );
  178.         }
  179.     }
  181.     // 键盘控制
  182.     $(document).keydown(function(e) {
  183.         // 防止方向键和空格键滚动页面
  184.         if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
  185.             e.preventDefault();
  186.         }
  187.         
  188.         // 空格键控制暂停
  189.         if (e.keyCode === 32) { // 空格键
  190.             togglePause();
  191.             return;
  192.         }
  193.         
  194.         // 游戏暂停时不响应方向键
  195.         if (!isGameRunning || isPaused) return;
  196.         
  197.         switch(e.keyCode) {
  198.             case 38: // 上
  199.                 if (direction !== 'down') direction = 'up';
  200.                 break;
  201.             case 40: // 下
  202.                 if (direction !== 'up') direction = 'down';
  203.                 break;
  204.             case 37: // 左
  205.                 if (direction !== 'right') direction = 'left';
  206.                 break;
  207.             case 39: // 右
  208.                 if (direction !== 'left') direction = 'right';
  209.                 break;
  210.         }
  211.     });
  213.     // 绑定开始按钮事件
  214.     $('#startBtn').click(startGame);
  215. });
复制代码
总结

可以直接下载代码到本地，双击index.html文件即可运行查看效果并体验游戏。

来源:https://www.cnblogs.com/enba/p/18565839
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x

上一篇: 某趣G小说字体解码

下一篇: vxe-table 秒级渲染万级数据、极致流畅横向虚拟滚动与纵向虚拟滚动+自适应

发表于 2024-11-24 16:10:08

举报 回复 使用道具

返回列表 发新帖

Archiver|手机版|小黑屋|翼度科技

Copyright © 2001-2020, Tencent Cloud.　Powered by Discuz! X3.4