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 工具…...
在软件开发中正确使用MySQL日期时间类型的深度解析
在日常软件开发场景中，时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志，到供应链系统的物流节点时间戳，时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库，其日期时间类型的…...
java_网络服务相关_gateway_nacos_feign区别联系
1. spring-cloud-starter-gateway 作用：作为微服务架构的网关，统一入口，处理所有外部请求。 核心能力： 路由转发（基于路径、服务名等）过滤器（鉴权、限流、日志、Header 处理）支持负…...
Opencv中的addweighted函数
一.addweighted函数作用 addweighted（）是OpenCV库中用于图像处理的函数，主要功能是将两个输入图像（尺寸和类型相同）按照指定的权重进行加权叠加（图像融合），并添加一个标量值&#x…...
高频面试之3Zookeeper
高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个？3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制（过半机制࿰…...
在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module
1、为什么要修改 CONNECT 报文？ 多租户隔离：自动为接入设备追加租户前缀，后端按 ClientID 拆分队列。零代码鉴权：将入站用户名替换为 OAuth Access-Token，后端 Broker 统一校验。灰度发布：根据 IP/地理位写…...
JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作
一、上下文切换 即使单核CPU也可以进行多线程执行代码，CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短，所以CPU会不断地切换线程执行，从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...
Java面试专项一-准备篇
一、企业简历筛选规则 一般企业的简历筛选流程：首先由HR先筛选一部分简历后，在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如：Boss直聘（招聘方平台） 直接按照条件进行筛选 例如：…...
Device Mapper 机制
Device Mapper 机制详解 Device Mapper（简称 DM）是 Linux 内核中的一套通用块设备映射框架，为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程，并配以详细的…...
招商蛇口 | 执笔CID，启幕低密生活新境
作为中国城市生长的力量，招商蛇口以“美好生活承载者”为使命，深耕全球111座城市，以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子，招商蛇口始终与城市发展同频共振，以建筑诠释对土地与生活的…...
MySQL 知识小结（一）
一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库，分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷，但是文件存放起来数据比较冗余，用二进制能够更好管理咱们M…...