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

HTML贪吃蛇游戏

news 2025/11/12 22:46:02

文章目录

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

贪吃蛇游戏

贪吃蛇是一款经典的休闲益智游戏。本文将通过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

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

编程新知 2025/11/7 3:29:55

LeetCode - 394. 字符串解码

题目 394. 字符串解码 - 力扣&#xff08;LeetCode&#xff09; 思路 使用两个栈&#xff1a;一个存储重复次数&#xff0c;一个存储字符串 遍历输入字符串&#xff1a; 数字处理&#xff1a;遇到数字时&#xff0c;累积计算重复次数左括号处理&#xff1a;保存当前状态&a…...

编程新知 2025/11/12 19:49:51

【JavaWeb】Docker项目部署

引言 之前学习了Linux操作系统的常见命令&#xff0c;在Linux上安装软件&#xff0c;以及如何在Linux上部署一个单体项目&#xff0c;大多数同学都会有相同的感受&#xff0c;那就是麻烦。 核心体现在三点&#xff1a; 命令太多了&#xff0c;记不住 软件安装包名字复杂&…...

编程新知 2025/11/12 5:14:55

保姆级教程：在无网络无显卡的Windows电脑的vscode本地部署deepseek

文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama&#xff08;有网络的电脑&#xff09;2.2.3 安装Ollama&#xff08;无网络的电脑&#xff09;2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...

编程新知 2025/11/12 13:37:27

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南&#xff1a;从入门到实战 一、Grunt 是什么&#xff1f; Grunt是一个基于 Node.js 的前端自动化任务运行器&#xff0c;主要用于自动化执行项目开发中重复性高的任务&#xff0c;例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...

编程新知 2025/11/12 15:13:23

Go 并发编程基础：通道（Channel）的使用

在 Go 中&#xff0c;Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式&#xff0c;用于在多个 Goroutine 之间传递数据&#xff0c;从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...

编程新知 2025/8/28 22:40:10

基于Java+VUE+MariaDB实现（Web）仿小米商城

仿小米商城 环境安装 nodejs maven JDK11 运行 mvn clean install -DskipTestscd adminmvn spring-boot:runcd ../webmvn spring-boot:runcd ../xiaomi-store-admin-vuenpm installnpm run servecd ../xiaomi-store-vuenpm installnpm run serve 注意&#xff1a;运行前…...

编程新知 2025/11/12 3:27:51

永磁同步电机无速度算法--基于卡尔曼滤波器的滑模观测器

一、原理介绍 传统滑模观测器采用如下结构&#xff1a; 传统SMO中LPF会带来相位延迟和幅值衰减&#xff0c;并且需要额外的相位补偿。 采用扩展卡尔曼滤波器代替常用低通滤波器(LPF)&#xff0c;可以去除高次谐波&#xff0c;并且不用相位补偿就可以获得一个误差较小的转子位…...

编程新知 2025/11/12 16:21:46

MyBatis中关于缓存的理解

MyBatis缓存 MyBatis系统当中默认定义两级缓存&#xff1a;一级缓存、二级缓存 默认情况下&#xff0c;只有一级缓存开启&#xff08;sqlSession级别的缓存&#xff09;二级缓存需要手动开启配置&#xff0c;需要局域namespace级别的缓存 一级缓存&#xff08;本地缓存&#…...

编程新知 2025/11/9 17:11:12

SpringAI实战：ChatModel智能对话全解

一、引言&#xff1a;Spring AI 与 Chat Model 的核心价值 &#x1f680; 在 Java 生态中集成大模型能力&#xff0c;Spring AI 提供了高效的解决方案 &#x1f916;。其中 Chat Model 作为核心交互组件&#xff0c;通过标准化接口简化了与大语言模型&#xff08;LLM&#xff0…...

编程新知 2025/9/27 0:41:04