当前位置： 首页 > news >正文

web端使用HTML5开发《贪吃蛇》小游戏教程【附源码】

news 2025/11/5 11:15:20

 自制游戏列表 

1植物大战僵尸自制HTML5游戏《植物大战僵尸》
2开心消消乐自制HTML5游戏《开心消消乐》
3贪吃蛇自制HTML5游戏《贪吃蛇》
4捕鱼达人自制HTML5游戏《捕鱼达人》

一、游戏简介

        贪吃蛇是一款经典的电子游戏，最早在1976年由Gremlin公司推出，名为"Blockade"。游戏的玩法简单却富有挑战性，玩家控制一条蛇在封闭的场地内移动，通过吃食物增长身体，同时避免撞到自己的身体或场地边界。随着时间的推移，贪吃蛇游戏经历了多次演变，但其核心玩法依然受到玩家的喜爱。

二、为什么选择贪吃蛇游戏

  1. 经典性：贪吃蛇是一款历史悠久的游戏，其经典性使得它成为学习编程和游戏开发的理想选择。

  2. 简单性：游戏规则简单，易于理解，适合初学者作为编程练习项目。

  3. 互动性：贪吃蛇游戏具有高度的互动性，玩家需要快速反应和策略思考。

  4. 可扩展性：基础游戏可以扩展多种功能，如增加难度级别、特殊道具等，为学习者提供更多实践机会。

三、游戏目标

        贪吃蛇游戏的主要目标是控制蛇头吃到随机出现在游戏场地的苹果，每吃到一个苹果，蛇的身体就会增长一段。玩家需要避免蛇头撞到自己的身体或游戏场地的边界。游戏的难度会随着蛇身的增长而增加，玩家的目标是尽可能获得更高的分数。

四、游戏界面设计

游戏界面通常由以下几个部分组成：

  1. 游戏画布：一个矩形区域，作为蛇移动和吃苹果的场所。

  2. 蛇：由多个小方块组成，每个方块代表蛇的身体部分，蛇头通常有特殊的标识。

  3. 苹果：一个单独的方块，随机出现在游戏画布上，作为蛇的食物。

  4. 得分板：显示玩家当前的得分和游戏等级。

五、游戏逻辑概述

游戏逻辑主要包括以下几个方面：

  1. 初始化：设置游戏初始状态，包括蛇的位置、长度和方向，苹果的位置，以及得分和等级。

  2. 键盘控制：监听键盘按键，根据玩家的输入改变蛇的移动方向。

  3. 移动逻辑：更新蛇的位置，使其按照指定方向移动。

  4. 碰撞检测：检查蛇头是否撞到自己、边界或苹果。

  5. 吃苹果：如果蛇头碰到苹果，更新苹果的位置，增长蛇的身体，并增加得分。

  6. 游戏结束：如果蛇撞到自己或边界，显示游戏结束的提示，并结束游戏循环。

  7. 得分和等级：根据吃到的苹果数量增加得分，并根据得分调整游戏难度。

六、创建基本的HTML5文档结构

        在创建贪吃蛇游戏之前，首先需要构建一个基本的HTML5文档结构。这个结构包括了文档的头部（head）和主体（body），其中头部用于引入CSS样式和JavaScript脚本，而主体则包含了游戏的所有元素。

源代码示例 - HTML5文档结构

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>贪吃蛇游戏</title><link rel="stylesheet" href="styles/base.css"><link rel="stylesheet" href="styles/snake.css">
</head>
<body><!-- 游戏画布和元素将在此处添加 --><script src="scripts/snake.js"></script>
</body>
</html>

设定游戏画布 (<div id="box">)

游戏画布是一个<div>元素，它作为游戏的容器，包含了蛇、苹果和得分板。这个<div>具有固定的宽度和高度，并且使用CSS样式来设置其位置和外观。

源代码示例 - HTML中的游戏画布

