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

HMTL+JS+CSS实现贪吃蛇游戏，包含有一般模式，困难模式，还有无敌模式

article 2026/2/14 8:01:28

HMTL+JS+CSS实现贪吃蛇游戏，包含有一般模式，困难模式，还有无敌模式（可以穿墙死不了，从左边进去可以从右边出来），显示当前分数和最高分，吃到的球颜色可以叠加到蛇身体上
为了适配手机端加了上下左右按钮；效果如下

在这里插入图片描述
···
大概结构:

  • 使用<div> 容器组织游戏界面，包含得分显示、游戏画布和操作按钮
  • 支持三种游戏模式选择（一般模式、困难模式、无敌模式）
  • 移动端和桌面端兼容，提供触摸和键盘两种控制方式

  1. CSS样式 ：

    • 采用Flex布局实现页面居中显示
    • 使用Grid布局实现方向按钮的排列
    • 定义了游戏容器的阴影、圆角等视觉效果
    • 为按钮添加了hover效果和过渡动画

  2. JavaScript逻辑 ：

    • 使用Canvas API实现游戏渲染
    • 实现了蛇的移动、食物生成、碰撞检测等核心游戏逻辑
    • 支持三种游戏模式，不同模式对应不同的游戏速度和规则
    • 使用localStorage保存最高分记录
    • 实现随机颜色生成，使游戏更具趣味性
      代码整体结构清晰，功能完整，具有良好的可扩展性和可维护性。
      ···
      源码地址

相关文章：

HMTL+JS+CSS实现贪吃蛇游戏，包含有一般模式，困难模式，还有无敌模式

HMTLJSCSS实现贪吃蛇游戏&#xff0c;包含有一般模式&#xff0c;困难模式&#xff0c;还有无敌模式&#xff08;可以穿墙死不了&#xff0c;从左边进去可以从右边出来&#xff09;&#xff0c;显示当前分数和最高分&#xff0c;吃到的球颜色可以叠加到蛇身体上 为了适配手机端…...

编程日记 2026/2/14 8:01:28

内网渗透——红日靶场二

目录 一、前期准备 DC机配置 PC机配置 WEB机配置 将PC机和WEB机的IP地址进行更改 开启WEB服务 二、外网探测 1.使用nmap扫描 2.目录扫描 3.漏洞扫描 &#xff08;1&#xff09;CVE-2017-3506&#xff08;getshell失败&#xff09; &#xff08;2&#xff09;CVE-201…...

编程日记 2026/2/14 4:37:43

【Unity】处理文字显示不全的问题

1.选中字体文件&#xff0c;检查 MultiAtlasTeextures 是否勾选&#xff0c;未勾选的话&#xff0c;先勾选保存后查看是否显示正常 2.勾选后未正常显示&#xff0c;则在搜索框中输入未显示的文本&#xff0c;确认字体图集是否包含该文本&#xff0c;然后点击Update Atlas Textu…...

编程日记 2026/2/12 18:20:44

深入解析力扣39.组合总和：回溯算法的妙用

题目描述 给定一个无重复元素的数组 candidates 和一个目标值 target&#xff0c;找出 candidates 中所有可以使数字和为 target 的组合。数组中的数字可以被重复使用。 示例&#xff1a; 输入: candidates [2,3,6,7], target 7 输出: [[2,2,3],[7]]代码解析 class Solut…...

编程日记 2025/12/6 10:35:19

汽车诊断开发入门以及OBD检测

一、OBD 概述 定义&#xff1a;OBD 即 On - Board Diagnostics&#xff0c;车载自动诊断系统。它能实时监测车辆各项系统和部件状态&#xff0c;以此帮助诊断故障并预警。设计初衷与发展&#xff1a;最初设计目的是控制汽车尾气排放&#xff0c;确保符合环境标准。随着技术进步…...

编程日记 2026/2/12 3:35:19

Android 中集成 Google 应用内评分

添加依赖 在项目的 build.gradle 文件中添加以下依赖&#xff1a; dependencies {// Java 依赖implementation com.google.android.play:review:2.0.1// Kotlin 依赖implementation com.google.android.play:review-ktx:2.0.1 }创建 ReviewManager 使用 ReviewManagerFactor…...

编程日记 2026/1/16 9:34:49

Ingredient-oriented Multi-Degradation Learning for Image Restoration论文阅读

摘要&#xff1a;重点在于关联多个任务本质的联系。 不同恢复任务的关联性很重要。 揭示退化现象的内在机理联系很有意义。 多合一的方法能在单一模型中处理多种退化问题&#xff0c;可扩展性较差。 成分导向范式挖掘不同图像退化现象背后的物理规律或特征模式。 成分导向退化重…...

编程日记 2026/2/14 1:21:20

避坑，c#开发人员学习开发app时.NET MAUI和Vue3 选择

