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

HTML贪吃蛇游戏

news 2025/9/21 21:14:36

文章目录

      • 贪吃蛇游戏
    • 运行效果
    • 代码

贪吃蛇游戏

贪吃蛇是一款经典的休闲益智游戏。本文将通过HTML5和JavaScript详细解析如何实现一个简易版的贪吃蛇游戏。游戏的主要逻辑包括蛇的移动、碰撞检测、食物生成等功能。以下是游戏的完整代码及注释解析。（纯属好玩）

运行效果

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Snake Game</title><style>body {margin: 0;display: flex;flex-direction: column;justify-content: center;align-items: center;height: 100vh;background-color: #000;}canvas {border: 1px solid #fff;}.mobile-controls {display: flex;justify-content: center;margin-top: 20px;}.control-button {background-color: #fff;border: 1px solid #000;padding: 10px 20px;margin: 5px;font-size: 18px;cursor: pointer;border-radius: 5px;}</style>
</head><body><!-- 画布，用于绘制蛇和食物 --><canvas id="gameCanvas"></canvas><!-- 控制按钮：上下左右，用于移动蛇 --><div class="mobile-controls"><button class="control-button" id="left">左</button><button class="control-button" id="up">上</button><button class="control-button" id="down">下</button><button class="control-button" id="right">右</button></div><script>// 获取画布和上下文const canvas = document.getElementById('gameCanvas');const ctx = canvas.getContext('2d');// 设置每个方块的大小和游戏区域的行列数const scale = 20;const rows = 20;const columns = 20;// 设置画布的宽高canvas.width = columns * scale;canvas.height = rows * scale;let snake;  // 蛇对象let food;   // 食物位置let direction = { x: 1, y: 0 };  // 方向，初始为向右let isGameOver = false;  // 判断游戏是否结束// 蛇的构造函数function Snake() {this.body = [{ x: 10, y: 10 }];  // 蛇的初始位置（数组，每一节为一个坐标）// 绘制蛇this.draw = function () {ctx.fillStyle = 'green';  // 设置蛇的颜色为绿色for (let i = 0; i < this.body.length; i++) {ctx.fillRect(this.body[i].x * scale, this.body[i].y * scale, scale, scale);  // 绘制蛇的每一节}};// 更新蛇的位置this.update = function () {// 新的蛇头位置，根据当前方向生成const newHead = {x: this.body[0].x + direction.x,y: this.body[0].y + direction.y};// 判断蛇是否撞墙或撞到自己if (newHead.x < 0 || newHead.x >= columns || newHead.y < 0 || newHead.y >= rows || this.isCollision(newHead)) {isGameOver = true;  // 如果碰撞，游戏结束}// 将新头部添加到蛇的身体this.body.unshift(newHead);// 如果蛇头吃到食物，生成新的食物if (newHead.x === food.x && newHead.y === food.y) {generateFood();} else {// 否则，移除蛇尾，保持蛇的长度this.body.pop();}};// 判断是否撞到自己this.isCollision = function (pos) {for (let i = 0; i < this.body.length; i++) {if (this.body[i].x === pos.x && this.body[i].y === pos.y) {return true;}}return false;};}// 生成食物的位置，随机在网格中生成function generateFood() {food = {x: Math.floor(Math.random() * columns),y: Math.floor(Math.random() * rows)};}// 绘制食物function drawFood() {ctx.fillStyle = 'red';  // 食物颜色为红色ctx.fillRect(food.x * scale, food.y * scale, scale, scale);  // 绘制食物}// 游戏主循环function gameLoop() {if (isGameOver) {alert('Game Over');  // 游戏结束提示document.location.reload();  // 重新加载页面，重新开始游戏return;}// 清空画布，绘制新的状态ctx.clearRect(0, 0, canvas.width, canvas.height);snake.update();  // 更新蛇的位置snake.draw();  // 绘制蛇drawFood();  // 绘制食物// 每200毫秒更新一次游戏状态setTimeout(gameLoop, 200);  }// 键盘事件监听，使用中文“上、下、左、右”控制蛇的方向window.addEventListener('keydown', (e) => {switch (e.key) {case '上':if (direction.y === 0) direction = { x: 0, y: -1 };  // 向上break;case '下':if (direction.y === 0) direction = { x: 0, y: 1 };  // 向下break;case '左':if (direction.x === 0) direction = { x: -1, y: 0 };  // 向左break;case '右':if (direction.x === 0) direction = { x: 1, y: 0 };  // 向右break;}});// 按钮点击事件，控制蛇的移动方向document.getElementById('left').addEventListener('click', () => {if (direction.x === 0) direction = { x: -1, y: 0 };});document.getElementById('right').addEventListener('click', () => {if (direction.x === 0) direction = { x: 1, y: 0 };});document.getElementById('up').addEventListener('click', () => {if (direction.y === 0) direction = { x: 0, y: -1 };});document.getElementById('down').addEventListener('click', () => {if (direction.y === 0) direction = { x: 0, y: 1 };});// 初始化蛇和食物snake = new Snake();generateFood();gameLoop();  // 开始游戏</script></body></html>

相关文章：

HTML贪吃蛇游戏

文章目录 贪吃蛇游戏 运行效果代码 贪吃蛇游戏 贪吃蛇是一款经典的休闲益智游戏。本文将通过HTML5和JavaScript详细解析如何实现一个简易版的贪吃蛇游戏。游戏的主要逻辑包括蛇的移动、碰撞检测、食物生成等功能。以下是游戏的完整代码及注释解析。&#xff08;纯属好玩&#…...

编程日记 2024/9/16 22:33:38

HTML 揭秘：HTML 编码快速入门

HTML 揭秘&#xff1a;HTML 编码快速入门 一 . 前端知识介绍二 . HTML 介绍三 . HTML 快速入门四 . HTML 编辑器 - VSCode4.1 插件安装4.2 修改主题配色4.3 修改快捷键4.4 设置自动保存4.5 创建 HTML 文件4.5 书写 HTML 代码4.6 常见快捷键 五 . 基础标签5.1 字体标签5.1.1 col…...

编程日记 2024/9/16 22:31:36

Ubuntu22.04系统安装opencv步骤简述及问题解决方法

前言 opencv是一个功能强大、开源且跨平台的计算机视觉库&#xff0c;适用于多种编程语言和操作系统&#xff0c;能够帮助开发者构建各种视觉项目。其模块众多&#xff0c;提供了诸多功能&#xff0c;能够进行图像处理、视频处理等等。比如&#xff1a;Highgui模块提供图像用户…...

编程日记 2024/9/16 22:29:33

移情别恋c++ ദ്ദി˶ｰ̀֊ｰ́ ) ——13.mapset

