devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

贪吃蛇web小游戏

作者：IT小白 | 2024-04-16 23:01:45

赞

踩

贪吃蛇web小游戏

蛇的移动：通过定时器实现蛇的自动移动，并通过监听用户的键盘输入来改变蛇的移动方向。

食物的生成：随机在地图上生成食物，并在蛇吃到食物时更新得分和食物的位置。

墙和边界的碰撞判断：

        监测蛇是否撞墙（遍历获取墙的位置，检查蛇的边界框是否与当前墙的边界框相交）

        有四种情况：

            蛇的左边界 小于 墙的右边界，蛇在墙的右侧（蛇从右往左撞墙）

            蛇的右边界 大于 墙的左边界，蛇在墙的左侧（蛇从左往右撞墙）

            蛇上边界的 小于 墙的下边界，蛇在墙的上侧（蛇从下往上撞墙）

            蛇下边界的 大于 墙的上边界，蛇在墙的上侧（蛇从上往下撞墙）

完整源代码如下：

  1. // snake.html
  2.  
  3. <!DOCTYPE html>
  4. <html lang="en">
  5.  
  6. <head>
  7.     <meta charset="UTF-8">
  8.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9.     <title>snake</title>
  10.     <style>
  11.         * {
  12.             margin: 0;
  13.             padding: 0;
  14.         }
  15.  
  16.         /* 地图 */
  17.         .map {
  18.             width: 400px;
  19.             height: 400px;
  20.             background-color: black;
  21.             margin: 0 auto;
  22.             margin-top: 50px;
  23.             position: relative;
  24.         }
  25.  
  26.         /* 蛇 */
  27.         .snake {
  28.             /* 蛇的宽高 */
  29.             width: 20px;
  30.             height: 20px;
  31.             background-color: red;
  32.             /* 确保蛇在地图内 */
  33.             position: absolute;
  34.         }
  35.  
  36.         /* 食物 */
  37.         .food {
  38.             /* 食物的宽高 */
  39.             width: 20px;
  40.             height: 20px;
  41.             background-color: green;
  42.             /* 确保食物在地图内 */
  43.             position: absolute;
  44.  
  45.         }
  46.  
  47.         /* 得分 */
  48.         .score {
  49.             position: absolute;
  50.             bottom: 10px;
  51.             /* 距离底部10px */
  52.             left: 10px;
  53.             /* 距离左侧10px */
  54.             color: white;
  55.             /* 设置分数颜色为白色 */
  56.         }
  57.  
  58.         /* 墙 */
  59.         .wall1 {
  60.             width: 20px;
  61.             height: 80px;
  62.             background-color: gray;
  63.             position: absolute;
  64.             top: 40px;
  65.             left: 140px;
  66.         }
  67.  
  68.         .wall2 {
  69.             width: 20px;
  70.             height: 80px;
  71.             background-color: gray;
  72.             position: absolute;
  73.             top: 180px;
  74.             left: 40px;
  75.         }
  76.  
  77.         .wall3 {
  78.             width: 140px;
  79.             height: 20px;
  80.             background-color: gray;
  81.             position: absolute;
  82.             top: 300px;
  83.             left: 140px;
  84.         }
  85.  
  86.         .wall4 {
  87.             width: 140px;
  88.             height: 20px;
  89.             background-color: gray;
  90.             position: absolute;
  91.             top: 200px;
  92.             left: 200px;
  93.         }
  94.  
  95.         .wall5 {
  96.             width: 140px;
  97.             height: 20px;
  98.             background-color: gray;
  99.             position: absolute;
  100.             top: 120px;
  101.             left: 140px;
  102.         }
  103.  
  104.         .wall6 {
  105.             width: 20px;
  106.             height: 120px;
  107.             background-color: gray;
  108.             position: absolute;
  109.             top: 240px;
  110.             left: 120px;
  111.         }
  112.     </style>
  113. </head>
  114.  
  115. <body>
  116.     <div class="map">
  117.         <div class="food"></div>
  118.         <div class="snake"></div>
  119.         <div class="score">Score: 0</div>
  120.         <div class="wall1">1</div>
  121.         <div class="wall2">2</div>
  122.         <div class="wall3">3</div>
  123.         <div class="wall4">4</div>
  124.         <div class="wall5">5</div>
  125.         <div class="wall6">6</div>
  126.     </div>
  127.     <script src="./snake.js"></script>
  128. </body>
  129.  
  130. </html>
  131.  
  132. <!-- 
  133. 重点在于：遍历墙数组，检查蛇是否与墙发生碰撞（在snake.js最后）
  134.  -->
  1. // snake.js
  2.  
  3. document.addEventListener('DOMContentLoaded', function () {
  4.  
  5.     // 获取食物，地图，蛇，得分显示，墙
  6.     var food = document.querySelector('.food');
  7.     var map = document.querySelector('.map');
  8.     var snake = document.querySelector('.snake');
  9.     var scoredisplay = document.querySelector('.score');
  10.     var walls = document.querySelectorAll('.wall1, .wall2, .wall3, .wall4, .wall5, .wall6');
  11.  
  12.     // 声明变量
  13.     let snakeX; // 蛇的x坐标
  14.     let snakeY; // 蛇的y坐标
  15.     let snakeDirection; // 蛇运动方向
  16.     let score; // 得分
  17.  
  18.     // 重新开始游戏
  19.     function resetGame() {
  20.         clearInterval(snakeMoveInterval); // 清除移动定时器
  21.         snakeX = 160;
  22.         snakeY = 160;
  23.         snakeDirection = 'right';
  24.         score = 0;
  25.         updateScore();
  26.         generateFood();
  27.         startGame();
  28.     }
  29.  
  30.     resetGame();
  31.  
  32.     // 更新分数显示
  33.     function updateScore() {
  34.         scoredisplay.textContent = '得分: ' + score;
  35.     }
  36.  
  37.     // 生成随机位置的食物
  38.     var foodX, foodY; // 声明全局变量
  39.     function generateFood() {
  40.         foodX = Math.floor(Math.random() * (map.offsetWidth / 20)) * 20;
  41.         foodY = Math.floor(Math.random() * (map.offsetHeight / 20)) * 20;
  42.         //虽然/20*20看似没变化，但实际上，如果删掉了这里，食物的位置不会严丝合缝在“格子”上，而是会有所偏移
  43.         food.style.left = foodX + 'px';
  44.         food.style.top = foodY + 'px';
  45.         food.style.display = 'block'; // 让食物作为一个块级元素显示
  46.         // 一定要让食物显示，因为蛇碰到食物后，食物被隐藏了
  47.     }
  48.  
  49.     // 定时器，持续地让蛇向当前移动方向移动
  50.     var snakeMoveInterval;
  51.  
  52.     // 开始游戏
  53.     function startGame() {
  54.         snakeMoveInterval = setInterval(function () {
  55.             // 根据蛇的移动方向移动蛇的位置
  56.             // 左上角是原点，向右是 X 轴正方向，向下是 Y 轴正方向
  57.             if (snakeDirection === 'left' && snakeX > 0) {
  58.                 snakeX -= 20; // 向左移动20px
  59.             } else if (snakeDirection === 'up' && snakeY > 0) {
  60.                 snakeY -= 20; // 向上移动20px
  61.             } else if (snakeDirection === 'right' && snakeX < map.offsetWidth - 20) {
  62.                 snakeX += 20; // 向右移动20px
  63.             } else if (snakeDirection === 'down' && snakeY < map.offsetHeight - 20) {
  64.                 snakeY += 20; // 向下移动20px
  65.             } else {
  66.                 // 蛇撞到了地图边界，游戏失败
  67.                 var restart = confirm('游戏失败！你的得分是： ' + score + ' 是否重新开始？');
  68.                 if (restart) {
  69.                     resetGame();
  70.                 }
  71.                 return; // 结束函数
  72.             }
  73.  
  74.             // 更新蛇的位置
  75.             snake.style.left = snakeX + 'px';
  76.             snake.style.top = snakeY + 'px';
  77.  
  78.             // 检查是否吃到了食物
  79.             if (snakeX === foodX && snakeY === foodY) {
  80.                 food.style.display = 'none'; // 食物消失
  81.                 generateFood(); // 生成新的食物
  82.                 score += 5; // 增加分数
  83.                 updateScore(); // 更新分数显示
  84.             }
  85.  
  86.             // 检查是否撞墙
  87.             if (isSnakeCollidingWithWall(snakeX, snakeY)) {
  88.                 var restart = confirm('游戏失败！你的得分是： ' + score + ' 是否重新开始？');
  89.                 if (restart) { // 重新开始
  90.                     resetGame();
  91.                 }
  92.                 return; // 不重新开始，则结束函数
  93.             }
  94.  
  95.         }, 500); // 每隔500ms移动一次
  96.     }
  97.  
  98.     // 开始游戏
  99.     startGame();
  100.  
  101.     // 键盘事件监听器，控制蛇的移动方向
  102.     document.addEventListener('keydown', function (event) {
  103.         if (event.keyCode === 37 && snakeDirection !== 'right') { // 左箭头键
  104.             snakeDirection = 'left';
  105.         } else if (event.keyCode === 38 && snakeDirection !== 'down') { // 上箭头键
  106.             snakeDirection = 'up';
  107.         } else if (event.keyCode === 39 && snakeDirection !== 'left') { // 右箭头键
  108.             snakeDirection = 'right';
  109.         } else if (event.keyCode === 40 && snakeDirection !== 'up') { // 下箭头键
  110.             snakeDirection = 'down';
  111.         }
  112.     });
  113.  
  114.     // 检查是否撞墙
  115.     function isSnakeCollidingWithWall(snakeX, snakeY) {
  116.         // 定义蛇的矩形边界框对象，包含蛇头的位置 (x, y) 和蛇的宽度和高度
  117.         var snakeRect = {
  118.             x: snakeX, // 蛇的横坐标
  119.             y: snakeY, // 蛇的纵坐标
  120.             width: 20, // 蛇的宽度
  121.             height: 20 // 蛇的高度
  122.         };
  123.  
  124.         // ！！！重点！！！
  125.         // 遍历墙数组，检查蛇是否与墙发生碰撞
  126.         for (var i = 0; i < walls.length; i++) {
  127.             // 获取当前墙
  128.             var wall = walls[i];
  129.             var wallRect = {
  130.                 // 墙的位置 (x, y) 
  131.                 x: wall.offsetLeft,
  132.                 // 墙体元素左侧边缘相对于其最近的定位祖先元素的偏移量，并将其作为墙体的 x 坐标
  133.                 y: wall.offsetTop,
  134.                 // 墙体元素顶部边缘相对于其最近的定位祖先元素的偏移量，并将其作为墙体的 y 坐标
  135.                 // 墙的宽高
  136.                 width: wall.offsetWidth,
  137.                 height: wall.offsetHeight
  138.             };
  139.  
  140.             // 检查蛇的边界框是否与当前墙的边界框相交
  141.             if (snakeRect.x < wallRect.x + wallRect.width &&
  142.                 snakeRect.x + snakeRect.width > wallRect.x &&
  143.                 snakeRect.y < wallRect.y + wallRect.height &&
  144.                 snakeRect.y + snakeRect.height > wallRect.y) {
  145.                 return true; // 发生碰撞
  146.             }
  147.             // 蛇的左边界 小于 墙的右边界，蛇在墙的右侧（蛇从右往左撞墙）
  148.             // 蛇的右边界 大于 墙的左边界，蛇在墙的左侧（蛇从左往右撞墙）
  149.             // 蛇上边界的 小于 墙的下边界，蛇在墙的上侧（蛇从下往上撞墙）
  150.             // 蛇下边界的 大于 墙的上边界，蛇在墙的上侧（蛇从上往下撞墙）
  151.         }
  152.         return false; // 未发生碰撞
  153.     }
  154. });

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/436899
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号