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

HTML 迷宫游戏

news 来源：原创 2025/5/6 8:56:00

HTML 迷宫游戏

相关资源文件已经打包成压缩文件，可双击index.html直接运行程序，且文章末尾已附上相关源码，以供大家学习交流，博主主页还有更多Python相关程序案例，秉着开源精神的想法，望大家喜欢，点个关注不迷路！！！

1. 简介：

迷宫游戏一个网页操作类小游戏，操作方法也很简单，用键盘的方向键控制即可（所以手机不能玩）,如果你觉得太简单，可以随时调整迷宫的宽和高，增加迷宫的难度，刷新网页后迷宫还原。也可用于网站的404报错页面，打发无聊的休闲时间。

2. 运行效果：

在这里插入图片描述

3. 相关源码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>迷宫游戏</title>
<meta name="description" content="想玩玩益智小游戏？精心制作的小游戏“迷宫”一定符合你的要求！" />
<meta name="keywords" content="在线小游戏 - 走迷宫" />
<link href="css/style.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/navbar-fixed-top.css" rel="stylesheet">
<link href="css/bootstrap-select.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style_1.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.hotkey.js"></script>
</head>
<div id="circle"></div><div id="circle1"></div>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"><div class="container"><div class="navbar-collapse collapse" id="example-navbar-collapse"></ul></div></div>
</nav>
<div class="container">
<h1 class="title">迷宫游戏</h1>
<div class="centerd">
<p>规则：从左上角出发，终点为右下角红旗处。</p>
<div id="mg" class="mg centerd"></div>
<br />
<p>提示：请使用PC电脑端玩！您可以使用键盘上的上下左右方向键控制迷宫中图标的移动。</p>
<strong>设置：</strong>
<p><input type="checkbox" onclick="mark(1, this);" id="mark1" /> <label for="mark1">将走过的格子用红色标出</label></p><form class="form-inline"><div class="form-group">宽：<input type="text" class="form-control" id="mg_width" value="20" size="4" maxlength="2" onkeypress="return isNumber(event)" /></div><div class="form-group">高：<input type="text" class="form-control" id="mg_height" value="20" size="4" maxlength="2" onkeypress="return isNumber(event)" /></div><button type="button" class="btn btn-default" onclick="new_mg();">生成新迷宫</button>
</form>
</div>
</div>
<div id="footer"><div class="container"></div>
</div>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-select.js"></script>
<script src="js/bootstrap-select.min.js"></script>
<script src="js/function.js"></script>
<script src="js/script.js"></script>
<script>
$(window).load(function() {$("#circle").fadeOut(500);$("#circle1").fadeOut(700);
});
</script>
<script>
function new_mg() {var w = parseInt(document.getElementById("mg_width").value) || 20,h = parseInt(document.getElementById("mg_height").value) || 20;mg.set({width: w, height: h}).create().show();document.getElementById("mg_width").value = w;document.getElementById("mg_height").value = h;count();
}
function count() {$.get("stat/count.py", {r: Math.random()}, function (r) {r = r.replace(/[\r\n\s]/g, "");if (r.match(/^\d+$/))$("#count").html(r);});
}
function mark(h, ob) {mg.me.setMark(h, ob.checked);
}
var mg = new MG("mg");
new_mg();
</script>
</body>
</html>

HTML 迷宫游戏

HTML 迷宫游戏相关资源文件已经打包成压缩文件，可双击index.html直接运行程序，且文章末尾已附上相关源码，以供大家学习交流，博主主页还有更多Python相关程序案例，秉着开源精神的想法，望大家喜欢&#xff0…...

编程日记 2025/5/6 8:56:00

【面试题】技术场景 4、负责项目时遇到的棘手问题及解决方法

工作经验一年以上程序员必问问题面试题概述问题为在负责项目时遇到的棘手问题及解决方法，主要考察开发经验与技术水平，回答不佳会影响面试印象。提供四个回答方向，准备其中一个方向即可。 1、设计模式应用方向以登录为例，未…...

编程日记 2025/5/4 0:43:37

Autoencoder（李宏毅）机器学习 2023 Spring HW8 (Boss Baseline)

1. Autoencoder 简介 Autoencoder是一种用于学习数据高效压缩表示的人工神经网络。它由两个主要部分组成： Encoder 编码器将输入数据映射到一个更小的、低维空间中的压缩表示，这个空间通常称为latent space或bottleneck。这一过程可以看作是数据压缩，去除冗余信息，仅保留…...

编程日记 2025/5/4 2:50:08

Python的循环

