打造你的贪吃蛇游戏：HTML、CSS与JavaScript的完美结合

已于 2024-03-09 02:46:59 修改
阅读量1.5k 收藏 14
点赞数 27
分类专栏： 前端专栏 文章标签： 游戏 html css
于 2024-03-09 02:46:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/interest_ing_/article/details/136575560
版权

🌟 前言

欢迎来到我的技术小宇宙！🌌 这里不仅是我记录技术点滴的后花园，也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛，这里总有一些内容能触动你的好奇心。🔍

在这里插入图片描述

文章目录

打造你的贪吃蛇游戏：HTML、CSS与JavaScript的完美结合

摘要

在本教程中，我们将通过一个简单的贪吃蛇游戏来学习如何使用HTML、CSS和JavaScript创建一个有趣的网页游戏。我们将逐步解读代码，了解游戏的构建过程，并提供必要的注释来帮助理解每个部分的功能。

体验地址

PC端体验地址： 洛可可白⚡️贪吃蛇

（暂时只支持键盘输入操作）

在这里插入图片描述

1. 创建游戏的基本结构

首先，我们需要创建一个HTML页面，它将包含游戏的所有元素，如游戏区域、分数和等级显示。

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- ... 其他头部代码 ... -->
  <title>洛可可白⚡️贪吃蛇</title>
  <style>
    /* ... 样式代码 ... */
  </style>
</head>
<body>
  <!-- ... 页面内容 ... -->
  <script>
    // ... JavaScript 代码 ...
  </script>
</body>
</html>

2. 设计游戏界面

使用CSS来设计游戏的界面，包括游戏区域的样式、蛇和食物的外观。

/* ... 样式代码 ... */
.gamBox {
  /* ... 游戏盒子样式 ... */
        width: 500px;
        height: 500px;
        border: 10px solid #393c1b;
        margin: 20px auto;
        background-color: #b6b327;
        border-radius: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
}
.screen {
  /* ... 屏幕样式 ... */
        width: 400px;
        height: 400px;
        border: 1px solid #000;
        position: relative;
}
  /* ... 蛇的样式 ... */
      .snake .snake-head {
        width: 20px;
        height: 20px;
        border: 1px solid #4d7d2b;
        background-color: #000;
        position: absolute;
        top: 0;
        left: 0;
      }

      .snake span {
        font-size: 17px;
        position: absolute;
        left: -2.7px;
        top: -3px;
      }

      .snake-body > div {
        position: absolute;
        top: 0;
        left: 0;
        width: 20px;
        height: 20px;
        border: 1px solid #4d7d2b;
        background-color: #000;
      }

  /* ... 食物的样式 ... */
 .food {
        width: 20px;
        height: 20px;
        font-size: 8px;
        text-align: left;
        position: absolute;
        top: 10px;
        left: 0;
      }

      .food span {
        font-size: 17px;
        position: absolute;
        left: -1.7px;
        top: -2px;
      }

3. 初始化游戏变量

在JavaScript中，我们定义了一些变量来控制游戏的逻辑，如基础倍数、最大等级、食物位置、等级和分数。

const foundationNumber = 20;
const maxGrade = 10;
let foodSeat = { top. 20, left. 20 };
let register = { score. 0, grade. 1 };

4. 食物位置的随机化

创建一个函数来随机生成食物的位置，并在游戏开始时调用它。

const changeFoodSeat = () => {
  // ... 随机位置代码 ...
          foodSeat.top = randomNumber(0, 20) * foundationNumber;
      foodSeat.left = randomNumber(0, 20) * foundationNumber;

      document.querySelector(".food").style.cssText =
        "left:" + foodSeat.left + "px;top:" + foodSeat.top + "px";
};

5. 更新等级和分数

每当蛇吃到食物时，我们需要更新等级和分数，并在页面上显示。

const changeScore = () => {
  // ... 更新分数和等级代码 ...
          register.score++;
      if (register.grade < 10) {
        register.grade = Math.ceil(register.score / 10);
      }

      document.querySelector(".grade").innerText = register.grade;
      document.querySelector(".score").innerText = register.score;
};

