HTML贪吃蛇游戏
文章目录
- 贪吃蛇游戏
- 运行效果
- 代码
贪吃蛇游戏
贪吃蛇是一款经典的休闲益智游戏。本文将通过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详细解析如何实现一个简易版的贪吃蛇游戏。游戏的主要逻辑包括蛇的移动、碰撞检测、食物生成等功能。以下是游戏的完整代码及注释解析。（纯属好玩&#…...
HTML 揭秘：HTML 编码快速入门
HTML 揭秘：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…...
Ubuntu22.04系统安装opencv步骤简述及问题解决方法
前言 opencv是一个功能强大、开源且跨平台的计算机视觉库，适用于多种编程语言和操作系统，能够帮助开发者构建各种视觉项目。其模块众多，提供了诸多功能，能够进行图像处理、视频处理等等。比如：Highgui模块提供图像用户…...
移情别恋c++ ദ്ദി˶ｰ̀֊ｰ́ ) ——13.mapset
1. 关联式容器 在初阶阶段，我们已经接触过STL中的部分容器，比如：vector、list、deque、 forward_list(C11)等，这些容器统称为序列式容器，因为其底层为线性序列的数据结构，里面 存储的是元素本身。那什么是关…...
【webpack4系列】webpack基础用法（二）
文章目录 entryoutputloaderpluginmode前端构建基础配置关联HTML插件html-webpack-plugin构建 CSS 解析 ES6和React JSX解析 ES6解析 React JSX 解析CSS、Less和Sass解析CSS解析Less解析sass 解析图片和字体资源解析：解析图片资源解析：解析字体资源解析&…...
Python Pyvis库创建交互式网络图 高级功能详解
文章目录 动态网络图图布局调整扩展到大规模网络动态网络图 Pyvis支持创建动态网络图，通过时间轴展示网络图的演化过程。 需要使用set_options函数，参数必须为json格式。动态网络图支持添加点和边。 下面是一个简单的动态网络图示例： # 动态网络图示例 from pyvis.networ…...
Linux服务器上安装git lfs命令
有时候，需要批量下载数据集时要用到git lfs命令 首先，使用pip install git-lfs安装，会发现使用时仍然提示：git: lfs is not a git command. See git --help. 这就意味着安装不成功。 因此，需要通过如下途径手动安装&a…...
S100A9：鸡支原体感染中的免疫调控“双面间谍”【AbMole】
在生物学研究的广阔天地里，总有一些分子扮演着令人意想不到的角色。今天，我们要探索的主角是S100A9蛋白，一种在鸡支原体感染过程中展现出惊人双重功能的分子。这项来自华中农业大学动物科技学院与兽医学院的最新研究成果，揭示了S1…...
黑神话悟空黑风山攻略
在黑神话悟空中，玩家一开始来到黑风山的地图就会站在前山土地庙。 下面小编将会根据黑风山地图的地标来进行路线攻略推荐， 玩家可以一边查看游戏地图一边了解这些路线的动线是怎样的。 在苍狼林前山捡到药材老山参，跟随金色光线找到附近的土…...
Android 11 FileProvider的使用和限制
概述： 从Android 7开始，将不允许在app之间，使用file uri,即file://的方式，传递一个file，否则会抛出异常：FileUriExposedException ，其解决方案，就是使用FileProvider，用c…...
闭包+面试真题
对闭包的理解 闭包是内层函数使用外层变量 (子级可以访问父级的变量，但是父级不可以访问子级的) 闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，创建的函数可以访问到当前函数的局部…...
Java企业面试题3
1. break和continue的作用(智*图) break：用于完全退出一个循环（如 for, while）或一个 switch 语句。当在循环体内遇到 break 语句时，程序会立即跳出当前循环体，继续执行循环之后的代码。continue：用于跳过…...
第3章C/C++流程控制
第3章C/C流程控制 循环语句for循环语句【例题3.14】 求123....100。使用for语句实现循环。【例题3.15】 打印出所有“水仙花数”。【例题3.16】 输出一个金字塔图形。 跳转语句break语句【3.20】输入若干个整数，计算已输入整数之和，直到输入负数为止。 c…...
这是一款很棒的AI录音机——Plaud NotePin，但是它注定失败
Plaud NotePin是一款设计精巧的AI录音设备，它以药丸形状的机身和169美元的售价吸引了市场的注意。这款设备的主要卖点在于它的多功能性，能够转录、总结并提取音频中的关键信息。它的录音和转录功能建立在成熟的技术之上，从微型麦克风到语音转…...
self-play RL学习笔记
让AI用随机的路径尝试新的任务，如果效果超预期，那就更新神经网络的权重，使得AI记住多使用这个成功的事件，再开始下一次的尝试。——llya Sutskever 这两天炸裂朋友圈的OpenAI草莓大模型o1和此前代码能力大幅升级的Claude 3.5&…...
【机器学习】OpenCV入门与基础知识
🌈个人主页: 鑫宝Code 🔥热门专栏: 闲话杂谈｜ 炫酷HTML | JavaScript基础 💫个人格言: "如无必要，勿增实体" 文章目录 OpenCV入门与基础知识简介安装与环境配置WindowsLinuxmacOS 核心数据结构MatSca…...
JUC学习笔记(二)
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 四、共享模型之内存4.1 Java 内存模型4.2 可见性退不出的循环解决方法可见性 vs 原子性模式之 Balking1.定义2.实现 4.3 有序性原理之指令级并行1. 名词2.鱼罐头的故…...
炫酷HTML蜘蛛侠登录页面
全篇使用HTML、CSS、JavaScript，建议有过基础的进行阅读。 一、预览图 二、HTML代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-w…...
算法里面的离散化
一、离散化（discretization）在算法和数据结构中指的是将连续的输入数据映射到离散的值或者范围，从而使得处理和计算变得更高效。通常用于处理大范围或者无限可能的输入，以便将其转化为有限的、可以有效处理的范围。 离散化的定义…...
Https AK--(ssl 安全感满满)
免责声明：本文仅做分享！ 目录 https探测 openssl Openssl连接服务器获取基本信息 连接命令： 指定算法连接: 测试弱协议连接是否可以连接: 得到的内容包括： sslscan 在线查询证书 https AK type 中间人AK sslsplit 工具…...
智能推荐系统：协同过滤与深度学习结合
智能推荐系统：协同过滤与深度学习结合 系统化学习人工智能网站（收藏）：https://www.captainbed.cn/flu 文章目录 智能推荐系统：协同过滤与深度学习结合摘要引言技术原理对比1. 协同过滤算法：基于相似性的推…...
装载机防撞系统：智能守护，筑牢作业现场人员安全防线
在尘土飞扬、机械轰鸣的建筑工地上，装载机是不可或缺的 “大力士”，承担着土方搬运、物料装卸等繁重任务。然而，传统作业模式下，装载机的安全隐患时刻威胁着现场人员的生命安全与工程进度。随着智能化技术的突破，唯创安…...
.NET 原生驾驭 AI 新基建实战系列（三）：Chroma ── 轻松构建智能应用的向量数据库
在人工智能AI和机器学习ML迅猛发展的今天，数据的存储和检索需求发生了巨大变化。传统的数据库擅长处理结构化数据，但在面对高维向量数据时往往力不从心。向量数据库作为一种新兴技术，专为AI应用设计，能够高效地存储和查询高维向量…...
GIC v3 v4 虚拟化架构
ARMV8-A架构中包含了对虚拟化的支持。为了与架构保持匹配，GICV3也对虚拟化做了支持。新增了以下特性： 对CPU interface的硬件虚拟化虚拟中断maintenance 中断：用于通知监管程序（例如hypervisor）一些特定的虚拟机事件 …...
HTTP、WebSocket、SSE 对比
特性HTTPWebSocketSSE (Server-Sent Events)通信模式请求-响应（单向）全双工双向通信服务器到客户端的单向通信连接方式短连接（默认）长连接长连接协议基础TCP（HTTP/1.1, HTTP/2）基于HTTP升级基于HTTP数据格式…...
vscode .husky/pre-commit: line 4: npx: command not found
目录 1. 修复 npx 路径问题（90% 的解决方案）2. 显式加载环境变量（nvm 用户必选）3. 修复全局 PATH 配置4. 重装 Husky 与钩子5. 使用 HUSKY_DEBUG 调试执行流程 🔧 核心解决方法（按优先级排序） …...
C#报错 iText.Kernel.Exceptions.PdfException: ‘Unknown PdfException
【问题】 直接new一个PdfWriter的对象直接会报错： iText.Kernel.Exceptions.PdfException: Unknown PdfException. NotSupportedException: Either com.itextpdf:bouncy-castle-adapter or com.itextpdf:bouncy-castle-fips-adapter dependency must be added in…...
B+树知识点总结
核心目标：减少磁盘 I/O 数据库系统（如 MySQL）的主要性能瓶颈通常在于磁盘 I/O（读取和写入数据到物理硬盘的速度远慢于内存访问）。B 树的设计核心就是最大限度地减少访问数据时所需的磁盘 I/O 次数。 一、B 树的基本结…...
嵌入式学习笔记- freeRTOS 带FromISR后缀的函数
FreeRTOS中带FromISR后缀的函数 是用于中断的函数，它有两个特点 一个是无等待延时， 一个是无立刻触发任务切换， 那么 一 为什么中断中不能等待（阻塞）？ 因为中断中等待的，一般都是任务给予的…...
Vue.js 组件：深入理解与实践
Vue.js 组件：深入理解与实践 引言 随着前端技术的不断发展，Vue.js 作为一种流行的前端框架，因其简洁、易学、高效的特点受到越来越多开发者的青睐。在Vue.js中，组件是构建用户界面的基石。本文将深入探讨Vue.js组件的概念、特性、创建方式以及在实际开发中的应用，帮助读…...