Python的循环 Python的循环有两种，分别是for…in循环和while循环。 for…in 循环假设我们要循环输出一个列表里的元素： names [张三,李四,王五] for name in names:print(name)执行这段代码后，会依次打印names的每一个元素：…...

编程日记 2025/5/7 4:23:47

车联网安全--TLS握手过程详解

目录 1. TLS协议概述 2. 为什么要握手 2.1 Hello 2.2 协商 2.3 同意 3.总共握了几次手？ 1. TLS协议概述车内各ECU间基于CAN的安全通讯--SecOC，想必现目前多数通信工程师们都已经搞的差不多了（不要再问FvM了）；…...

编程日记 2025/5/6 15:55:05

Git | git stash命令详解

关注：CodingTechWork 引言在日常开发中，使用Git版本控制系统时，可能会遇到需要暂时中断当前工作，去处理其他任务的情况。这时，如果直接切换分支，可能会导致当前的修改未提交而丢失或需要暂时保存修改的状…...

编程日记 2025/5/6 17:16:14

LeetCode hot100-100

287. 寻找重复数给定一个包含 n 1 个整数的数组 nums ，其数字都在 [1, n] 范围内（包括 1 和 n），可知至少存在一个重复的整数。假设 nums 只有一个重复的整数 ，返回这个重复的数。你设计的解决方案必须不修改数组…...

编程日记 2025/5/7 5:16:27

AWS re:Invent 2024 现场实录 - It‘s all about Scale

时隔五年，再度造访美国，也是同样的主题，参加在拉斯维加斯举行的 AWS re:Invent 大会。会场从 2012 起第一届开始，每年的 re:Invent 大会都放在拉斯维加斯，主会场也都放在威尼斯人酒店 (Venetian)。有小伙伴好奇这背…...

编程日记 2025/5/7 4:34:16

qt-C++笔记之自定义继承类初始化时涉及到parents的初始化

qt-C笔记之自定义继承类初始化时涉及到parents的初始化 code review! 参考笔记 1.qt-C笔记之父类窗口、父类控件、对象树的关系 2.qt-C笔记之继承自 QWidget和继承自QObject 并通过 getWidget() 显示窗口或控件时的区别和原理 3.qt-C笔记之自定义类继承自 QObject 与 QWidget …...

编程日记 2025/5/7 4:41:37

[微服务]redis数据结构

介绍我们常用的Redis数据类型有5种，分别是： StringListSetSortedSetHash 还有一些高级数据类型，比如Bitmap、HyperLogLog、GEO等，其底层都是基于上述5种基本数据类型。因此在Redis的源码中，其实只有5种数据类型。 …...

编程日记 2025/5/7 4:55:38

android四大组件之一——Service

目录一、Service概述二、生命周期三、权限四、进程生命周期五、组件与绑定Service的通信方式 1.扩展 Binder 类 2.Messenger信使 3.AIDL 七、总结场景使用区别一、Service概述 Service 是应用组件，代表一个应用的长时间后台运行的操作&#xff0…...

编程日记 2025/5/7 4:52:55

PythonOpenCV图片识别

在windows下面，使用python opencv 进行识别，获取到坐标。依赖安装： pip install opencv-python pip install numpy pip install pyautogui pip install pywin32代码： import cv2 import numpy as np import pyautogui import o…...

编程日记 2025/5/7 4:28:58

ASP.NET Core 中使用 Cookie 身份验证

在 ASP.NET Core 中使用 Cookie 身份验证，通常是为了实现用户的登录和授权。以下是配置 Cookie 身份验证的步骤。 1. 安装必要的 NuGet 包首先，确保项目中包含 Microsoft.AspNetCore.Authentication.Cookies 包。你可以通过 NuGet 包管理器或命令行安…...

编程日记 2025/5/7 4:40:18

2021 年 3 月青少年软编等考 C 语言五级真题解析

目录 T1. 红与黑思路分析T2. 密室逃脱思路分析T3. 求逆序对数思路分析T4. 最小新整数思路分析T1. 红与黑有一间长方形的房子，地上铺了红色、黑色两种颜色的正方形瓷砖。你站在其中一块黑色的瓷砖上，只能向相邻的黑色瓷砖移动。请写一个程序，计算你总共能够到达多少块黑色的…...

编程日记 2025/5/6 20:01:35

LeetCode带环链表题深度解析(是否带环、寻找环的入口结点)

目录一、链表是否带环常规方法解析： 拓展问题：那么fast一次走三步，走四步...是否还会相遇？ fast ：3 ，low ：1 fast ：4 ，low ：1 总结： 二、…...

编程日记 2025/5/7 4:42:58

