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

html5：从零构建经典游戏-扫雷游戏

news 来源：原创 2025/6/16 1:06:19

扫雷是Windows系统自带的经典游戏，陪伴了许多人的童年。

本文将详细解析一个用HTML、CSS和JavaScript实现的扫雷游戏代码，带你了解其背后的实现原理。

游戏概述

这个扫雷游戏实现包含以下核心功能：

10×10的游戏棋盘

15个随机分布的地雷

左键点击揭开格子

右键点击标记地雷

自动展开空白区域

胜利/失败判定

HTML结构

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>扫雷游戏</title><!-- CSS样式 -->
</head>
<body><h1>扫雷游戏</h1><div id="game-board"></div><!-- JavaScript代码 -->
</body>
</html>

结构非常简单，只有一个标题和游戏板容器。所有游戏逻辑都通过JavaScript动态生成。

CSS样式设计

CSS部分定义了游戏的外观：

.cell {width: 30px;height: 30px;border: 1px solid #ccc;/* 其他样式 */
}
.cell.revealed {background-color: #fff;
}
.cell.mine {background-color: #ff4444;
}
.cell.flagged {background-color: #ffcc00;
}

基本格子样式：灰色背景，浅灰色边框
已揭开格子：白色背景
地雷格子：红色背景
标记格子：黄色背景

JavaScript游戏逻辑

1. 游戏初始化

javascript

const BOARD_SIZE = 10;
const MINE_COUNT = 15;
let board = [];
let gameOver = false;

定义了游戏常量：棋盘大小和地雷数量，以及游戏状态变量。

2. 创建游戏板

createBoard()函数负责初始化游戏：

设置CSS Grid布局
创建格子DOM元素并添加到游戏板
初始化游戏数据结构
放置地雷并计算数字

javascript

function createBoard() {// 设置Grid布局gameBoard.style.gridTemplateColumns = `repeat(${BOARD_SIZE}, 30px)`;// 创建格子for (let row = 0; row < BOARD_SIZE; row++) {board[row] = [];for (let col = 0; col < BOARD_SIZE; col++) {// 创建DOM元素const cell = document.createElement('div');// 添加事件监听cell.addEventListener('click', handleCellClick);cell.addEventListener('contextmenu', handleRightClick);// 初始化游戏数据board[row][col] = { mine: false, revealed: false, flagged: false, count: 0 };}}placeMines();calculateNumbers();
}

3. 随机放置地雷

placeMines()函数随机放置指定数量的地雷：

javascript

function placeMines() {let minesPlaced = 0;while (minesPlaced < MINE_COUNT) {const row = Math.floor(Math.random() * BOARD_SIZE);const col = Math.floor(Math.random() * BOARD_SIZE);if (!board[row][col].mine) {board[row][col].mine = true;minesPlaced++;}}
}

使用while循环确保放置足够数量的地雷，避免重复放置。

4. 计算周围地雷数

calculateNumbers()为每个非地雷格子计算周围地雷数量：

javascript

