丝滑的贪吃蛇

最新推荐文章于 2024-11-16 14:48:02 发布
最新推荐文章于 2024-11-16 14:48:02 发布
阅读量521 收藏 4
点赞数 4
文章标签： css 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58969730/article/details/142065429
版权 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>贪吃蛇游戏</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
    }
    canvas {
      border: 1px solid #000;
    }
    #menu {
      height: 50px;
      width: 600px;
      margin-bottom: 5px;
      border-radius: 5px;
      background-image: radial-gradient(circle 248px at center, #16d9e3 0%, #30c7ec 47%, #46aef7 100%);
      -webkit-box-shadow: 6px 6px 15px -6px rgba(13,13,13,0.51);
      box-shadow: 6px 6px 15px -6px rgba(13,13,13,0.51);
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
    }
    .button {
      display: inline-block;
      padding: 8px 16px;
      margin: 5px;
      background-color: #738aff; /* 深蓝色 */
      color: #ffffff; /* 白色文字 */
      text-align: center;
      text-decoration: none;
      font-size: 14px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }
    .button:hover {
      background-color: #6a71dd;
    }

    /* 背景遮罩 */
    .overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 1000;
    }

    /* 提示窗 */
    .modal {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      z-index: 1001;
    }

    /* 按钮 */
    .modal button {
      margin-top: 10px;
      float: right;
    }

    #gameInfo div {
      color: white;
    }

    #leftBtnGroup {
      height: 320px;
      width: 120px;
      border-radius: 5px;
      margin-top: 40px;
      margin-right: 25px;
      display: flex;
      justify-content: space-around;
      flex-direction: column;
      align-content: center;
      align-items: center;
    }

    #rightBtnGroup {
      height: 320px;
      width: 120px;
      border-radius: 5px;
      margin-top: 40px;
      margin-left: 25px;
      display: flex;
      justify-content: space-around;
      flex-direction: column;
      align-content: center;
      align-items: center;
    }

    .directionBtn {
      display: flex;
      height: 150px;
      width: 100px;
      background-color: #f9fafb;
      font-size: 45px;
      border-radius: 25px;
      box-shadow: inset 7px 7px 14px #e8e9e9, inset -7px -7px 14px #ffffff;
      align-items: center;
      justify-content: center;
    }

    .directionBtn:hover {
      background: linear-gradient(145deg, #e0e1e2, #ffffff);
      box-shadow:  7px 7px 14px #e8e9e9,
      -7px -7px 14px #ffffff;
    }
  </style>
</head>
<body>
<div id="leftBtnGroup">
  <div class="directionBtn" id="upBtn" onclick="updateDirection(38)">
    ↑
  </div>

  <div class="directionBtn" id="leftBtn" onclick="updateDirection(37)">
    ←
  </div>
</div>
<div>
  <div id="menu">
    <div id="gameInfo">
      <div id="score">得分: 0</div>
      <div id="runTime">00:00:000</div>
    </div>
    <div>
      <button id="startBtn" class="button" onclick="start()">开始游戏</button>
      <button id="pauseBtn" class="button" onclick="pause()">暂&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;停</button>
    </div>
  </div>
  <canvas id="gameCanvas" width="600" height="320"></canvas>
</div>

<div id="rightBtnGroup">
  <div class="directionBtn" id="bottomBtn" onclick="updateDirection(40)">
    ↓
  </div>

  <div class="directionBtn" id="rightBtn" onclick="updateDirection(39)">
    →
  </div>
</div>

<!-- 遮罩层 -->
<div class="overlay" id="overlay"></div>
<!-- 提示窗 -->
<div class="modal" id="modal">
  <p id="msg">这是一个提示窗!</p>
  <button id="closeModalBtn" onclick="restart()">重新开始</button>
</div>

<script type='text/javascript'>
  const canvas = document.getElementById('gameCanvas');
  const ctx = canvas.getContext('2d');

  const box = 10;
  const canvasWidth = canvas.width / box;
  const canvasHeight = canvas.height / box;

  // 定时器id
  let intervalId;
  // 记录是否暂停
  let isPaused = false;
  // 蛇
  let snake = [];
  // 页面中食物数量
  let footNum = 5;
  // 食物
  let food = [];
  // 当前蛇头方向
  let direction = 'RIGHT';
  // 后续方向
  let nextDirection = "RIGHT";
  // 速度
  let speed = 0.1;
  // 分数
  let score = 0;
  // 游戏状态
  let gameStatus = 0;

  // 时间功能
  let timer;
  let isRunning = false;
  let startTime;
  let elapsedTime = 0;

  function init() {
    // 清空数组
    snake.length = 0;
    food.length = 0;
    score = 0;
    // 方向
    direction = 'RIGHT';
    nextDirection = "RIGHT";

    // 初始化蛇
    snake[0] = { x: 9, y: 10, direction: "RIGHT" };
    snake[1] = { x: 8, y: 10, direction: "RIGHT" };
    snake[2] = { x: 7, y: 10, direction: "RIGHT" };
    snake[3] = { x: 6, y: 10, direction: "RIGHT" };
    // 随机食物
    generateFood();

    // 绑定键盘事件
    document.addEventListener('keydown', changeDirection);
    // 定时刷新页面
    if (intervalId) clearInterval(intervalId);
    // 刷新页面
    //intervalId = requestAnimationFrame(updateGame)

    intervalId = setInterval(updateGame, 10);
  }

  // 更新游戏状态
  function updateGame() {
    // 整数 才可执行下一步动作
    if (isInteger(snake[0].x) && isInteger(snake[0].y)) {
      if (direction !== nextDirection) {
        const newDirection = nextDirection;
        if (newDirection === 'LEFT' && direction !== 'RIGHT') {
          direction = newDirection;
        } else if (newDirection === 'RIGHT' && direction !== 'LEFT') {
          direction = newDirection;
        } else if (newDirection === 'UP' && direction !== 'DOWN') {
          direction = newDirection;
        } else if (newDirection === 'DOWN' && direction !== 'UP') {
          direction = newDirection;
        }
      }
    }

    var xValue = 0;
    var yValue = 0;
    // 确定本次移动后的蛇头坐标
    if (direction === 'LEFT') xValue = - speed;
    if (direction === 'UP') yValue = - speed;
    if (direction === 'RIGHT') xValue = + speed;
    if (direction === 'DOWN') yValue = + speed;

    // 深拷贝蛇对象
    var lastSnake = snake.map(segment => ({ ...segment }));

    // 蛇身 每次移动都是后面的 使用前面的坐标
    for (var i = lastSnake.length-1; i > 0; i--) {
      // 如果是刚吃完食物则蛇尾先不动
      if (i === lastSnake.length -1 && lastSnake[lastSnake.length - 1].x === Math.floor(lastSnake[lastSnake.length-2].x) && lastSnake[lastSnake.length - 1].y === Math.floor(lastSnake[lastSnake.length-2].y)) {
        continue;
      }

      var moveX = 0;
      var moveY = 0;

      // 如果前面的蛇身方向为上下
      if (lastSnake[i - 1].direction === "UP" || lastSnake[i - 1].direction === "DOWN") {
        moveX = getMoveDirection(lastSnake[i - 1].x, lastSnake[i].x);
        if (moveX === 0) {
          moveY = getMoveDirection(lastSnake[i - 1].y, lastSnake[i].y);
        }
      } else {
        moveY = getMoveDirection(lastSnake[i - 1].y, lastSnake[i].y);
        if (moveY === 0) {
          moveX = getMoveDirection(lastSnake[i - 1].x, lastSnake[i].x);
        }
      }

      var newX = Number((lastSnake[i].x + moveX).toFixed(10));
      var newY = Number((lastSnake[i].y + moveY).toFixed(10));
      var newDir = lastSnake[i].direction;
      // 如果是整数说明 可能需要调整方向 蛇神需要使用前面的方向
      if (isInteger(newX) && isInteger(newY)) {
        newDir = lastSnake[i-1].direction;
      }
      lastSnake[i] = {
        x: newX,
        y: newY,
        direction: newDir
      }
    }
    // 由于函数执行会消耗时间 所以蛇定位数据会出现不准确的情况 所以在这里更新为准确数据
    lastSnake[0] = {
      x: Number((lastSnake[0].x + xValue).toFixed(10)),
      y: Number((lastSnake[0].y + yValue).toFixed(10)),
      direction: direction
    };

    snake = lastSnake;

    // 检查蛇是否撞到边界或自己
    if (snake[0].x >= canvasWidth || snake[0].x < 0 || snake[0].y >= canvasHeight || snake[0].y < 0 || collision(snake[0], snake.slice(1))) {
      clearInterval(intervalId);
      stopTimer();
      showModal("Game Over! 最终得分: " + score);
      return;
    }

    // 吃到食物
    for (let i = 0; i < footNum; i++) {
      if (snake[0].x === food[i].x && snake[0].y === food[i].y) {
        score++;
        snake.push({...snake[snake.length - 1]});  // 增加蛇的长度
        generateFood(i);
      }
    }

    // 绘制画布
    draw();
    if (intervalId) clearInterval(intervalId);
    intervalId = setInterval(updateGame, 10);
  }

  // 生成食物
  function generateFood(footIndex) {
    // 食物被吃后 补充食物
    if (isInteger(footIndex) && footIndex >= 0 && footIndex < 5) {
      food[footIndex] = {
        x: Math.floor(Math.random() * canvasWidth),
        y: Math.floor(Math.random() * canvasHeight),
        foodShape: Math.floor(Math.random() * (3 - 1 + 1)) + 1
      }
    }
    // 初始
    else {
      for (let i = 0; i < footNum; i++) {
        food[i] = {
          x: Math.floor(Math.random() * canvasWidth),
          y: Math.floor(Math.random() * canvasHeight),
          foodShape: Math.floor(Math.random() * (3 - 1 + 1)) + 1
        }
      }
    }
  }

  // 按钮切换方向
  function updateDirection(btn) {
    const event = {
      keyCode: btn
    }
    changeDirection(event);
  }

  // 改变蛇的移动方向
  function changeDirection(event) {
    if (event.keyCode === 37 && direction !== 'RIGHT') nextDirection = 'LEFT';
    if (event.keyCode === 38 && direction !== 'DOWN') nextDirection = 'UP';
    if (event.keyCode === 39 && direction !== 'LEFT') nextDirection = 'RIGHT';
    if (event.keyCode === 40 && direction !== 'UP') nextDirection = 'DOWN';
  }

  // 计算移动方向
  const getMoveDirection = (previous, current) => {
    const diff = Number((previous - current).toFixed(10));
    if (diff > 0) return speed;
    if (diff === 0) return 0;
    return -speed;
  };

  // 检查是否碰到自己
  function collision(head, array) {
    for (let i = 0; i < array.length; i++) {
      if (head.x === array[i].x && head.y === array[i].y) return true;
    }
    return false;
  }

  // 绘制游戏画面
  function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 绘制蛇
    for (let i = snake.length-1; i >= 0; i--) {
      ctx.fillStyle = i === 0 ? 'green' : 'lightgreen';
      ctx.fillRect(snake[i].x * box, snake[i].y * box, box, box);

      // 处于蛇神转弯处把 转弯处的节点点亮
      if (i !== 0) {
        if ((!isInteger(snake[i].x) && !isInteger(snake[i-1].y)) || (!isInteger(snake[i].y) && !isInteger(snake[i-1].x))) {

          var curveX = isInteger(snake[i].x) ? snake[i].x : snake[i-1].x;
          var curveY = isInteger(snake[i].y) ? snake[i].y : snake[i-1].y;

          ctx.fillRect(curveX * box, curveY * box, box, box);
        }
      }
    }

    // 绘制食物
    ctx.fillStyle = 'red';

    for (let i = 0; i < footNum; i++) {
      switch (food[i].foodShape) {
        case 1:
          ctx.beginPath();
          ctx.arc(food[i].x * box + box / 2, food[i].y * box + box / 2, box / 2, 0, 2 * Math.PI);
          ctx.fill();
          break;
        case 2:
          ctx.fillRect(food[i].x * box, food[i].y * box, box, box);
          break;
        case 3:
          ctx.beginPath();
          ctx.moveTo(food[i].x * box + box / 2, food[i].y * box);
          ctx.lineTo(food[i].x * box + box, food[i].y * box + box);
          ctx.lineTo(food[i].x * box, food[i].y * box + box);
          ctx.closePath();
          ctx.fill();
          break;
      }
    }

    // 绘制得分
    updateScore(score);
  }

  // 判断是否为整数
  const isInteger = (value) => !isNaN(value) && parseInt(value) === Number(value);

  // 打开提示弹窗
  function showModal(msg) {
    const overlay = document.getElementById('overlay');
    const modal = document.getElementById('modal');
    const msgP = document.getElementById('msg');
    msgP.innerText = msg;
    overlay.style.display = 'block';
    modal.style.display = 'block';
  }

  // 关闭提示弹窗
  function closeModal() {
    const overlay = document.getElementById('overlay');
    const modal = document.getElementById('modal');
    overlay.style.display = 'none';
    modal.style.display = 'none';
  }

  // 启动游戏
  function start() {
    if (gameStatus === 0) {
      // 清楚之前的定时器
      if (intervalId) clearInterval(intervalId);
      // 初始化游戏
      init();
      // 计时开始
      startTimer();
      // 游戏运行状态
      gameStatus = 1;
      let startBtn = document.getElementById("startBtn");
      startBtn.innerText = "重新开始";
    }
    else {
      restart();
    }
  }

  //重新开始
  function restart() {
    closeModal();
    init();
    resetTimer();
  }

  // 暂停/继续
  function pause() {
    // 暂停
    if (intervalId && !isPaused) {
      const paragraph = document.getElementById('pauseBtn');
      paragraph.innerHTML = '继&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;续';
      clearInterval(intervalId);
      isPaused = true;
      // 暂停计时
      stopTimer();
      return;
    }
    // 继续
    if (intervalId && isPaused) {
      const paragraph = document.getElementById('pauseBtn');
      paragraph.innerHTML = '暂&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;停';
      if (intervalId) clearInterval(intervalId);
      // 定时刷新页面
      intervalId = setInterval(updateGame, 10);
      isPaused = false;
      startTimer();
    }
  }

  function startTimer() {
    if (isRunning) return;
    isRunning = true;
    startTime = Date.now() - elapsedTime;
    timer = requestAnimationFrame(updateTime);
  }

  function updateTime() {
    if (!isRunning) return;
    elapsedTime = Date.now() - startTime;
    updateDisplayTime();
    timer = requestAnimationFrame(updateTime);
  }

  function stopTimer() {
    if (!isRunning) return;
    isRunning = false;
    cancelAnimationFrame(timer);
  }

  function resetTimer() {
    stopTimer();
    elapsedTime = 0;
    updateDisplayTime();
    startTimer();
  }

  // 时间显示
  function updateDisplayTime() {
    const timeDisplay = document.getElementById('runTime');
    timeDisplay.textContent = formatTime(elapsedTime);
  }

  // 得分显示
  function updateScore(score) {
    const timeDisplay = document.getElementById('score');
    timeDisplay.textContent = "得分: " + score;
  }

  // 时间格式化
  function formatTime(ms) {
    const hours = String(Math.floor(ms / 3600000)).padStart(2, '0');
    const minutes = String(Math.floor((ms % 3600000) / 60000)).padStart(2, '0');
    const seconds = String(Math.floor((ms % 60000) / 1000)).padStart(2, '0');
    const milliseconds = String(ms % 1000).padStart(3, '0');
    return `${hours}:${minutes}:${seconds}:${milliseconds}`;
  }