Redis--20--大Key问题解析

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录大Key问题1.什么是 Redis 大 Key？在 Redis 中，大 Key 是指单个键值对的数据量非常大，可能包含大量数据。 2. Redis大Key的危害3.…...

编程日记 2025/5/3 6:08:06

如何使用Yarn Workspaces实现Monorepo模式在一个仓库中管理多个项目

Yarn Workspaces是Yarn提供的一种依赖管理机制，它支持在单个代码仓库中管理多个包的依赖。这种机制非常适合需要多个相互依赖的包的项目，能够减少重复依赖，加快依赖安装速度，并简化依赖管理。下面将详细介绍如何使用Yarn Workspac…...

编程日记 2025/4/28 13:49:15

测试ip端口-telnet开启与使用

前言开发过程中我们总会要去测试ip通不通，或者ip下某个端口是否可以联通，为此我们可以使用telnet 命令来实现。一、telnet 开启可能有些人使用telnet报错，不是内部命令，可以如下开启： 1、打开控制面板&#xff…...

编程日记 2025/5/3 7:56:16

c#版本、.net版本、visual studio版本之间的对应关系

最近这几年一直没用过c#开发，都是从事Qt c开发工作，回想一下之前c#还要追溯到2019年，算算时间大概都已过去4，5年了，时间飞快。 2019真是个神奇的数字，vs2019是我用的时间最长的一个IDE，新冠起始…...

编程日记 2025/5/5 2:06:00

大语言模型训练

步骤 Self-Supervised Pre-Training，简称SPTSupervised Fine-Tuning，简称SFTLearning from Human Feedback，简称LfHF Self-Supervised Pre-Training 自监督预训练（Self-Supervised Pre-Training，简称SPT&#xff09…...

编程日记 2025/5/6 7:36:58

ElasticSearch | Elasticsearch与Kibana页面查询语句实践

关注：CodingTechWork 引言在当今大数据应用中，Elasticsearch（简称 ES）以其高效的全文检索、分布式处理能力和灵活的查询语法，广泛应用于各类日志分析、用户行为分析以及实时数据查询等场景。通过 ES，用户…...

编程日记 2025/5/5 8:05:52

idea快捷键

IDEA常见快捷键 Ctrl A 全写 Ctrl C 粘贴 Ctrl V 复制 Ctrl F 搜索 Ctrl R 替换 Ctrl Z 撤销 Ctrl D 复制行 Ctrl X 删除行，并且被删除的行复制到剪贴板中 Ctrl Y 删除一行 Ctrl Shift Z 反撤销 IDEA重要快捷键 Ctrl / 单行注释&…...

编程日记 2025/5/1 7:51:37

2024年全国信息素养大赛-图形化编程-省赛-绘制正方和三角形

绘制正方和三角形【编程实现】使用自制积木，绘制正方形和三角形。【具体要求】 *程序尽量简洁。 1.画出喜庆的红色图形。 2.先画正方形，再画三角形。 3.正方形和三角形不重叠。 4.正方形和三角形不超出背最中红框的范围。题目程序演示可点击…...

编程日记 2025/5/6 6:50:26

二进制编码和 Base64编码

我需要将音频数据存为字符串，不知道存为二进制编码和 Base64编码以下内容来自 DeepSeek : 1. 二进制编码优点： 高效：二进制编码直接存储原始数据，占用空间小，处理速度快。适合传输：在需要高效传输的…...

编程日记 2025/4/30 19:20:25

直接写在app.wpy里面，全局可以调用 // 防止重复点击事件preventActive(fn) {const self this;if (this.globalData.PageActive) {this.globalData.PageActive false;if (fn) fn();setTimeout(() > {self.globalData.PageActive true;}, 3000); //设置该时间内…...

编程日记 2025/5/2 3:08:51

Kafka集群安装

Apache kafka是由Apache软件基金会开发的一个开源流处理平台，由Scala和Java编写。Kafka是一种高吞吐量的分布式发布订阅消息系统，是消息中间件的一种，用于构建实时数据管道和流应用程序。 Kafka官网：http://kafka.apache.org/ 安装环境： Kafka集群环境搭建，依赖于zookeep…...

编程日记 2025/5/7 4:58:16

EXCEL: (二) 常用图表

10. 图表 134-添加.删除图表元素图表很少是一个单独的整体，而是由十几种元素/对象拼凑出来的。学习图表就是学习当中各类元素的插删改。 ①图表中主要元素的定义图表上的一个颜色就是一个系列，每个系列都对应原数据中的一列/一行值数据。每个系…...

编程日记 2025/5/6 15:36:30