经过一段时间学习vue3后才发现作为一个C#背景的开发人员从开发效率、调试便捷性、部署便利性考虑，Visual Studio + .NET MAUI 是更合适的选择，尤其是在跨平台原生应用开发场景中。以下是详细对比分析： 一、开发体验 1. 语言与生态适配 .NET MAUI：基于C#和.NET生态，与你现有…...

编程日记 2025/11/8 7:40:14

java项目挂机自动重启操作指南

前段时间有个伙伴问我&#xff0c;java项目挂机怎么自动重启。。。。。。今天就写一个 .sh脚本来实现应用挂机的自动重启功能 #!/bin/bash # 查询mita的进程个数 countps -ef | grep mita.jar | grep -v "grep" | wc -l # echo $count nowtimedate "%Y-%m-%d %H…...

编程日记 2026/2/9 4:34:27

Vue el-table-column内el-tooltip识别换行符 \n

结构&#xff1a; <el-table-column prop"callSummary" width"300" label"摘要"><template slot-scope"scope"><el-tooltip class"item" effect"dark" placement"top"><div v-ht…...

编程日记 2026/2/7 1:19:24

【C++指南】一文总结C++二叉搜索树

&#x1f31f; 各位看官好&#xff0c;我是egoist2023&#xff01; &#x1f30d; 种一棵树最好是十年前&#xff0c;其次是现在&#xff01; &#x1f680; 今天来学习C二叉搜索树的实现。 &#x1f44d; 如果觉得这篇文章有帮助&#xff0c;欢迎您一键三连&#xff0c;分享给…...

编程日记 2026/2/13 16:50:02

【报告】内镜视频图像分析Foundation Model

来源&#xff1a;医疗基础模型 仅供个人学习&#xff0c;侵权请联系我删除...

编程日记 2026/2/7 17:33:29

使用HTML5和CSS3实现炫酷的3D立方体动画

使用HTML5和CSS3实现炫酷的3D立方体动画 项目介绍 本文将详细介绍如何使用HTML5和CSS3技术实现一个交互式3D立方体动画。这个项目不仅展示了现代Web前端技术的强大功能&#xff0c;还能帮助读者深入理解CSS3的3D变换和动画特性。 技术栈 HTML5CSS3 (transform-style, persp…...

编程日记 2026/2/8 11:35:33

【春招笔试】2025.03.29-美团研发岗

📌 点击直达笔试专栏 👉《大厂笔试突围》 题目一：班级值班安排优化 1️⃣：计算员工值班时间总和 2️⃣：直接比较 n*k 与总和的大小关系 难度：简单 这道题目的核心在于数学模型的简化。通过分析平均分配的本质，我们发现只需直接比较员工数量与时间上限的乘积(n*k)和总…...

编程日记 2026/2/14 14:50:29

MySQL数据库和表的操作之SQL语句

&#x1f3af; 本文专栏&#xff1a;MySQL深入浅出 &#x1f680; 作者主页&#xff1a;小度爱学习 MySQL数据库和表的操作 关系型数据库&#xff0c;都是遵循SQL语法进行数据查询和管理的。 SQL语句 什么是sql SQL&#xff1a;结构化查询语言(Structured Query Language)&…...

编程日记 2026/2/14 13:48:18

多模态大语言模型arxiv论文略读（二）

Identifying the Correlation Between Language Distance and Cross-Lingual Transfer in a Multilingual Representation Space ➡️ 论文标题&#xff1a;Identifying the Correlation Between Language Distance and Cross-Lingual Transfer in a Multilingual Representat…...

编程日记 2026/2/12 17:03:06

Windows 图形显示驱动开发-WDDM 2.1 功能（一）

WDDM 2.1 要求表 功能 适用性 供应和回收改进必需视频内存管理可选硬件保护内容的可靠性改进选择硬件支持 Windows GameDVR 的应用程序 必需 间接显示选择硬件驱动程序存储和并行安装必需适用于摄像头/捕获场景的 DirectX 内存图面共享必需 WDDM 2.1 支持以下 D3D 版本&#…...

编程日记 2026/2/14 3:16:05

全局曝光与卷帘曝光

文章目录 曝光方式优点缺点应用场景 为何全局曝光帧率比卷帘曝光方式低 卷帘曝光和全局曝光是CMOS传感器两种常见的曝光模式&#xff0c;以下是二者的对比&#xff1a; 参考&#xff1a;B站优致谱视觉 曝光方式 卷帘曝光&#xff1a;传感器的每一行像素按顺序逐行扫描曝光&…...

编程日记 2026/2/8 14:48:22

【一起来学kubernetes】31、Helm使用详解

一、Helm 简介 Helm 是 Kubernetes 的包管理工具&#xff0c;类比 Linux 中的 yum 或 apt&#xff0c;用于简化应用的打包、部署和版本管理。其核心功能包括&#xff1a; Chart 管理&#xff1a;将 Kubernetes 资源&#xff08;Deployment、Service 等&#xff09;打包为可复…...

编程日记 2026/2/13 17:41:23

python 常用的6个爬虫第三方库