</script>
</body>
</html>
姓名太长展示不便
关注
Unity中实现贪吃蛇蛇身移动
L的博客
07-30 6222
每当贪吃蛇碰到一个食物之后就生成一个蛇身，将蛇身添加到蛇身列表中，首先记录下蛇头移动前的位置：Vector3 headPos = transform.localPosition 一：第一种思路 这种方式只限于蛇身是唯一的 思路：只移动最后一个蛇身，将其移动到第一个位置 将蛇身列表中的最后一个值赋给蛇头移动前的位置 if (bodyList.Count > 0) { bod...
Scratch少儿编程案例-丝滑版贪吃蛇
空名先生
02-12 4299
基本的贪吃蛇玩法，吃到物品增加长度，触碰边缘不会失败，会从对面方向再出来，只有触碰到自己的时候才会判定失败。
JS配合canvas实现贪吃蛇小游戏_升级_丝滑版本_支持PC端和移动端
见贤思齐焉，见不贤内自省
04-30 1081
对上一个文章JS配合canvas实现贪吃蛇小游戏做了一个大更新，可以手指控制可以键盘控制，APP端控制方向极为丝滑，代码可以直接copy使用。 请忽略上面样式，哈哈哈哈哈，主要看功能 代码里面我做了注释，有什么不清楚的大家一起探讨。 直接上代码 <!-- * @Descripttion: * @Author: zhangJunQing * @Date: 2021-04-25 * @LastEditors: zhangJunQing 1 --> <!DOCTYPE html&.
【Python日记】好丝滑的贪吃蛇
qq_39788788的博客
09-22 308
Python 贪吃蛇(pygame)
基于C/C++的easyx实现贪吃蛇游戏
刘鑫磊
03-21 1004
easyx实现贪吃蛇游戏
Unity做贪吃蛇里身体的生成及跟着头的移动
qq_46289420的博客
11-10 2933
using System.Collections; using System.Collections.Generic; using UnityEngine; //using System.Linq; using UnityEngine.UI; //using UnityEditor.SceneManagement; public List<Transform> bodyList = new List<Transform>();//////定义身体构成一个List publi
【Unity】3D贪吃蛇游戏制作/WebGL本地测试及项目部署
兴趣使然的创作者
10-05 2509
本文是Unity3D贪吃蛇游戏从制作到部署的相关细节效果预览。
小游戏之丛林贪吃蛇
PlutoZML的博客
03-31 245
贪吃蛇（也叫做贪食蛇）游戏是一款休闲益智类游戏，有PC和手机等多平台版本，既简单又耐玩。该游戏通过控制蛇头方向吃东西，从而使得蛇变得越来越长，直到最后占满全部空格结束。
大一新生初体验——c语言实现贪吃蛇
TGX的博客
01-17 2889
大一新生c语言练手游戏——贪吃蛇 写游戏是每个男生记忆中存在的想法，兴趣使然写一个贪吃蛇也算对大一上学期的一个总结。 编译器：vs2019 图形库：easyx easyx拥有相当强大的图像封装函数，使得短短几百行编写一个简单游戏成为可能； 1.创建一个初始窗口 一个游戏当然不能仅仅在小黑框框实现，拥有一个自定义的界面是一个良好的开端 （1）首先需要改变小黑框的大小与颜色，我们可以运用initgraph与setbkcolor函数参数分别为（长，宽） （三原色比例），具体颜色可以调用画板来看 （2）做完第一步
Unity完整小游戏-贪吃蛇（Unity 2D实现版）
05-18
### Unity完整小游戏-贪吃蛇（Unity 2D实现版） #### 1. PPU 和 Camera Size 在Unity 2D游戏中，为了更好地控制游戏世界的缩放比例和摄像机视野，引入了两个重要的概念：**PPU (Pixels Per Unit)** 和 **Camera ...
基于sfml的贪吃蛇
12-03
【基于SFML的贪吃蛇】是一款利用C++编程语言，并结合SFML（Simple and Fast Multimedia Library）库开发的简易版经典游戏。SFML是一个开源的跨平台多媒体库，它为开发者提供了图形、音频、窗口和网络功能，使得游戏...
基于SFML图形库的贪吃蛇小游戏源码+使用教程(课程大作业).zip
12-29
相比原版和大部分走直线的贪吃蛇，界面直白简单，动画丝滑流畅，操作易上手 操作 点击或长按任意位置，变化蛇的方向 按w/a/s/d或者上/下/左/右键转向 蛇到边界的时候会从对称一边出来 按住空格可以加速 基于...
CSS回顾-长度单位汇总详解
懒羊羊我小弟的博客
11-14 864
本文详细介绍了 CSS 中的长度单位。包括绝对长度单位（px、cm、mm、in、pt、pc）和相对长度单位（em、rem、%、vw、vh、vmin、vmax）。阐述了它们的定义、应用场景、优缺点，并对比了绝对长度单位与相对长度单位，指出绝对长度单位有固定参照，相对长度单位基于其他元素属性计算，在响应式设计中各有特点。
第8章利用CSS制作导航菜单
KO2131855283的博客
11-12 1099
利用CSS为超链接重新设置样式，包括对a:link和a:visited这两个伪类的设置，以此来分别表示超链接未被访问和已被访问的状态，同时将其display属性设为block，这样就能把超链接变成块级元素，进而可以为超链接设置80像素的宽度，满足特定的页面布局需求。与此同时，针对大标题文字的 CSS 样式也要进行设定，这包括规定高度值，设置合适的行高，确定文字颜色（可依据设计风格选择不同色彩）以及文字的对齐方式（如居中对齐、左对齐等），以此来达到理想的视觉呈现效果，提升导航栏和标题的美观度与可读性。
css-50 Projects in 50 Days(4)
xwc999
11-14 211
【代码】css-50 Projects in 50 Days(4)
常见的 CSS-in-JS 库
jjsnc
11-14 224
后记 CSS-in-JS 优缺点。
前端Javascript、Vue、CSS等场景面试题目（二）
警警的博客
11-16 1008
前端面试场景题目：Vue|HTML|CSS|JAVASCRIPT|WEBPACK
Vue实际应用之无限滚动、css之&、混合宏和~
swj的博客
11-12 817
今天来点实际的，看起来简单但是给我们代码带来更好的效果，一起来看看吧！先来介绍一个三方库。
Tailwind CSS 和 UnoCSS简单比较
最新发布
CherishTaoTao的博客
11-16 502
特性UnoCSS生成方式预生成所有可能的类，使用时移除未用类按需生成，只有实际用到的类才会被生成性能生成较大的文件，但可以通过 JIT 模式优化生成极小的文件，按需生成 CSS 类，性能更优定制性强大且灵活，通过配置文件调整设计系统更加灵活和动态，支持极细粒度的定制开发体验类名标准化，适合团队开发，但可能类名冗长简洁，灵活，适合追求个性化定制的开发者社区支持庞大且成熟，拥有丰富的插件和资源相对较小，但性能和灵活性上有优势适用场景快速开发、设计系统、团队合作项目。
贪吃蛇游戏代码分享
资源摘要信息: "贪吃蛇游戏代码" 贪吃蛇游戏是一款经典的电子游戏，玩家控制一个不断移动的蛇形角色，通过吃掉屏幕上出现的食物来增长长度。随着长度的增加，游戏难度也相应提高，因为蛇身体的移动更加难以控制，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值