系统日志优化---自定义springboot-starter日志组件供各个服务使用

在优化项目时发现各个微服务都有各自的接口调用日志逻辑，比如每个服务都定义一个aop类拦截，十分冗余，其实是可以做成starter被各个服务引用使用，前提要先了解一下springboot自动装配原理创建springboot工程，如果是jdk…...

编程日记 2025/5/5 1:38:25

《GB50348-2018 安全防范工程技术标准》：安防工程的权威指南

《GB50348-2018 安全防范工程技术标准》：安防工程的权威指南【下载地址】GB50348-2018安全防范工程技术标准分享 GB50348-2018 安全防范工程技术标准本仓库提供的是《GB50348-2018 安全防范工程技术标准》的高清电子版资源项目地址: https://gitcode.com/Open-s…...

编程日记 2025/5/6 13:00:15

RabbitMQ高级篇

目录确保发送者的可靠为什么需要确保发送者的可靠性 RabbitMQ 的发送者重连机制配置 springAMQP实现发送者确认 MQ的可靠性为什么需要实现MQ的可靠性？ 数据持久化 Lazy Queue 核心思想总结RabbitMQ 如何保证消息的可靠性持久化 Lazy Queue 消息…...

编程日记 2025/5/6 13:37:15

任务调度系统Quartz.net详解2-Scheduler、Calendar及Listener

任务调度系统Quartz.net详解2-Scheduler、Calendar及Listener Scheduler 调度器scheduler是Quartz中的独立工作容器，所有的Trigger和Job都需要注册到scheduler中才能工作。我们可以通过SchedulerFactory来获取scheduler实例。如下： //1.获取默认的标准…...

编程日记 2025/5/6 17:11:29

服务器出现蓝屏现象的原因有什么？

当服务器定期出现蓝屏的现象，则会影响到企业业务的连续性，同时还可能会导致重要数据信息丢失和系统稳定性下降，是一种较为复杂的技术问题，本文就来探讨一下导致服务器出现蓝屏的原因都有什么。服务器出现蓝屏有可能是硬件出现了故…...

编程日记 2025/5/3 17:01:18

IP 地址与蜜罐技术

基于IP的地址的蜜罐技术是一种主动防御策略，它能够通过在网络上布置的一些看似正常没问题的IP地址来吸引恶意者的注意，将恶意者引导到预先布置好的伪装的目标之中。如何实现蜜罐技术当恶意攻击者在网络中四处扫描，寻找可入侵的目标时&…...

编程日记 2025/5/6 17:22:03

探索数据存储的奥秘：深入理解B树与B+树

key value 类型的数据红黑树（最优二叉树，内存最优），时间复杂度：O（logn）,调整方便；一个结点分出两个叉B树一个节点可以分出很多叉数据量相等的条件下：红黑树的层数很高&am…...

编程日记 2025/5/4 4:59:36

mac学习芋道源码记录

nodejs安装 v16.20.0 cd yudao-ui-admin-vue2 node install -g yarn yarn install npm run local改配置不然node install -g yarn报错前往-前往文件夹-/Library 创建 /nodejs/node_global /nodejs/node_cache npm config set prefix /Library/nodejs/node_global npm c…...

编程日记 2025/4/28 21:40:32

CCF 赛事介绍

CCF 赛事介绍中国计算机学会（CCF）举办了诸多具有影响力的赛事，面向不同年龄段与群体，各有其特色要求。一、青少年编程启蒙类 CCF 编程能力等级认证（GESP）： 适合年龄：涵盖中小学…...

编程日记 2025/5/7 5:00:59

MySQL表的约束

目录一、空属性二、默认值三、列描述四、zerofill 五、主键六、自增长七、唯一键八、外键一、空属性两个值：null（默认的）和not null(不为空) 数据库默认字段基本都是字段为空，但是实际开发时，尽可能…...

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

相互带节奏

有些单词在发音方面是相互带节奏的【1】 broccoli n.西兰花Berklee n.伯克利 Berklee College of Music 伯克利音乐学院【2】 college n.大学，学院colleague n.同事，僚 league n.联合会，联赛；联盟，同盟【3】…...

编程日记 2025/5/6 13:15:30

秒懂虚拟化（二）：服务器虚拟化、操作系统虚拟化、服务虚拟化全解析，通俗解读版

秒懂虚拟化（一）：从概念到网络、存储虚拟化全解析，通俗解读版-CSDN博客这篇文章学习了虚拟化的概念、网络虚拟化和存储虚拟化，本节将继续学习服务器虚拟化、操作系统虚拟化、服务虚拟化。 1、服务器虚拟化服务器虚拟…...

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