<div id="box"><!-- 蛇的身体由列表项组成，苹果是一个div，得分板将在JavaScript中动态添加 --><ul id="snake"></ul><div id="apple"></div>
</div>
<div id="score">得分: <span id="score-value">0</span> 等级: <span id="level-value">1</span></div>

添加游戏元素（蛇头、蛇身、苹果、得分板）

  1. 蛇头：通常用一个带有图片的<li>元素表示，这个<li>是<ul id="snake">的第一个子元素。

  2. 蛇身：由多个<li>元素组成，这些元素将通过JavaScript动态添加到蛇的列表中。

  3. 苹果：用一个<div id="apple">表示，它的位置将通过JavaScript动态设置。

  4. 得分板：一个包含得分和等级的<div>元素，位于游戏画布之外。

源代码示例 - JavaScript中添加蛇头和蛇身

window.onload = function() {var snakeList = document.getElementById('snake');var snakeHead = document.createElement('li');snakeHead.innerHTML = '<img src="head.png" alt="蛇头">'; // 假设有一个蛇头图片snakeList.appendChild(snakeHead);
​// 初始蛇身长度，例如5个单位for (var i = 0; i < 5; i++) {var snakeBodyPart = document.createElement('li');snakeList.appendChild(snakeBodyPart);}
​var apple = document.getElementById('apple');// 设置苹果的初始位置apple.style.left = '100px';apple.style.top = '100px';
};

七、效果图

        91a18701a04d49d1964c4118d70d7401.gif

八、完整代码

        HTML

<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8"><title></title><link rel="stylesheet" href="base.css" /><link rel="stylesheet" href="snake.css" /><script src="snake.js"></script>
</head><body><div id="score">得分: <span>0</span>等级: <span>1</span></div><div id="box"><ul id="snake"><li class="heihei" id="head"><img src="right.png" alt="" /></li><li class="heihei"></li><li class="heihei"></li><li class="heihei"></li><li class="heihei"></li><li class="heihei"></li><li class="heihei"></li><li class="heihei"></li></ul><div id="apple"></div></div><script></script>
</body></html>

        snake.css

#box{width: 800px;height: 600px;position: relative;background-color: #d5e3bd;border: 1px solid #000;margin: 30px auto;
}
#snake{/*position: absolute;*//*top: 200px;*//*left: 350px;*/
}
.heihei{width: 20px;height: 20px;/*border: 1px solid #000;*/border-radius: 10px;background-color: rgb(13, 113, 85);position: absolute;text-align: center;line-height: 20px;position: absolute;top: 200px;left: 350px;color: white;
}
#head img{width: 20px;
}
#apple{width: 20px;height: 20px;background-color: darkred;position: absolute;top: 140px;left: 400px;
}
#score{width: 100px;height: 100px;border: 1px solid #000;position: absolute;text-align: center;line-height: 100px;left: 1100px;z-index: 1;
}

        base.css

@charset "UTF-8";
/*css 初始化 */
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {margin: 0;padding: 0;
}/*各浏览器显示不同，去掉蓝色边框*/
fieldset, img, input, button {border: none;padding: 0;margin: 0;outline-style: none;
}ul, ol {list-style: none;
}/*统一组合框的默认样式*/
input {padding-top: 0;padding-bottom: 0;font-family: "sums-song", "宋体";
}select, input, button {vertical-align: middle;
}select, input, textarea {font-size: 12px;margin: 0;
}/*防止拖动 影响布局*/
textarea {resize: none;
}/*去掉行内替换元素空白缝隙*/
img {border: 0;vertical-align: middle;
}table {border-collapse: collapse;
}body {font: 12px/150% Arial, Verdana, "\5b8b\4f53"; /*宋体 unicode */color: #666;background: #fff;
}/*清除浮动*/
.clearfix:before, .clearfix:after {content: "";display: table;
}.clearfix:after {clear: both;
}.clearfix {*zoom: 1; /*IE/7/6*/
}a {color: #666;text-decoration: none;
}a:hover {color: #C81623;
}h1, h2, h3, h4, h5, h6 {text-decoration: none;font-weight: normal;font-size: 100%;
}s, i, em {font-style: normal;text-decoration: none;
}/*京东色*/
.col-red {color: #C81623 !important;
}/*公共类*/
.w {/*版心 提取 */width: 1210px;margin: 0 auto;
}.fl {float: left;
}.fr {float: right;
}.al {text-align: left;
}.ac {text-align: center;
}.ar {text-align: right;
}.hide {display: none;
}

        js代码