1. 关联式容器 在初阶阶段&#xff0c;我们已经接触过STL中的部分容器&#xff0c;比如&#xff1a;vector、list、deque、 forward_list(C11)等&#xff0c;这些容器统称为序列式容器&#xff0c;因为其底层为线性序列的数据结构&#xff0c;里面 存储的是元素本身。那什么是关…...

编程日记 2024/9/16 22:28:32

【webpack4系列】webpack基础用法（二）

文章目录 entryoutputloaderpluginmode前端构建基础配置关联HTML插件html-webpack-plugin构建 CSS 解析 ES6和React JSX解析 ES6解析 React JSX 解析CSS、Less和Sass解析CSS解析Less解析sass 解析图片和字体资源解析&#xff1a;解析图片资源解析&#xff1a;解析字体资源解析&…...

编程日记 2024/9/16 22:27:31

Python Pyvis库创建交互式网络图 高级功能详解

文章目录 动态网络图图布局调整扩展到大规模网络动态网络图 Pyvis支持创建动态网络图，通过时间轴展示网络图的演化过程。 需要使用set_options函数，参数必须为json格式。动态网络图支持添加点和边。 下面是一个简单的动态网络图示例： # 动态网络图示例 from pyvis.networ…...

编程日记 2024/9/16 22:26:30

Linux服务器上安装git lfs命令

有时候&#xff0c;需要批量下载数据集时要用到git lfs命令 首先&#xff0c;使用pip install git-lfs安装&#xff0c;会发现使用时仍然提示&#xff1a;git: lfs is not a git command. See git --help. 这就意味着安装不成功。 因此&#xff0c;需要通过如下途径手动安装&a…...

编程日记 2024/9/16 22:24:28

S100A9：鸡支原体感染中的免疫调控“双面间谍”【AbMole】

在生物学研究的广阔天地里&#xff0c;总有一些分子扮演着令人意想不到的角色。今天&#xff0c;我们要探索的主角是S100A9蛋白&#xff0c;一种在鸡支原体感染过程中展现出惊人双重功能的分子。这项来自华中农业大学动物科技学院与兽医学院的最新研究成果&#xff0c;揭示了S1…...

编程日记 2024/9/16 22:23:27

黑神话悟空黑风山攻略

在黑神话悟空中&#xff0c;玩家一开始来到黑风山的地图就会站在前山土地庙。 下面小编将会根据黑风山地图的地标来进行路线攻略推荐&#xff0c; 玩家可以一边查看游戏地图一边了解这些路线的动线是怎样的。 在苍狼林前山捡到药材老山参&#xff0c;跟随金色光线找到附近的土…...

编程日记 2024/9/16 22:22:25

Android 11 FileProvider的使用和限制

概述&#xff1a; 从Android 7开始&#xff0c;将不允许在app之间&#xff0c;使用file uri,即file://的方式&#xff0c;传递一个file&#xff0c;否则会抛出异常&#xff1a;FileUriExposedException &#xff0c;其解决方案&#xff0c;就是使用FileProvider&#xff0c;用c…...

编程日记 2024/9/16 22:19:23

闭包+面试真题