ubuntu 配置OpenOCD与RT-RT-thread环境的记录

1.git clone git://git.code.sf.net/p/openocd/code openocd 配置gcc编译环境 2. sudo gedit /etc/apt/source.list #cdrom sudo apt-get install git sudo apt-get install libtool-bin sudo apt-get install pkg-config sudo apt-install libusb-1.0-0-dev sudo apt-get…...

编程日记 2025/4/30 11:31:40

优化 MySQL 的慢查询

文章目录 1. 分析慢查询日志2. 优化查询语句3. 优化表结构4. 调整服务器参数5. 数据库引擎选择6. 缓存策略7. 定期维护数据库 1. 分析慢查询日志首先，要开启 MySQL 的慢查询日志，以便能够记录执行时间超过阈值的查询语句。可以通过修改 MySQL 配置文件…...

编程日记 2025/5/3 17:23:02

【机器学习】聚类评价指标之福尔克斯–马洛斯指数（Fowlkes–Mallows Index, FMI）

福尔克斯–马洛斯指数（Fowlkes–Mallows Index, FMI）是一种用于评估聚类结果与实际标签之间一致性的指标。FMI 值可以用于衡量聚类的准确性，特别是在有真值标签的监督评估场景中。计算公式 FMI 的计算基于以下公式： 其中&#…...

编程日记 2025/5/4 21:50:13

vue3模板引用ref

1.访问模板引用要在组合式 API 中获取引用，我们可以使用辅助函数 useTemplateRef() 只可以在组件挂载后才能访问模板引用 <script setup> import { useTemplateRef, onMounted } from vue// 第一个参数必须与模板中的 ref 值匹配 const input useTempla…...

编程日记 2025/5/6 15:07:36

20250111英语学习

place check in window seat; aisle seat boarding pass 登机牌 boarding pass depart from terminal C Gate 4 (Gate door entre to the plane) place : Check in window seat boarding pass 登机牌 depart from terminal C Gate 4 (Gate door entre to the plane) you…...

编程日记 2025/5/5 20:02:48

【Rust自学】11.6. 控制测试运行：并行和串行（连续执行）测试

喜欢的话别忘了点赞、收藏加关注哦，对接下来的教程有兴趣的可以关注专栏。谢谢喵！(･ω･) 11.6.1. 控制测试的运行方式 cargo test和cargo run一样，cargo test也会编译代码并生成一个二进制文件用于测试，…...

编程日记 2025/5/6 20:00:41

CSS3 弹性盒子

CSS3 弹性盒子介绍 CSS3 弹性盒子（Flexbox）是一种用于布局设计的强大工具。它提供了一种更加高效的方式来对容器内的子元素进行排列、对齐和分配空间。Flexbox 的设计目标是提供一种统一的布局模型，能够适应不同屏幕尺寸和设备类型&#x…...

编程日记 2025/5/6 6:19:39

LabVIEW 系统诊断

LabVIEW 系统诊断是指通过各种工具和方法检测、评估、分析和解决 LabVIEW 程序和硬件系统中可能存在的故障和性能问题。系统诊断不仅涵盖软件层面的调试与优化，还包括硬件交互、数据传输、实时性能等方面的检查和分析。一个成功的系统诊断能够显著提升LabVIEW应用程…...

编程日记 2025/5/4 17:12:06

UE5中制作地形材质

在创作大场景内容时，地形的设计和优化是至关重要的一步。利用UE中的地形系统，开发者能够高效地创建复杂的地形形态，同时保持游戏的性能和视觉效果。 1.在创建地形之前，先新建一个地形使用的混合材质球，添加节点Landsc…...

编程日记 2025/5/3 13:19:10

【题解】AT_abc388_e AtCoder Beginner Contest ABC388 E Simultaneous Kagamimochi

题目大意题目传送门——原题面链接建议阅读本次比赛 C 题题面。有 N N N 块米糕，按大小升序排列，第 i i i 块米糕的大小为 A i A_i Ai。现在定义“堆叠式米糕”如下： 首先，选出两个米糕 A A A 和 B B B&#xff0…...

编程日记 2025/5/2 23:59:45

2025年01月11日Github流行趋势

项目名称：xiaozhi-esp32 项目地址url：https://github.com/78/xiaozhi-esp32项目语言：C历史star数：2433今日star数：321项目维护者：78, MakerM0, whble, nooodles2023, Kevincoooool项目简介：构建…...

编程日记 2025/5/4 1:29:14

HTML 迷宫游戏

1. 简介：

2. 运行效果：

3. 相关源码：

相关文章：