window.onload = function() {var ul = document.getElementById("snake");var lis = ul.children;var head = lis[0];var img = head.getElementsByTagName("img")[0];var box = document.getElementById("box");var apple = document.getElementById("apple");var score = document.getElementById("score").getElementsByTagName("span")[0];var level = document.getElementById("score").getElementsByTagName("span")[1];var gameOver;var square = 20;var dirArr = {left: { name: "left", key: 65, point: { x: -1, y: 0 }, img: "left.png" },right: { name: "right", key: 68, point: { x: 1, y: 0 }, img: "right.png" },up: { name: "up", key: 87, point: { x: 0, y: -1 }, img: "up.png" },down: { name: "down", key: 83, point: { x: 0, y: 1 }, img: "down.png" }};var dirList = [];var currentDir = dirArr["right"];document.onkeydown = function(event) {var event = event || window.event;addDirection(event.keyCode);}function addDirection(key) {var dir;// 获取方向for (k in dirArr) {if (dirArr[k].key == key) {dir = dirArr[k];}}if (!dir) {return;}//获取上一次的方向var lastDirection = dirList[dirList.length - 1];if (!lastDirection) { lastDirection = currentDir }if (lastDirection.name == dir.name) {return;} else if (lastDirection.point.x + dir.point.x == 0 && lastDirection.point.y + dir.point.y == 0) {return;}if (dirList.length > 3) {return;}dirList.push(dir);}function getDirection(arr) {if (arr.length != 0) {currentDir = arr.shift();}return currentDir;}function point(x, y) {this.x = x;this.y = y;}function move() {//处理按键队列var d = getDirection(dirList);img.src = d.img;//下一个要走的点var pre = new point(head.offsetLeft + d.point.x * square, head.offsetTop + d.point.y * square);//死亡判定机制if (die(pre)) {clearInterval(timer)alert("GAME_OVER");return;}//吃的机制if (eat(pre)) {console.log("eat");}//移动身子for (var i = lis.length - 1; i > 0; i--) {lis[i].style.left = lis[i - 1].offsetLeft + "px";lis[i].style.top = lis[i - 1].offsetTop + "px";}head.style.left = pre.x + "px";head.style.top = pre.y + "px";}var timer = setInterval(move, 300);function die(p) {var left = p.x;var right = p.x + head.offsetWidth;var toper = p.y;var bottom = p.y + head.offsetHeight;for (var i = 1; i < lis.length - 1; i++) {if (left == lis[i].offsetLeft && toper == lis[i].offsetTop)return 1;}if (left < 0 || toper < 0 || right > box.offsetWidth || bottom > box.offsetHeight) {console.log(1)return 1;}}//初始化for (var i = 0; i < lis.length; i++) {lis[i].idx = i;lis[i].style.left = -square * i + "px";var backgroundColor = parseInt(255 * 255 * 255 * Math.random());lis[i].style.backgroundColor = "#" + backgroundColor.toString(16);}//吃function eat(p) {if (p.x == apple.offsetLeft && p.y == apple.offsetTop) {apple.style.left = 20 * Math.floor(Math.random() * 39) + "px";apple.style.top = 20 * Math.floor(Math.random() * 29) + "px";var li = document.createElement("li");li.className = "heihei";var backgroundColor = parseInt(255 * 255 * 255 * Math.random());li.style.backgroundColor = "#" + backgroundColor.toString(16);ul.appendChild(li);score.innerHTML++;clearInterval(timer);var scoreLevel = Math.floor(score.innerHTML / 4);level.innerHTML = scoreLevel + 1;var timeLevel = scoreLevel > 7 ? 7 : scoreLevel;timer = setInterval(move, 250 - timeLevel * 25);}}
}

相关文章：

web端使用HTML5开发《贪吃蛇》小游戏教程【附源码】

自制游戏列表 1植物大战僵尸自制HTML5游戏《植物大战僵尸》2开心消消乐自制HTML5游戏《开心消消乐》3贪吃蛇自制HTML5游戏《贪吃蛇》4捕鱼达人自制HTML5游戏《捕鱼达人》 一、游戏简介 贪吃蛇是一款经典的电子游戏&#xff0c;最早在1976年由Gremlin公司推出&#xff0c;名为…...

编程日记 2024/7/30 15:09:12

Selenium使用教程-Selenium环境搭建与基础操作

Selenium环境搭建与基础操作 1. 引言&#xff1a;Selenium简介​ Selenium&#xff0c;作为自动化测试领域的明星工具&#xff0c;以其强大的跨浏览器测试能力而闻名。它支持多种编程语言&#xff08;如Java、Python、C#等&#xff09;&#xff0c;允许开发者编写脚本来模拟真…...

编程日记 2024/7/30 15:08:10

1950年-2021年中国历年民航航线里程统计报告

数据为1950年到2021年我国每年的民航航线总里程数据。 2021年&#xff0c;我国定期航班航线总里程为689.78万公里&#xff0c;相比2019年下降了258.44万公里。 数据统计单位为&#xff1a;公里. 数据说明&#xff1a; 2011年起民航航线里程改为定期航班航线里程 我国定期航班…...

编程日记 2024/7/30 15:07:09

前端了解到框架-网络复习

前端 HTML 超文本标记语言 画页面 各种各样的标签组成页面进行展示 桌面创建文本修改后缀即可 <!DOCTYPE html>: 声明文档类型和HTML版本。<html>: 根标签&#xff0c;所有其他标签都包含在内。<head>: 包含了文档的元数据&#xff0c;如字符编码、网页标…...

编程日记 2024/7/30 15:06:08

防火墙——网络环境支持

目录 网络环境支持 防火墙的组网 web连接上防火墙 web管理口 让防火墙接到网络环境中 ​编辑 管理员用户管理 缺省管理员 接口 配置一个普通接口 创建安全区域 路由模式 透明模式 混合模式 防火墙的安全策略 防火墙转发流程 与传统包过滤的区别 创建安全策略 …...

编程日记 2024/7/30 15:05:06

阅读笔记：明朝那些事儿之拐弯中的帝国

​万历皇帝时期内阁首辅&#xff1a; 张居正&#xff0c;申时行&#xff0c;王锡爵&#xff0c;许国&#xff0c;王家屏&#xff0c;赵志皋&#xff08;给皇帝写辞职信没有回音&#xff0c;自己不告而回家&#xff09;&#xff0c;沈一贯&#xff0c;于慎行&#xff0c;叶向高…...

编程日记 2024/7/30 15:01:00

React基础知识 精简全面 推荐

这篇博文主要对一些刚入门react框架的同学&#xff0c;以及对react基本知识进行巩固的&#xff0c;最后就是精简一下基本知识&#xff0c;以方便自己查看&#xff0c;感谢参考&#xff0c;有问题评论区交流&#xff0c;谢谢。 目录 1.JSX 2.Props 和 State 3.组件生命周期…...

编程日记 2024/7/30 14:58:57

OV SSL证书申请指南

OV SSL证书除了验证域名所有权外还需要验证组织信息&#xff0c;这类证书适用于对公司官网、品牌、安全性等有较高程度要求的企业级用户。具体申请流程如下&#xff1a; 一 、注册账号 注册账号填写230919注册码即可获得大额优惠券和全程一对一技术支持https://www.joyssl.co…...

编程日记 2024/7/30 14:55:53

变色树脂的变色原理？变色树脂在水处理中的应用？

变色树脂是一种具有特殊功能的高分子材料&#xff0c;能够在特定条件下改变其颜色&#xff0c;从而指示环境变化&#xff08;如pH值、温度、特定离子浓度等&#xff09;或反应进程。这类树脂通常含有能够响应特定刺激的化学结构&#xff0c;通过化学反应、离子交换、分子构象变…...

编程日记 2024/7/30 14:54:51

16 敏捷开发实践（1）

敏捷方法&#xff1a;是一种从1990年代开始逐渐引起广泛关注的一些新型软件开发方法&#xff0c;是一种应对快速变化的需求的一种软件开发能力。 敏捷开发&#xff1a;是一种以人为核心、迭代、循序渐进的开发方法。 敏捷实践&#xff1a;精益软件开发&#xff08;LSD&#x…...

编程日记 2024/7/30 14:53:50

如何使用虚拟机如何安装 Kali Linux ？

1.下载虚拟机&#xff1a;https://www.virtualbox.org/wiki/Downloads 选择你的系统版本 2.下载kali linux系统镜像&#xff1a;https://www.kali.org/get-kali/#kali-virtual-machines 全部下载完成后&#xff0c;我们会得到以下文件&#xff01; 1.压缩Kali Linux压缩包 2.安…...

编程日记 2024/7/30 14:52:48

Yarn UI 时间问题，相差8小时

位置 $HADOOP_HOME/share/hadoop/yarn/hadoop-yarn-common-2.6.1.jar 查看 jar tf hadoop-yarn-common-2.6.1.jar |grep yarn.dt.plugins.js webapps/static/yarn.dt.plugins.js 解压 jar -xvf hadoop-yarn-common-2.6.1.jar webapps/static/yarn.dt.plugins.js inflated: we…...

编程日记 2024/7/30 14:49:45

【JavaWeb项目】——外卖订餐系统之登入、登入后显示餐品信息、用户注册、注销部分

&#x1f3bc;个人主页&#xff1a;【Y小夜】 &#x1f60e;作者简介&#xff1a;一位双非学校的大二学生&#xff0c;编程爱好者&#xff0c; 专注于基础和实战分享&#xff0c;欢迎私信咨询&#xff01; &#x1f386;入门专栏&#xff1a;&#x1f387;【MySQL&#xff0…...

编程日记 2024/7/30 14:48:44

怎么保护电脑文件夹？文件夹保护方法大盘点

文件夹是管理电脑数据的重要工具&#xff0c;可以有效避免数据混乱。而为了避免文件夹数据泄露&#xff0c;我们需要严格保护文件夹。下面我们就来盘点一下文件夹的保护方法。 文件夹隐藏 隐藏文件夹是一种简单有效的保护方式&#xff0c;通过隐藏文件夹来避免其他人发现&…...

编程日记 2024/7/30 14:47:42

Temporal（时效）模式01

Andy Carlson, Sharon Estepp, Martin Fowler 著&#xff0c;透明 译 抽象 在面向对象设计中&#xff0c;我们不断使用“对象”&#xff08;object&#xff09;这个词。对象不仅仅用来表现真实世界中存在的物件&#xff0c;它们也被用来表现那些曾经存在但已经消失了的物件&…...

编程日记 2024/7/30 14:46:41

C语言 -- 动态内存管理

C语言 -- 动态内存管理 1. 为什么要有动态内存分配2. malloc 和 free2.1 malloc2.2 free 3. calloc 和 realloc3.1 calloc3.2 realloc 4. 常见的动态内存的错误4.1 对NULL指针的解引用操作4.2 对动态开辟空间的越界访问4.3 对非动态开辟内存使用free释放4.4 使用free释放一块动…...

编程日记 2024/7/30 14:44:39

docker 篇

简单描述下&#xff0c;有时候真的要熟练&#xff0c;否者上了生产真的不知所措。 背景&#xff1a;有个项目上线了&#xff0c;依赖的项目没有上线&#xff0c;因此需要紧急发布&#xff0c;发现&#xff1a;打包环境有问题&#xff0c;第一、架构不一致&#xff0c;第二、环…...

编程日记 2024/7/30 14:43:37

汽车、能源、烟草、电力行业洞见：TDengine 用户大会亮点荟萃

近年来&#xff0c;随着物联网、车联网、工业互联网等前沿技术的迅猛发展&#xff0c;全球数据量呈指数级增长。作为大数据的一个重要组成部分&#xff0c;时序数据因其在实时监控、预测分析和智能决策中的独特优势&#xff0c;正逐步成为数字化转型的关键要素。尤其在 AI 时代…...

编程日记 2024/7/30 14:39:32

从零开始编写一个Chrome插件：详细教程

个人名片 🎓作者简介：java领域优质创作者 🌐个人主页：码农阿豪 📞工作室：新空间代码工作室（提供各种软件服务） 💌个人邮箱：[2435024119@qq.com] 📱个人微信：15279484656 🌐个人导航网站：www.forff.top 💡座右铭：总有人要赢。为什么不能是我呢？ 专栏导…...

编程日记 2024/7/30 14:38:31

photoshop学习笔记——选区3 快速选择工具

快速选择工具 W shift W 在3种快速选择工具之间切换 对象选择工具 photoshop CC中没有这个工具&#xff0c;利用AI&#xff0c;将款选中的对象快速的提取选区&#xff0c;测试了一下&#xff0c;选区制作的非常nice快速选择工具 跟磁性套索类似&#xff0c;自动识别颜色相似…...

编程日记 2024/7/30 14:36:29

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

编程新知 2025/8/12 16:28:43

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする 1、前言（1）情况说明（2）工程师的信仰2、知识点（1）　にする1，接续：名词＋にする2，接续：疑问词＋にする3，（A）は（B）にする。（2）復習：（1）复习句子（2）ために　＆　ように（３）そう（４）にする3、…...

编程新知 2025/10/29 10:05:16

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++，无法导入ardupilot代码，会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

编程新知 2025/11/3 13:25:48

多种风格导航菜单 HTML 实现（附源码）

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

编程新知 2025/10/30 22:15:39

聊一聊接口测试的意义有哪些？

目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开&#xff0c;首…...

编程新知 2025/10/14 6:46:13

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

编程新知 2025/10/14 9:02:38

ip子接口配置及删除

配置永久生效的子接口&#xff0c;2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

编程新知 2025/10/26 5:04:25

算法：模拟

1.替换所有的问号 1576. 替换所有的问号 - 力扣&#xff08;LeetCode&#xff09; ​遍历字符串​&#xff1a;通过外层循环逐一检查每个字符。​遇到 ? 时处理​&#xff1a; 内层循环遍历小写字母&#xff08;a 到 z&#xff09;。对每个字母检查是否满足&#xff1a; ​与…...

编程新知 2025/10/26 21:21:16

CSS | transition 和 transform的用处和区别

省流总结&#xff1a; transform用于变换/变形&#xff0c;transition是动画控制器 transform 用来对元素进行变形&#xff0c;常见的操作如下&#xff0c;它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...

编程新知 2025/10/17 20:59:57

Python 训练营打卡 Day 47

注意力热力图可视化 在day 46代码的基础上&#xff0c;对比不同卷积层热力图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import DataLoader import matplotlib.pypl…...

编程新知 2025/10/26 9:51:09