function calculateNumbers() {for (let row = 0; row < BOARD_SIZE; row++) {for (let col = 0; col < BOARD_SIZE; col++) {if (board[row][col].mine) continue;let count = 0;// 检查周围8个格子for (let i = -1; i <= 1; i++) {for (let j = -1; j <= 1; j++) {const newRow = row + i;const newCol = col + j;// 边界检查if (newRow >= 0 && newRow < BOARD_SIZE && newCol >= 0 && newCol < BOARD_SIZE && board[newRow][newCol].mine) {count++;}}}board[row][col].count = count;}}
}

5. 处理玩家点击

左键点击处理函数handleCellClick：

javascript

function handleCellClick(event) {if (gameOver) return;const cell = event.target;const row = parseInt(cell.dataset.row);const col = parseInt(cell.dataset.col);revealCell(row, col);
}

右键点击处理函数handleRightClick用于标记地雷：

javascript

function handleRightClick(event) {event.preventDefault(); // 阻止上下文菜单if (gameOver) return;const cell = event.target;const row = parseInt(cell.dataset.row);const col = parseInt(cell.dataset.col);if (!board[row][col].revealed) {board[row][col].flagged = !board[row][col].flagged;cell.classList.toggle('flagged', board[row][col].flagged);}
}

6. 揭开格子逻辑

revealCell()是游戏核心函数，处理格子揭开逻辑：

javascript

function revealCell(row, col) {// 已揭开或已标记则返回if (board[row][col].revealed || board[row][col].flagged) return;const cell = document.querySelector(`.cell[data-row='${row}'][data-col='${col}']`);board[row][col].revealed = true;cell.classList.add('revealed');// 踩到地雷if (board[row][col].mine) {cell.classList.add('mine');gameOver = true;alert('游戏结束！你踩到了地雷！');return;}// 显示周围地雷数cell.textContent = board[row][col].count || '';// 如果是空白格子，自动展开周围if (board[row][col].count === 0) {for (let i = -1; i <= 1; i++) {for (let j = -1; j <= 1; j++) {const newRow = row + i;const newCol = col + j;// 边界检查if (newRow >= 0 && newRow < BOARD_SIZE && newCol >= 0 && newCol < BOARD_SIZE) {revealCell(newRow, newCol);}}}}checkWin();
}

7. 胜利判定

checkWin()检查玩家是否已揭开所有安全格子：

javascript

function checkWin() {let unrevealedSafeCells = 0;for (let row = 0; row < BOARD_SIZE; row++) {for (let col = 0; col < BOARD_SIZE; col++) {if (!board[row][col].mine && !board[row][col].revealed) {unrevealedSafeCells++;}}}if (unrevealedSafeCells === 0) {gameOver = true;alert('恭喜你，你赢了！');}
}

游戏特点

递归展开：当点击空白格子时，会自动展开相邻的所有空白格子
即时反馈：点击地雷立即结束游戏，显示失败
标记功能：右键点击可以标记疑似地雷的格子
响应式设计：使用CSS Grid布局，适应不同屏幕大小

总结

这个扫雷游戏实现展示了如何使用基本的Web技术创建经典游戏。

通过合理的数据结构和算法设计，实现了游戏的核心逻辑。代码结构清晰，适合初学者学习和扩展。

html代码

如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>扫雷游戏</title><style>body {font-family: Arial, sans-serif;text-align: center;}#game-board {display: grid;margin: 20px auto;border: 2px solid #333;}.cell {width: 30px;height: 30px;border: 1px solid #ccc;text-align: center;line-height: 30px;cursor: pointer;background-color: #eee;}.cell.revealed {background-color: #fff;cursor: default;}.cell.mine {background-color: #ff4444;}.cell.flagged {background-color: #ffcc00;}</style>
</head>
<body><h1>扫雷游戏</h1><div id="game-board"></div><script>const BOARD_SIZE = 10;const MINE_COUNT = 15;let board = [];let gameOver = false;function createBoard() {const gameBoard = document.getElementById('game-board');gameBoard.style.gridTemplateColumns = `repeat(${BOARD_SIZE}, 30px)`;for (let row = 0; row < BOARD_SIZE; row++) {board[row] = [];for (let col = 0; col < BOARD_SIZE; col++) {const cell = document.createElement('div');cell.classList.add('cell');cell.dataset.row = row;cell.dataset.col = col;cell.addEventListener('click', handleCellClick);cell.addEventListener('contextmenu', handleRightClick);gameBoard.appendChild(cell);board[row][col] = { mine: false, revealed: false, flagged: false, count: 0 };}}placeMines();calculateNumbers();}function placeMines() {let minesPlaced = 0;while (minesPlaced < MINE_COUNT) {const row = Math.floor(Math.random() * BOARD_SIZE);const col = Math.floor(Math.random() * BOARD_SIZE);if (!board[row][col].mine) {board[row][col].mine = true;minesPlaced++;}}}function calculateNumbers() {for (let row = 0; row < BOARD_SIZE; row++) {for (let col = 0; col < BOARD_SIZE; col++) {if (board[row][col].mine) continue;let count = 0;for (let i = -1; i <= 1; i++) {for (let j = -1; j <= 1; j++) {const newRow = row + i;const newCol = col + j;if (newRow >= 0 && newRow < BOARD_SIZE && newCol >= 0 && newCol < BOARD_SIZE && board[newRow][newCol].mine) {count++;}}}board[row][col].count = count;}}}function handleCellClick(event) {if (gameOver) return;const cell = event.target;const row = parseInt(cell.dataset.row);const col = parseInt(cell.dataset.col);revealCell(row, col);}function handleRightClick(event) {event.preventDefault();if (gameOver) return;const cell = event.target;const row = parseInt(cell.dataset.row);const col = parseInt(cell.dataset.col);if (!board[row][col].revealed) {board[row][col].flagged = !board[row][col].flagged;cell.classList.toggle('flagged', board[row][col].flagged);}}function revealCell(row, col) {if (board[row][col].revealed || board[row][col].flagged) return;const cell = document.querySelector(`.cell[data-row='${row}'][data-col='${col}']`);board[row][col].revealed = true;cell.classList.add('revealed');if (board[row][col].mine) {cell.classList.add('mine');gameOver = true;alert('游戏结束！你踩到了地雷！');return;}cell.textContent = board[row][col].count || '';if (board[row][col].count === 0) {for (let i = -1; i <= 1; i++) {for (let j = -1; j <= 1; j++) {const newRow = row + i;const newCol = col + j;if (newRow >= 0 && newRow < BOARD_SIZE && newCol >= 0 && newCol < BOARD_SIZE) {revealCell(newRow, newCol);}}}}checkWin();}function checkWin() {let unrevealedSafeCells = 0;for (let row = 0; row < BOARD_SIZE; row++) {for (let col = 0; col < BOARD_SIZE; col++) {if (!board[row][col].mine && !board[row][col].revealed) {unrevealedSafeCells++;}}}if (unrevealedSafeCells === 0) {gameOver = true;alert('恭喜你，你赢了！');}}createBoard();</script>
</body>
</html>

html5：从零构建经典游戏-扫雷游戏

扫雷是Windows系统自带的经典游戏，陪伴了许多人的童年。本文将详细解析一个用HTML、CSS和JavaScript实现的扫雷游戏代码，带你了解其背后的实现原理。游戏概述这个扫雷游戏实现包含以下核心功能： 1010的游戏棋盘 15个随机分布的地雷左…...

编程日记 2025/5/26 14:44:11

SVT-AV1源码分析-函数svt_aom_motion_estimation_kernel

一 svt_aom_motion_estimation_kernel函数作用这段代码是EBSDK 中的一个运动估计内核函数，用于处理视频编码中的运动估计任务。运动估计任务。运动估计是视频编码中的一个关键步骤，目的是在时间域上找到当前块在参考帧中的最佳匹配块，从而减…...

编程日记 2025/5/28 16:07:30

考研系列-计算机组成原理第六章、总线

一、总线概述 1.总线的基本概念 2.总线的分类 (1)按照传输格式并行总线的传输速度并不一定比串行总线快，因为并行总线之间存在干扰，不能太快。 (2)按照总线功能片内总线、系统总线、IO总线、通信总线...

编程日记 2025/5/28 6:58:33

HTML基础完全解析

一、HTML基本结构解析 1.1 文档骨架 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><title>文档标题</title> </head> <body>页面主体内容 </body> </html> &#x1f3…...

编程日记 2025/6/1 16:10:13

【读写视频】MATLAB详细代码

MATLAB将视频逐帧输出在MATLAB中，可以使用VideoReader和imwrite函数将视频逐帧输出为图像文件。以下是具体步骤和示例代码： 读取视频并逐帧保存为图像首先，使用VideoReader函数读取视频文件，然后使用read函数逐帧读取视频&am…...

编程日记 2025/5/26 6:38:13

代码仓库 https://github.com/NVIDIA/nccl-tests 代码编译编译 nccl-tests (MPI 版本): ” 编译支持 MPI 的 nccl-tests 是整合 nvcc, mpicc 和 NCCL 库的关键步骤初始编译命令 (基于 README): cd /path/to/your/nccl-tests # 进入源码目录 make clean make MPI1 CUDA_HO…...

编程日记 2025/5/29 11:15:55

Linux 在个人家目录下添加环境变量如FLINK_PROPERTIES=“jobmanager.rpc.address: jobmanager“

问题： Docker Flink Application Mode 命令行形式部署前，需要在Linux执行以下： $ FLINK_PROPERTIES"jobmanager.rpc.address: jobmanager" $ docker network create flink-network 临时变量只在当前session会话窗口生效&#xf…...

编程日记 2025/6/1 16:19:22

Linux中线程池的简单实现 -- 线程安全的日志模块，策略模式，线程池的封装设计，单例模式，饿汉式单例模式，懒汉式单例模式

目录 1. 对线程池的理解 1.1 基本概念 1.2 工作原理 1.3 线程池的优点 2. 日志与策略模式 2.1 日志认识 2.2 策略模式 2.2.1 策略模式的概念 2.2.2 工作原理 2.2 自定义日志系统的实现 3. 线程池设计 3.1 简单线程池的设计 3.2 线程安全的单例模式线程池的设计 3…...

编程日记 2025/5/26 7:16:57

【Web API系列】深入解析 Web Service Worker 中的 WindowClient 接口：原理、实践与进阶应用

前言在现代 Web 开发领域中，Service Worker 技术已成为构建离线优先应用和实现高级缓存策略的核心支柱。作为 Service Worker API 体系中的重要组成部分，WindowClient 接口为开发者提供了对受控客户端窗口的精准控制能力。本文将从实际工程实践的角度出…...

编程日记 2025/5/29 17:59:12

哈希封装unordered_map和unordered_set的模拟实现

文章目录 （一）认识unordered_map和unordered_set（二）模拟实现unordered_map和unordered_set2.1 实现出复用哈希表的框架2.2 迭代器iterator的实现思路分析2.3 unordered_map支持[] （三）结束语 （…...

编程日记 2025/5/29 11:14:06

智诚科技苏州SOLIDWORKS授权代理商的卓越之选

在当今数字化转型浪潮中，SOLIDWORKS软件以其强大的功能和广泛的行业应用，成为企业迈向智能制造的有力工具。它不仅提供直观的3D建模环境，帮助企业设计师快速创建精准的3D模型，还涵盖了从概念设计到详细设计、从样品制作到最终产品…...

编程日记 2025/5/27 5:44:40

【网络原理】从零开始深入理解TCP的各项特性和机制.(二)

本篇博客给大家带来的是TCP/IP原理的知识点,重点以TCP为主,接续上篇. 🐎文章专栏: JavaEE初阶 🚀若有问题评论区见 ❤ 欢迎大家点赞评论收藏分享如果你不知道分享给谁,那就分享给薯条. 你们的支持是我不断创作的动力 . 王子,公主请阅🚀 …...

编程日记 2025/5/24 16:14:01

51单片机所有寄存器介绍

51单片机所有寄存器介绍作者将狼才鲸创建日期2025-04-27 参考资料：Intel官方《MCS-51 Programmer’s Guide and Instruction Set.pdf》CSDN阅读地址：51单片机所有寄存器介绍一、前言 51单片机的寄存器和ARM不一样，有自己专有的名称&…...

编程日记 2025/5/28 8:06:27

4.27算法题

力扣649.Dota2 参议院 649. Dota2 参议院 Dota2 的世界里有两个阵营：Radiant（天辉）和 Dire（夜魇） Dota2 参议院由来自两派的参议员组成。现在参议院希望对一个 Dota2 游戏里的改变作出决定。他们以一个基于轮为过程…...

编程日记 2025/5/27 5:43:57

衡石科技：HENGSHI SENSE 数据权限解决方案

编写目的本方案主要讲述 HENGSHI SENSE 的数据权限方案，即在 HENGSHI SENSE 系统中，通过同步企业内部的人员属性和组织架构等信息，实现企业内部的每一个用户对于业务数据的读取权限。本方案的的预期读者为：HENGSHI SENSE 的…...

编程日记 2025/5/31 7:26:55

矩阵系统源码搭建热门音乐功能板块开发，支持OEM

在数字音乐蓬勃发展的当下，矩阵系统中的热门音乐功能板块成为吸引用户的重要部分。它不仅能为用户推荐当下流行的音乐，还能提升用户在系统中的活跃度和留存率。本文将通过详细的源码搭建过程，带你了解如何在矩阵系统中实现一个功能完备的热门…...

编程日记 2025/5/29 19:34:14

深入理解Android Activity生命周期

引言在Android开发中，理解Activity的生命周期对于创建高效、稳定的应用程序至关重要。无论你是初学者还是资深开发者，掌握Activity生命周期的概念都能帮助你更好地管理资源、优化性能以及处理各种用户交互场景。本文将详细介绍Activity生命周期中的各个事件，并通过示例代码…...

编程日记 2025/5/27 8:27:14

【WEB3】web3.0是什么

互联网在不断发展。我们即将翻开新的篇章，迎来翻天覆地的变化。 — Web 1.0 只能阅读信息。它主要是供我们访问和阅读信息，只有极少数人可以真正发布内容。 — Web 2.0，即互联网目前所处的阶段，我们能够在网络上发布内容、建立…...

编程日记 2025/5/29 10:02:54

2025上海车展 | 移远通信重磅发布AR脚踢毫米波雷达，重新定义“无接触交互”尾门

4月25日，在2025上海国际汽车工业展览会期间，全球领先的物联网和车联网整体解决方案供应商移远通信宣布，其全新AR脚踢毫米波雷达RD7702AC正式发布。该产品专为汽车尾门“无接触交互”设计，基于先进的毫米波技术，融合AR…...

编程日记 2025/5/29 16:02:43

ubuntu安装git及使用（本地git）

ubuntu安装git及使用教程（本地git） 1.ubuntu安装git1.1 查看自己的Ubuntu是否已经装有git1.2 下面进行介绍如何Ubuntu终端安装git （若已安装则可忽略） 2. 配置Git基本信息2.1 若不清楚是否配置的可使用如下命令查看2.2 未配置用户…...

编程日记 2025/5/28 16:47:19

数智读书笔记系列031《HIS内核设计之道——医院信息系统规划设计系统思维》书籍简介与读书笔记

一、作者与出版信息作者团队（核心贡献者）任连仲身份：中国工程院院士（2022年当选），解放军总医院信息科原主任技术贡献：主导“军字一号”系统架构设计（1997-2005年），支撑全国300余家三甲医院信息化建设提出“医疗数据语义网格”理论，获国家科技进步二等奖（2018年…...

编程日记 2025/5/29 13:53:02

WinForm真入门(18)——DateTimePicker‌控件解析

一、基本概念‌ ‌DateTimePicker‌ 是 Windows 窗体中用于选择日期和时间的控件，支持以下交互方式： 通过下拉日历选择日期通过上下按钮调整时间直接输入日期或时间适用于需要规范日期格式、限制日期范围或快速输入的场景（如预约系统、数据…...

编程日记 2025/5/26 6:44:56

关于堆栈指针的那些事 | bootloader 如何跳转app

问题描述堆栈指针的值通常存储在 App 的向量表（Vector Table）的第一个位置（0x08002000），为什么？ 在嵌入式系统中，堆栈指针（SP）的值存储在应用程序（App&…...

编程日记 2025/5/28 17:55:19

如何在 iPhone 上恢复已删除的联系人：简短指南

从 iPhone 中删除联系人相当容易，但如果您不小心删除了错误的联系人或丢失了所有联系人怎么办？这可能是任何智能手机用户都可能发生的最糟糕的噩梦之一。如何在 iPhone 上恢复已删除的联系人我个人在我的列表上看到几个用户发布关于他们如何丢失所有联…...

编程日记 2025/5/26 6:05:17

使用Aspose.Words将Word转换为HTML时，字体样式丢失问题及解决方法

使用Aspose.Words将Word转换为HTML时，字体样式丢失问题及解决方法引言 ✨一、问题描述 📉二、问题分析 🔍三、解决方案 🛠️四、总结 🏁 引言 ✨ 在实际开发中，使用Aspose.Words将Word文档转换为HTML格式…...

编程日记 2025/5/27 1:17:14

更快的图像局部修改与可控生成：Flex.2-preview

Flex.2-preview 文本生成图像扩散模型介绍一、模型简介 Flex.2-preview 是一种开源的 80 亿参数文本生成图像扩散模型，具备通用控制和修复支持功能，是 Flex.1alpha 的下一代版本。该模型由社区开发并为社区服务，采用 Apache 2.0 许可证&a…...

编程日记 2025/5/28 8:34:42

汽车制造行业如何在数字化转型中抓住机遇？

近年来，随着新一轮科技革命和产业变革的深入推进，汽车制造行业正迎来一场前所未有的数字化转型浪潮。无论是传统车企还是新势力品牌，都在积极探索如何通过数字化技术提升竞争力、开拓新市场。那么，在这场变革中，汽车制…...

编程日记 2025/5/29 13:37:25

数据可视化 —— 直方图

一、前言直方图（Histogram）是一种用柱状图形表示数据分布的统计图表，它将数据划分为连续的区间（称为“分箱”或“区间”），统计每个区间内的数据频数（或频率），并用柱形的…...

编程日记 2025/5/29 9:29:34

1、Linux操作系统下，ubuntu22.04版本切换中英文界面

切换中英文界面的方法很多，我也是按照一个能用的方法弄过来并且记录， 1.如果刚开始使用Ubuntu环境，桌面的语言环境为英文，需要安装中文简体的字体包打开桌面终端，输入 sudo apt install language-pack-zh-hans lan…...

编程日记 2025/5/31 19:49:53

《MySQL 技术内幕-innoDB 存储引擎》笔记

💡 根据遗忘曲线：如果没有记录和回顾，6天后便会忘记75%的内容读书笔记正是帮助你记录和回顾的工具，不必拘泥于形式，其核心是：记录、翻看、思考::: 书名MySQL 技术内幕-innoDB 存储引擎作者姜承尧状态已读…...

编程日记 2025/5/31 9:48:46

C++ AVL树的实现

在上一篇博客我们学习了二叉搜索树的实现，现在我们开始手动实现AVL树。二叉搜索树-CSDN博客 1.AVL树的概念 AVL树是最先发明的⾃平衡⼆叉查找树，AVL是⼀颗空树，或者具备下列性质的⼆叉搜索树：它的左右⼦树都是AVL树&#xff0c…...

编程日记 2025/5/29 13:14:38

多视觉编码器协同与高低分辨率特征融合技术综述

本文主要介绍（论文发表时间：24.03-25.01）在多模态中使用多个视觉编码器如何进行特征融合操作（之所以用多视觉编码器，主要用途在于：有些视觉编码器可能只能提取到部分信息，就想通过另外一个编码器…...

编程日记 2025/5/29 16:19:05

力扣4-最长公共前缀

一.题目编写一个函数来查找字符串数组中的最长公共前缀。如果不存在公共前缀，返回空字符串 ""。示例 1： 输入：strs ["flower","flow","flight"] 输出："fl"示例 2&…...

编程日记 2025/5/29 10:07:34

贪心算法-860.柠檬水找零-力扣(LeetCode)

一、题目解析我们需要注意我们是没有初始零钱的，所以当第一个顾客支付10或20时，无法找零此时返回false。二、算法解析根据贪心算法的解决方式，我们需要先把解决该问题分解为若干步。首先对于顾客支付的钱共有三种，5&#xf…...

编程日记 2025/6/1 16:47:15

Kubernetes学习笔记-配置Service对接第三方访问

在Kubernetes中配置Service对接第三方访问，可以选择以下方案实现： ExternalName Service（基于DNS别名）‌ 适用场景‌：外部服务必须有固定域名Service配置文件如下： apiVersion: v1 kind: Service metadata…...

编程日记 2025/5/27 6:06:41

pikachu靶场-敏感信息泄露

一、敏感信息泄露的危害 1. 个人隐私与数据安全身份盗窃：泄露个人身份信息（如姓名、身份证号、手机号）可被用于诈骗、冒名开户等犯罪活动。账户劫持：暴露用户账号密码、邮箱等凭证，导致社交媒体、银行账户被非法登录。…...

编程日记 2025/5/28 15:57:56

ppt章节页怎么做好看？ppt章节页模板

ppt章节页怎么做好看？ppt章节页怎么排版？ppt章节页模板: PPT章节_模板素材_PPT模板_ppt素材_免抠图片_AiPPTer...

编程日记 2025/5/27 7:25:28

ubuntu扩展逻辑卷并调整文件系统大小步骤

安装好ubuntu如果没有调整磁盘空间,一般默认给你100G的空间,在用完时再调整也还来得及,下面是 ubuntu扩展逻辑卷并调整文件系统大小步骤： 1. 扩展逻辑卷运行以下命令来扩展逻辑卷 /dev/ubuntu-vg/ubuntu-lv，使其使用卷组中所有未分配的空间&#xff…...

编程日记 2025/5/29 13:09:59

2.脚本文件初识

—>1.Makefile—自动化构建和管理项目的文件见这篇<— 1.编程语言编程语言分为2类，一类是编译型语言，将源文件经过编译得到可执行文件，该执行文件可以在特定平台上运行，其他平台则不行，因此是不跨平台的编程语…...

编程日记 2025/5/27 7:08:19

FastAPI + Redis Pub/Sub + WebSocket 组合解决方案的详细介绍

以下是对 FastAPI Redis Pub/Sub WebSocket 组合解决方案的详细介绍，涵盖技术原理、实现步骤、协作流程和适用场景。 1. 技术概述 1.1 FastAPI 特性：基于 Python 的现代异步框架，支持 async/await，性能高效，适合高…...

编程日记 2025/5/26 14:44:24

泛型的诗意——深入C++模板的艺术与科学（模版进阶）

前言： 在之前，小编讲述了模版的初阶内容，当时小编讲述了模版的书写，方便之后容器的讲解以及模拟实现，现在小编已经带领各位学习了很多容器，模版初阶的知识已经用的很多了，今天小编讲述一下全新的…...

编程日记 2025/6/3 15:42:31

【极致版】华为云Astro轻应用抽取IoTDA影子设备参数生成表格页面全流程

做份极致详细Astro调取iotda影子设备数据的操作手册，每一步都分成： 要进入哪个界面点哪个按钮要填什么内容（样例） 如果出错怎么办填写示例完全对应你这个需求：Astro轻应用抽取IoTDA影子设备数据，…...

编程日记 2025/5/28 7:04:04

业务中台与数据中台：企业数字化转型的核心引擎

前言：在当今数字化浪潮下，企业为了提升运营效率、加速创新步伐并更好地适应市场变化，业务中台与数据中台应运而生，成为企业架构中的关键组成部分。本文将深入探讨业务中台和数据中台的简介、发展史、技术流环节以及在实际生产中的…...

编程日记 2025/5/29 12:04:32

前端分页与瀑布流最佳实践笔记 - React Antd 版

前端分页与瀑布流最佳实践笔记 - React Antd 版 1. 分页与瀑布流对比分页（Pagination）瀑布流（Infinite Scroll）展示方式按页分批加载，有明确页码控件滚动到底部时自动加载更多内容，无明显分页用户控制用…...

编程日记 2025/5/26 6:51:44

【网络原理】从零开始深入理解TCP的各项特性和机制.(三)

上篇介绍了网络原理传输层TCP协议的知识,本篇博客给大家带来的是网络原理剩余的内容, 总体来说,这部分内容没有上两篇文章那么重要,本篇知识有一个印象即可. 🐎文章专栏: JavaEE初阶 🚀若有问题评论区见 ❤ 欢迎大家点赞评论收藏分享如果你不知道分…...

编程日记 2025/5/24 13:25:11

MySQL：13.用户管理

13. 用户管理如果我们只能使用root用户，这样存在安全隐患。这时，就需要使用MySQL的用户管理。 13.1 用户 13.1.1 用户信息 MySQL中的用户，都存储在系统数据库mysql的user表中 mysql> use mysql; Database changed mysql> select h…...

编程日记 2025/5/28 16:45:18

leetcode0103. 二叉树的锯齿形层序遍历-medium

1 题目：二叉树的锯齿形层序遍历官方标定难度：中给你二叉树的根节点 root ，返回其节点值的锯齿形层序遍历。（即先从左往右，再从右往左进行下一层遍历，以此类推，层与层之间交替进行&#xf…...

编程日记 2025/5/29 14:25:50

【Go语言】ORM（对象关系映射）库

github.com/jinzhu/gorm 是 Go 语言中一个非常流行的 ORM（对象关系映射）库，用于简化与关系型数据库的交互。以下是关于它的关键信息： 核心特点全功能 ORM 支持主流数据库：MySQL、PostgreSQL、SQLite、SQL Server 等。…...

编程日记 2025/5/27 14:24:41

Java : GUI

AWT 初始化界面直接封装起来： panel 的添加布局流式布局,控制按钮的位置东西南北中布局网格布局 frame.pack();java函数，会自动选择最优的布局事件监听给按钮添加添加文本画笔鼠标监听键盘监听 JDialog”弹窗默认有关闭事件标签&#…...

编程日记 2025/5/29 10:22:43

ipa包安装到apple手机上

获ipa包的方式 ipatool 下载appStore的ipa包-CSDN博客方式一：巨魔商店原理是利用apple的漏洞，但是有低版本的系统要求 TrollStore - Always Sideload Any IPAs For FreeTrollStore - The ultimate jailbreak app for iOS. Permanently install any …...

编程日记 2025/5/26 6:05:20

游戏概述

HTML结构

CSS样式设计

JavaScript游戏逻辑

1. 游戏初始化

2. 创建游戏板

3. 随机放置地雷

4. 计算周围地雷数

5. 处理玩家点击

6. 揭开格子逻辑

7. 胜利判定

游戏特点

总结

html代码

相关文章：