6. 蛇的移动逻辑

编写蛇的移动逻辑，包括方向控制、身体部分的移动以及检测碰撞。

const handleWatchEnter = (e) => {
  // ... 蛇的移动逻辑 ...
    let previousTop = snakeSeat.top;
      let previousLeft = snakeSeat.left;
      //通过便利每个身体部分来进行移动
      snakeLength.forEach((ele, index) => {
        let temporaryTop = ele.top;
        let temporaryLeft = ele.left;
        ele.top = previousTop;
        ele.left = previousLeft;
        previousTop = temporaryTop;
        previousLeft = temporaryLeft;
        document.querySelectorAll(".snake-body>div")[index].style.cssText =
          "left:" + ele.left + "px;top:" + ele.top + "px";
};

7. 键盘事件处理

监听键盘事件来控制蛇的移动方向。

document.addEventListener("keydown", (e) => {
  // ... 键盘事件处理代码 ...
});

8. 初始化游戏

最后，我们初始化游戏，设置初始位置和分数，并开始游戏循环。

const init = () => {
  // ... 初始化游戏代码 ...
          document.querySelector(".snake-head").style.cssText =
        "left:" + 0 + "px;top:" + 0 + "px";
      document.querySelector(".snake-body").innerHTML = "";
      document.querySelector(".grade").innerText = register.grade;
      document.querySelector(".score").innerText = register.score;
      changeFoodSeat();
      handleWatchEnter();
    };

    document.addEventListener("keydown", (e) => {
      if (
        (e.code == "ArrowUp" && direction != "ArrowDown") ||
        (e.code == "ArrowLeft" && direction != "ArrowRight") ||
        (e.code == "ArrowRight" && direction != "ArrowLeft") ||
        (e.code == "ArrowDown" && direction != "ArrowUp")
      ) {
        direction = e.code;
      }
};
init();

9. 全部代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>洛可可白⚡️贪吃蛇</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      p {
        text-align: center;
        font-size: 23px;
        font-weight: 600;
      }

      .gamBox {
        width: 500px;
        height: 500px;
        border: 10px solid #393c1b;
        margin: 20px auto;
        background-color: #b6b327;
        border-radius: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
      }

      /* //下方等级、得分盒子/ */
      .integral {
        width: 398px;
        height: 25px;
        display: flex;
        justify-content: space-between;
        font-size: 16px;
        font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
          "Lucida Sans", Arial, sans-serif;
        font-weight: 700;
      }

      /* //屏幕样式 */
      .screen {
        width: 400px;
        height: 400px;
        border: 1px solid #000;
        position: relative;
      }

      /* //蛇的样式 */
      .snake .snake-head {
        width: 20px;
        height: 20px;
        border: 1px solid #4d7d2b;
        background-color: #000;
        position: absolute;
        top: 0;
        left: 0;
      }

      .snake span {
        font-size: 17px;
        position: absolute;
        left: -2.7px;
        top: -3px;
      }

      .snake-body > div {
        position: absolute;
        top: 0;
        left: 0;
        width: 20px;
        height: 20px;
        border: 1px solid #4d7d2b;
        background-color: #000;
      }

      /* //食物的样式 */

      .food {
        width: 20px;
        height: 20px;
        font-size: 8px;
        text-align: left;
        position: absolute;
        top: 10px;
        left: 0;
      }

      .food span {
        font-size: 17px;
        position: absolute;
        left: -1.7px;
        top: -2px;
      }
    </style>
  </head>

  <body>
    <p>贪吃蛇</p>
    <div class="gamBox">
      <div class="screen">
        <div class="snake">
          <div class="snake-head">
            <span>😁</span>
          </div>
          <div class="snake-body"></div>
        </div>

        <div class="food">
          <span>🐷</span>
        </div>
      </div>
      <div class="integral">
        <div>等级（grade）<span class="grade"></span></div>
        <div>分数（score）<span class="score"></span></div>
      </div>
    </div>
  </body>

  <script>
    /***
     * 公用变量
     * @foundationNumber 基础倍数：移动、食物随机位置量的倍数
     * @maxGrade 最大的等级
     */

    const foundationNumber = 20;
    const maxGrade = 10;

    /***
     * 食物相关
     */
    const randomNumber = (min, max) => {
      return Math.floor(Math.random() * (max - min)) + min;
    };
    let foodSeat = {
      top: 20,
      left: 20,
    };
    const changeFoodSeat = () => {
      foodSeat.top = randomNumber(0, 20) * foundationNumber;
      foodSeat.left = randomNumber(0, 20) * foundationNumber;

      document.querySelector(".food").style.cssText =
        "left:" + foodSeat.left + "px;top:" + foodSeat.top + "px";
    };

    /***
     * 等级、分数相关
     */
    let register = {
      score: 0,
      grade: 1,
    };
    const changeScore = () => {
      register.score++;
      if (register.grade < 10) {
        register.grade = Math.ceil(register.score / 10);
      }

      document.querySelector(".grade").innerText = register.grade;
      document.querySelector(".score").innerText = register.score;
    };

    /***
     * 蛇相关
     */

    let direction = ""; //移动方向
    let snakeLength = [];
    let snakeSeat = {
      top: 0,
      left: 0,
    };
    const handleWatchEnter = (e) => {
      let previousTop = snakeSeat.top;
      let previousLeft = snakeSeat.left;
      //通过便利每个身体部分来进行移动
      snakeLength.forEach((ele, index) => {
        let temporaryTop = ele.top;
        let temporaryLeft = ele.left;
        ele.top = previousTop;
        ele.left = previousLeft;
        previousTop = temporaryTop;
        previousLeft = temporaryLeft;
        document.querySelectorAll(".snake-body>div")[index].style.cssText =
          "left:" + ele.left + "px;top:" + ele.top + "px";
      });

      switch (direction) {
        case "ArrowUp":
          snakeSeat.top -= 20;
          break;
        case "ArrowLeft":
          snakeSeat.left -= 20;
          break;
        case "ArrowRight":
          snakeSeat.left += 20;
          break;
        case "ArrowDown":
          snakeSeat.top += 20;
          break;
      }

      if (snakeSeat.top == foodSeat.top && snakeSeat.left == foodSeat.left) {
        changeScore();
        changeFoodSeat();
        snakeLength.push({
          top: previousTop,
          left: previousLeft,
        });

        var div = document.createElement("div");
        div.style.left = previousLeft + "px";
        div.style.top = previousTop + "px";
        div.class = "bodyItem";

        document.querySelector(".snake-body").appendChild(div);
      }

      if (
        snakeSeat.top < 0 ||
        snakeSeat.left < 0 ||
        snakeSeat.left > 380 ||
        snakeSeat.top > 380
      ) {
        alert("撞墙身亡");
        snakeSeat.top = 0;
        snakeSeat.left = 0;
        direction = "";
        snakeLength = [];
        init();

        return;
      }

      let bodySeats = snakeLength.map((item) => JSON.stringify(item));

      if (
        bodySeats.indexOf(
          JSON.stringify({ top: snakeSeat.top, left: snakeSeat.left })
        ) != -1
      ) {
        alert("把自己撞死了");
        snakeSeat.top = 0;
        snakeSeat.left = 0;
        snakeLength = [];
        direction = "";
        init();
        return;
      }
      document.querySelector(".snake-head").style.cssText =
        "left:" + snakeSeat.left + "px;top:" + snakeSeat.top + "px";
      setTimeout(() => {
        handleWatchEnter();
      }, 400 - (register.grade - 1) * 15);
    };

    //函数节流
    const throttle = (fn, wait) => {
      var timer = null;
      return function () {
        var _this = this;
        var args = arguments;
        if (!timer) {
          timer = setTimeout(function () {
            fn.apply(_this, args);
            timer = null;
          }, wait);
        }
      };
    };

    const init = () => {
      document.querySelector(".snake-head").style.cssText =
        "left:" + 0 + "px;top:" + 0 + "px";
      document.querySelector(".snake-body").innerHTML = "";
      document.querySelector(".grade").innerText = register.grade;
      document.querySelector(".score").innerText = register.score;
      changeFoodSeat();
      handleWatchEnter();
    };

    document.addEventListener("keydown", (e) => {
      if (
        (e.code == "ArrowUp" && direction != "ArrowDown") ||
        (e.code == "ArrowLeft" && direction != "ArrowRight") ||
        (e.code == "ArrowRight" && direction != "ArrowLeft") ||
        (e.code == "ArrowDown" && direction != "ArrowUp")
      ) {
        direction = e.code;
      }
    });
    init();
  </script>
</html>

结论

通过本教程，我们学习了如何使用HTML、CSS和JavaScript创建一个简单的贪吃蛇游戏。这个过程不仅涉及到前端开发的基础知识，还包括了游戏逻辑的设计。现在，你可以根据自己的需求扩展和优化这个游戏，或者尝试创建其他类型的网页游戏。祝你编程愉快！

感谢你的访问，期待与你在技术的道路上相遇！👋🌟🚀

洛可可白
关注
  • 27
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
使用 HTML、CSS 和 JavaScript 定制私人版的刮刮乐【一看就会】
孤寒者的博客
08-24 20万+
刮刮乐想必大家都玩过，小时候兜里一有钱，就喊上小伙伴兴冲冲的跑去家旁边的小卖部，用那稚嫩地小手递给老板那被捏的皱巴巴的五毛钱，满眼期待的刮着买来的刮刮乐，心里早已想好中了100块钱大钞要去买好多好多辣条、卡片、陀螺、奥迪双钻的悠悠球… 认认真真看完本文，你就可以用你女朋友的美照实现一个独属于你的刮刮乐哦！（当然如果你没有女朋友的话，也可以用你珍藏多年的美女图片哦！） ⛳️使用HTML、CSS和JavaS实现刮刮卡/刮刮乐♥️别着急，先看演示????使用HTML、CSS和JavaS实现刮刮乐????第①步：
前端领域：html+css+javascript实现贪吃蛇游戏
01-23
JavaScript是一种高级编程语言，用于在网页上实现交互和动态性。它是一种面向对象的语言，具有类似于C语言的语法和功能。 JavaScript最初是为了在网页上添加简单的交互功能而创建的，但随着时间的推移，它已经发展成为一种功能强大且广泛使用的语言。它可以用于开发前端和后端应用程序，并且可以在不同的平台和设备上运行。 HTML（超文本标记语言）是一种用于创建网页的标记语言。它由一系列标签组成，这些标签描述了网页的结构和内容。HTML标签告诉浏览器如何显示网页的元素，例如标题、段落、图像、链接等。 CSS（层叠样式表）是一种用于描述网页的样式和外观的语言。CSS与HTML结合使用，用于控制网页中的布局、颜色、字体、大小、边距等方面的样式。
HTML+js实现贪吃蛇小游戏（内含完整代码）
最新发布
2301_79055083的博客
05-05 986
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
html+js实现贪吃蛇小游戏
qq_45142260的博客
04-06 2903
使用原生js+html实现贪吃蛇小游戏,功能：蛇移动，蛇死亡（撞墙，咬到自己），蛇吃到食物成长，暂停，开始，重新开始。
HTML5+JavaScript贪吃蛇游戏代码
洛谷小蒟蒻
02-16 326
【代码】HTML5+JavaScript贪吃蛇游戏代码。
Web前端---HTML+CSS+JS实现的贪吃蛇游戏，大佬推荐
2401_84097745的博客
04-04 1038
/方块对应的DOM元素//方块的父级，并添加到页面square.prototype.create = function() { //创建方块DOM//removeChild() === 从列表中删除一个项目//蛇//存一个蛇头的信息//存一个蛇尾的信息//存储蛇身上的每一个方块的位置this.directionNum = { //存储蛇走的方向，用一个对象来表示left: {x: -1,y: 0,
Web前端---HTML+CSS+JS实现的贪吃蛇游戏
2401_84097393的博客
04-08 599
由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容，详细完整版的JavaScript面试题文档，或更多前端资料可以点此处获取。[外链图片转存中…(img-NkrACBBH-1712546816317)]既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！[外链图片转存中…(img-LfFZceJW-1712546816317)]
前端编写贪吃蛇游戏-附详细代码
一步一个脚印，踏实努力，向着目标前进
06-23 1801
当我们在前端编写贪吃蛇游戏时，可以按照以下步骤进行：先看截图： 设置游戏板：创建一个HTML元素作为游戏板，可以使用元素，并为其设置合适的样式。绘制蛇和食物：使用JavaScript代码在游戏板上绘制蛇和食物。可以使用CSS样式设置蛇和食物的样式。移动蛇：编写函数来移动蛇的身体和头部。可以使用数组来表示蛇的身体，数组中的每个元素表示蛇的一个部分，如头部、身体和尾部。监听键盘事件：使用JavaScript代码监听键盘事件，根据按键来改变蛇的移动方向。检查碰撞：编写函数来检查蛇是否碰到边界或自身。如果蛇碰到边界
HTML+CSS+JAVAscript详细手册（包含9个chm文档）
03-12
2- Html和css网页标准指南.chm 3- JavaScript参考手册.chm 4- JavaScript参考手册中文版.chm 5- Javascript高级教程.CHM 6- JavaScript使用手册.chm 7- 网页制作完全手册.chm 8- 样式表滤镜中文手册.CHM 9- 样式表...
Html+Css+Javascript从入门到精通.pdf
09-27
#### 第三部分：使用JavaScript与用户交互 **第十六章：JavaScript语言概况** - **JavaScript简介**：了解JavaScript的历史和发展。 - **特点与其他语言对比**：JavaScript的独特之处。 - **运行环境**：介绍...
html+CSS+js贪吃蛇
07-10
HTML+CSS+JS实现一个简单贪吃蛇的功能，一百多行的代码
javascript+css贪吃蛇
06-09
javascript+CSS版本贪吃蛇，兼容性没做处理，火狐、IE11下可以，其他版本没有测试
html+css贪吃蛇
08-23
代码包含注释，简单易懂，资源已经过测试，无bug，无需任何附带资源可直接网页执行，反正很方便就对了................
前端技术搭建贪吃蛇小游戏（内含源码）
热门推荐
官方推荐
05-29 6万+
利用前端基础HTML、CSS、JS来搭建简易版本贪吃蛇小游戏，内附源码，直接拷贝即可运行，没有前端基础的小伙伴也可以通过文章中的讲解搭建出来！
手把手教你基于HTML、CSS搭建我的相册（上）
官方推荐
03-20 1万+
通过有趣的demo来带你掌握前端基础
前端贪吃蛇小游戏（HTML、CSS、JS）
我们好像在哪见过~
06-20 728
这是CSS代码，为游戏页面的样式和布局进行描述，这里只做了简单的样式，可以根据自己的需求添加样式。这是JS代码，用来设小蛇的动态效果和数据处理等功能，代码上有解析和注释。这是HTML代码，用来描述贪吃蛇小游戏页面的结构和内容。
贪吃蛇（HTML+CSS+JavaScript）
weixin_60629460的博客
04-20 2074
js实现简易贪吃蛇
网页版贪食蛇【基于HTML+CSS+JavaScript】实现
lei20172017的博客
05-04 2047
最终效果 HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/style.css"> <title>贪食蛇</title> </head> <body> <div id="map" style="backg
Web前端---HTML+CSS+JS实现的贪吃蛇游戏(1)
2401_84435885的博客
04-29 241
,up: {x: 0,y: -1,},down: {x: 0,y: 1,rotate: 90},//创建蛇头//存储蛇头信息this.pos.push([2, 0]) //把蛇头的位置存起来//创建蛇身体1//把蛇身的位置存起来//创建蛇身体2//把蛇尾的信息存起来//把蛇身的位置存起来//形成链表关系//给蛇添加一条属性，用来表示蛇走的方向//默认让蛇往右走//这个方法用来获取蛇头的下一个位置对应的元素，要根据素材做不同的事情。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

洛可可白

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值