Python中有非常多用于网络数据采集的库&#xff0c;功能非常强大&#xff0c;有的用于抓取网页&#xff0c;有的用于解析网页&#xff0c;这里介绍6个最常用的库。 1. BeautifulSoup BeautifulSoup是最常用的Python网页解析库之一&#xff0c;可将 HTML 和 XML 文档解析为树形…...

编程日记 2026/2/10 4:16:47

blender场景导入Unity的流程（个人总结）

处理找不到贴图的问题 blender场景导入Unity遇到的主要问题是贴图找不到。经研究是blender里材质的着色器结构不是贴图-原理化BSDF-输出导致的。目前还没有自动解决方法&#xff0c;总结了一个效率还可以的手动解决流程。 打开后到材质预览&#xff0c;看一下显示没问题&…...

编程日记 2026/2/12 11:47:44

可编辑36页PPT | “新基建”在数字化智慧高速公路中的支撑应用方案智慧高速解决方案智慧交通方案

这份文档是一份关于“新基建”在数字化智慧高速公路中支撑应用方案的PPT内容介绍&#xff0c;它详细阐述了新基建在智慧高速建设中的背景、总体要求和建设内容。从政策背景来看&#xff0c;多个政府部门发布了相关政策文件&#xff0c;推动交通运输基础设施的数字化升级和智慧交…...

编程日记 2026/2/8 18:58:13

Spring 核心技术解析【纯干货版】- XV：Spring 网络模块 Spring-Web 模块精讲

Spring Framework 作为 Java 生态中最流行的企业级开发框架&#xff0c;提供了丰富的模块化支持。其中&#xff0c;Spring Web 模块是支撑 Web 开发的基础组件&#xff0c;无论是传统的 MVC 应用&#xff0c;还是 REST API 及微服务架构&#xff0c;都离不开它的核心能力。 本篇…...

编程日记 2025/12/24 2:37:55

一文解读DeepSeek在保险业的应用

引言 随着人工智能技术的深度渗透&#xff0c;保险行业正经历从传统经验驱动向数据智能驱动的转型。作为国产高性能开源大模型的代表&#xff0c;DeepSeek 凭借其低成本、高推理效率及跨模态处理能力&#xff0c;已成为保险机构突破服务瓶颈、重构业务逻辑的核心工具。截止目前…...

编程日记 2026/2/14 14:03:16

MD编辑器中的段落缩进怎么操作

在 Markdown&#xff08;MD&#xff09;编辑器中&#xff0c;段落的缩进通常可以通过 HTML 空格符、Markdown 列表缩进、代码块缩进等方式 实现。以下是几种常见的段落缩进方法&#xff1a; 1. 使用全角空格 (　) 在一些 Markdown 编辑器&#xff08;如 Typora&#xff09;中&…...

编程日记 2026/2/13 4:12:06

Oracle OCP知识点详解2：管理用户密码期限

一、Oracle密码期限管理机制 Oracle数据库通过**概要文件&#xff08;Profile&#xff09;**来管理用户的密码策略。默认情况下&#xff0c;所有用户都使用名为DEFAULT的概要文件&#xff0c;该文件的密码过期时间通常设置为180天。这种机制旨在强制用户定期更改密码&#xff…...

编程日记 2026/2/14 14:10:50

物联网时代，HMI 设计的创新机遇与挑战

随着物联网&#xff08;IoT&#xff09;技术的蓬勃发展&#xff0c;各种智能设备如雨后春笋般涌现&#xff0c;从智能家居到智慧城市&#xff0c;物联网的应用场景愈发广泛。作为人与设备之间的桥梁&#xff0c;人机界面&#xff08;HMI&#xff09;设计在物联网时代扮演着至关…...

编程日记 2026/2/11 12:45:40

系统调用与中断

中断与系统调用 中断&#xff08;Interrupt&#xff09;和系统调用&#xff08;Syscall&#xff09;是操作系统中两个关键机制&#xff0c;分别用于处理硬件事件和用户程序与内核的交互。它们虽然都涉及从用户模式到内核模式的切换&#xff0c;但设计目的和触发方式不同。以下…...

编程日记 2026/2/10 8:27:26

数据结构和算法——汉诺塔问题

前言 先讲个故事&#xff0c;传说古代印度有三根黄金柱&#xff0c;64个石盘&#xff0c;需要将石盘从第一根移动到第三根上&#xff0c;规定每次只能移动一片&#xff0c;并且小盘在放置时必须在大盘上。 当石盘移动完毕时&#xff0c;世界就会毁灭。 汉诺塔——递归 接下来…...

编程日记 2026/2/12 0:55:42

【区块链安全 | 第二十四篇】单位和全局可用变量（二）

文章目录 单位和全局可用变量&#xff08;Units and Globally Available Variables&#xff09;特殊变量和函数1. 区块和交易属性2. ABI 编码和解码函数3. bytes 成员函数4. string 成员函数5. 错误处理6. 数学和加密函数7. 地址类型成员函数8. 与合约相关9. 类型信息 单位和全…...

编程日记 2026/2/11 18:59:58