对闭包的理解 闭包是内层函数使用外层变量 (子级可以访问父级的变量&#xff0c;但是父级不可以访问子级的) 闭包是指有权访问另一个函数作用域中变量的函数&#xff0c;创建闭包的最常见的方式就是在一个函数内创建另一个函数&#xff0c;创建的函数可以访问到当前函数的局部…...

编程日记 2024/9/16 22:17:21

Java企业面试题3

1. break和continue的作用(智*图) break&#xff1a;用于完全退出一个循环&#xff08;如 for, while&#xff09;或一个 switch 语句。当在循环体内遇到 break 语句时&#xff0c;程序会立即跳出当前循环体&#xff0c;继续执行循环之后的代码。continue&#xff1a;用于跳过…...

编程日记 2024/9/16 22:15:19

第3章C/C++流程控制

第3章C/C流程控制 循环语句for循环语句【例题3.14】 求123....100。使用for语句实现循环。【例题3.15】 打印出所有“水仙花数”。【例题3.16】 输出一个金字塔图形。 跳转语句break语句【3.20】输入若干个整数&#xff0c;计算已输入整数之和&#xff0c;直到输入负数为止。 c…...

编程日记 2024/9/16 22:13:17

这是一款很棒的AI录音机——Plaud NotePin，但是它注定失败

Plaud NotePin是一款设计精巧的AI录音设备&#xff0c;它以药丸形状的机身和169美元的售价吸引了市场的注意。这款设备的主要卖点在于它的多功能性&#xff0c;能够转录、总结并提取音频中的关键信息。它的录音和转录功能建立在成熟的技术之上&#xff0c;从微型麦克风到语音转…...

编程日记 2024/9/16 22:11:15

self-play RL学习笔记

让AI用随机的路径尝试新的任务&#xff0c;如果效果超预期&#xff0c;那就更新神经网络的权重&#xff0c;使得AI记住多使用这个成功的事件&#xff0c;再开始下一次的尝试。——llya Sutskever 这两天炸裂朋友圈的OpenAI草莓大模型o1和此前代码能力大幅升级的Claude 3.5&…...

编程日记 2024/9/16 22:10:14

【机器学习】OpenCV入门与基础知识

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 OpenCV入门与基础知识简介安装与环境配置WindowsLinuxmacOS 核心数据结构MatSca…...

编程日记 2024/9/16 22:08:11

JUC学习笔记(二)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 四、共享模型之内存4.1 Java 内存模型4.2 可见性退不出的循环解决方法可见性 vs 原子性模式之 Balking1.定义2.实现 4.3 有序性原理之指令级并行1. 名词2.鱼罐头的故…...

编程日记 2024/9/16 22:07:10

炫酷HTML蜘蛛侠登录页面

全篇使用HTML、CSS、JavaScript&#xff0c;建议有过基础的进行阅读。 一、预览图 二、HTML代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-w…...

编程日记 2024/9/16 22:06:09

算法里面的离散化

一、离散化&#xff08;discretization&#xff09;在算法和数据结构中指的是将连续的输入数据映射到离散的值或者范围&#xff0c;从而使得处理和计算变得更高效。通常用于处理大范围或者无限可能的输入&#xff0c;以便将其转化为有限的、可以有效处理的范围。 离散化的定义…...

编程日记 2024/9/16 22:05:08

Https AK--(ssl 安全感满满)

免责声明&#xff1a;本文仅做分享&#xff01; 目录 https探测 openssl Openssl连接服务器获取基本信息 连接命令&#xff1a; 指定算法连接: 测试弱协议连接是否可以连接: 得到的内容包括&#xff1a; sslscan 在线查询证书 https AK type 中间人AK sslsplit 工具…...

编程日记 2024/9/16 22:01:05

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

编程新知 2025/7/30 23:37:23

关于nvm与node.js

1 安装nvm 安装过程中手动修改 nvm的安装路径&#xff0c; 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解&#xff0c;但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后&#xff0c;通常在该文件中会出现以下配置&…...

编程新知 2025/9/21 13:32:03

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

编程新知 2025/9/1 17:51:59

【论文阅读28】-CNN-BiLSTM-Attention-（2024）

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

编程新知 2025/9/3 10:06:35

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能&#xff1a;服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

编程新知 2025/9/17 14:10:43

嵌入式学习笔记DAY33（网络编程——TCP）

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

编程新知 2025/9/2 17:48:08

面向无人机海岸带生态系统监测的语义分割基准数据集

描述&#xff1a;海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而&#xff0c;目前该领域仍面临一个挑战&#xff0c;即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...

编程新知 2025/9/4 1:22:39

Netty从入门到进阶（二）

二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架&#xff0c;用于…...

编程新知 2025/9/21 11:01:52

C语言中提供的第三方库之哈希表实现

一. 简介 前面一篇文章简单学习了C语言中第三方库&#xff08;uthash库&#xff09;提供对哈希表的操作&#xff0c;文章如下&#xff1a; C语言中提供的第三方库uthash常用接口-CSDN博客 本文简单学习一下第三方库 uthash库对哈希表的操作。 二. uthash库哈希表操作示例 u…...

编程新知 2025/7/27 8:17:48

Spring AOP代理对象生成原理

代理对象生成的关键类是【AnnotationAwareAspectJAutoProxyCreator】&#xff0c;这个类继承了【BeanPostProcessor】是一个后置处理器 在bean对象生命周期中初始化时执行【org.springframework.beans.factory.config.BeanPostProcessor#postProcessAfterInitialization】方法时…...

编程新知 2025/9/21 6:11:19