前端实现贪吃蛇功能
大家都玩过贪吃蛇小游戏,控制一条蛇去吃食物,然后蛇在吃到食物后会变大。本篇博客将会实现贪吃蛇小游戏的功能。
1.实现效果
2.整体布局
/*** 游戏区域样式*/
const gameBoardStyle = {gridTemplateColumns: `repeat(${width}, 1fr)`,gridTemplateRows: `repeat(${height}, 1fr)`,display: 'grid',border: '1px solid #000',width: '500px',height: '500px',backgroundColor: '#488cfa'
};/*** 小蛇样式*/
const snakeBodyStyle = (segment) => ({gridRowStart: segment.y,gridColumnStart: segment.x,backgroundColor: 'green'
})/*** 食物样式*/
const foodStyle = {gridRowStart: food.current.y,gridColumnStart: food.current.x,backgroundColor: 'red'
}<div className={'snake-game'}><div className={'game-board'} style={gameBoardStyle}>{/*蛇身体*/}{snake.map((segment, idx) =><div key={idx} className={'snake-body'} style={snakeBodyStyle(segment)}/>)}{/*食物*/}<div className={'food'} style={foodStyle}></div></div></div>
采用grid 布局,整个游戏区域划分为width*height个小块,小蛇身体的每一部分对应一小块,食物对应一小块。
3.技术实现
a.数据结构
小蛇的数据结构是个坐标数组,snake[0]是蛇头,snake[snake.length-1]是蛇尾巴。snake[i].x表示第i块位置的x坐标,snake[i].y表示第i块位置的y坐标。
食物的数据结构是坐标。
游戏区域是一个width*height的虚拟空间。
b.场景
一、小蛇如何移动,以及移动方式
1. 通过设置监听键盘的上下左右事件,来触发小蛇的移动。
2. 通过定时器实现小蛇沿着当前方向移动
// 移动方向,上下左右
const directions = [[0, -1], [0, 1], [-1, 0], [1, 0]];
// 当前移动方向
const [currentDirection, setCurrentDirection] = useState(3);// 小蛇移动
function move() {const direction = directions[currentDirection];// 更新上一次蛇尾巴lastTail.current = {x: snake[snake.length - 1].x, y: snake[snake.length - 1].y};const head = snake[0];// 移动小蛇,将数组后移动for (let i = snake.length - 1; i > 0; i--) {snake[i].x = snake[i - 1].x;snake[i].y = snake[i - 1].y;}// 更新蛇头head.x += direction[0];head.y += direction[1];// 触发渲染setSnake([...snake]);
}const [click, setClick] = useState(0)
// 设置键盘监听函数
useEffect(() => {document.addEventListener('keydown', function (event) {const key = event.key;if (key === 'ArrowUp') {// 监听到了向上箭头键的按下操作setCurrentDirection(0)setClick((c)=>c+1);} else if (key === 'ArrowDown') {// 监听到了向下箭头键的按下操作setCurrentDirection(1)setClick((c)=>c+1);} else if (key === 'ArrowLeft') {// 监听到了向左箭头键的按下操作setCurrentDirection(2)setClick((c)=>c+1);} else if (key === 'ArrowRight') {// 监听到了向右箭头键的按下操作setCurrentDirection(3)setClick((c)=>c+1);}});
}, [])/*** 设定定时器,每1s向当前方向移动小蛇* 如果敲键盘,或者吃到食物需要更新定时器* tips: 吃到食物更新是因为定时器晚执行可能会有并发问题*/
useEffect(() => {console.log(click)move()const timer = setInterval(() => {move();}, 1000);return () => {clearInterval(timer);};
}, [click, snake.length]);
二、游戏结束判断
1.游戏成功判断,若无发生成新的食物,则游戏成功
2.游戏失败判断,若小蛇出边界或者小蛇撞到自己,则游戏失败。
// 每次渲染后,判断小蛇状态
useEffect(() => {// 判断小蛇撞出边界if (head.x < 0 || head.x >= width || head.y < 0 || head.y >= height) {console.log('游戏失败')alert('出界,游戏失败');reset();return;}// 判断小蛇撞到自己for (let i = 1; i < snake.length; i++) {if (head.x === snake[i].x && head.y === snake[i].y) {console.log('游戏失败')console.log('snake:' + JSON.stringify(snake))alert('撞到自己了,游戏失败');reset();return;}}})
三、食物生成以及吃食物操作
1.食物需要在区域内随机生成,并且不能生成在小蛇身体上,若无地方生成,则游戏通关。
2.吃食物操作会增长小蛇的长度,在小蛇的尾巴添加一截,需要存储前一个路径的尾巴位置。
// 随机生成食物
function generateFood(snake) {const x = Math.floor(Math.random() * width);const y = Math.floor(Math.random() * height);// 如果蛇长等于宽高,说明蛇占满了整个区域,已成功if (snake.length === width * height) {return null;}// 判断食物是否在蛇身上for (let node of snake) {if (node.x === x && node.y === y) {// 重新生成食物,return generateFood(snake);}}return {x, y};
}// 蛇尾巴
const lastTail = useRef(null);// 每次渲染后,判断小蛇状态
useEffect(() => {const head = snake[0];// 小蛇吃到食物if (head.x === food.current.x && head.y === food.current.y) {console.log('eat food!')// 添加上次蛇尾巴let nTail = {...lastTail.current};snake.push(nTail);lastTail.current = nTail;// 重新生成食物food.current = generateFood(snake);if (food.current === null) {console.log('恭喜已通过')alert('恭喜已经通关');reset();return;}// 发起渲染console.log('newsnake:' + JSON.stringify(snake))setSnake([...snake]);return;}
});
c.整体代码
const {useState, useRef, useEffect} = require("react");const Snake = ({width, height}) => {// 移动方向,上下左右const directions = [[0, -1], [0, 1], [-1, 0], [1, 0]];// 当前移动方向const [currentDirection, setCurrentDirection] = useState(3);// 初始小蛇const initialSnake = [{x: 0, // pos xy: 0, // pos y}];// 蛇身体const [snake, setSnake] = useState(initialSnake);// 食物const food = useRef(null);// 初始化食物if (food.current === null) {food.current = generateFood(snake);}// 随机生成食物function generateFood(snake) {const x = Math.floor(Math.random() * width);const y = Math.floor(Math.random() * height);// 如果蛇长等于宽高,说明蛇占满了整个区域,已成功if (snake.length === width * height) {return null;}// 判断食物是否在蛇身上for (let node of snake) {if (node.x === x && node.y === y) {// 重新生成食物,return generateFood(snake);}}return {x, y};}// 蛇尾巴const lastTail = useRef(null);// 小蛇移动function move() {const direction = directions[currentDirection];// 更新蛇尾巴lastTail.current = {x: snake[snake.length - 1].x, y: snake[snake.length - 1].y};const head = snake[0];for (let i = snake.length - 1; i > 0; i--) {snake[i].x = snake[i - 1].x;snake[i].y = snake[i - 1].y;}head.x += direction[0];head.y += direction[1];setSnake([...snake]);}// 游戏结束后重置function reset() {setSnake([...initialSnake]);setCurrentDirection(3);lastTail.current = null;}// 判断是否游戏结束useEffect(() => {const head = snake[0];// 判断小蛇撞出边界if (head.x < 0 || head.x >= width || head.y < 0 || head.y >= height) {console.log('游戏失败')alert('出界,游戏失败');reset();return;}// 判断小蛇撞到自己for (let i = 1; i < snake.length; i++) {if (head.x === snake[i].x && head.y === snake[i].y) {console.log('游戏失败')console.log('snake:' + JSON.stringify(snake))alert('撞到自己了,游戏失败');reset();return;}}})// 判断是否吃到食物useEffect(()=>{const head = snake[0];// 小蛇吃到食物if (head.x === food.current.x && head.y === food.current.y) {console.log('eat food!')// 添加上次蛇尾巴let nTail = {...lastTail.current};snake.push(nTail);lastTail.current = nTail;// 重新生成食物food.current = generateFood(snake);if (food.current === null) {console.log('恭喜已通过')alert('恭喜已经通关');reset();return;}// 发起渲染console.log('newsnake:' + JSON.stringify(snake))setSnake([...snake]);return;}})const [click, setClick] = useState(0)// 设置键盘监听函数useEffect(() => {document.addEventListener('keydown', function (event) {const key = event.key;if (key === 'ArrowUp') {// 监听到了向上箭头键的按下操作setCurrentDirection(0)setClick((c)=>c+1);} else if (key === 'ArrowDown') {// 监听到了向下箭头键的按下操作setCurrentDirection(1)setClick((c)=>c+1);} else if (key === 'ArrowLeft') {// 监听到了向左箭头键的按下操作setCurrentDirection(2)setClick((c)=>c+1);} else if (key === 'ArrowRight') {// 监听到了向右箭头键的按下操作setCurrentDirection(3)setClick((c)=>c+1);}});}, [])/*** 设定定时器,每1s向当前方向移动小蛇* 如果敲键盘,或者吃到食物需要更新定时器* tips: 吃到食物,由于定时器晚执行,可能会用老的state覆盖*/useEffect(() => {console.log(click)move()const timer = setInterval(() => {move();}, 1000);return () => {clearInterval(timer);};}, [click, snake.length]);/*** 游戏区域样式*/
const gameBoardStyle = {gridTemplateColumns: `repeat(${width}, 1fr)`,gridTemplateRows: `repeat(${height}, 1fr)`,display: 'grid',border: '1px solid #000',width: '500px',height: '500px',backgroundColor: '#488cfa'
};/*** 小蛇样式*/
const snakeBodyStyle = (segment) => ({gridRowStart: segment.y,gridColumnStart: segment.x,backgroundColor: 'green'
})/*** 食物样式*/
const foodStyle = {gridRowStart: food.current.y,gridColumnStart: food.current.x,backgroundColor: 'red'
}// 小蛇组成return (<><div className={'snake-game'}><div className={'game-board'} style={gameBoardStyle}>{/*蛇身体*/}{snake.map((segment, idx) =><div key={idx} className={'snake-body'} style={snakeBodyStyle(segment)}/>)}{/*食物*/}<div className={'food'}style={foodStyle}></div></div></div></>)
}export default Snake
相关文章:

前端实现贪吃蛇功能
大家都玩过贪吃蛇小游戏,控制一条蛇去吃食物,然后蛇在吃到食物后会变大。本篇博客将会实现贪吃蛇小游戏的功能。 1.实现效果 2.整体布局 /*** 游戏区域样式*/ const gameBoardStyle {gridTemplateColumns: repeat(${width}, 1fr),gridTemplateRows: re…...

文件操作(上)
目录 文件的必要性: 文件分类: 程序文件: 数据文件: 文件的打开与关闭: fopen函数分析: 编辑 FILE*: char*filename: char*mode: fclose函数: 应用: 文件编译 Fgetc Fputc 应用…...

用CHAT写年终总结
问CHAT:写一份政企经理年度总结 CHAT回复:尊敬的同事和领导: 大家好,我是负责政企业务的经理,全年一直坚守在销售一线,为公司带来更多的企业客户并拓展业务领域。感谢领导和同事在工作中的大力支持与热情协…...

day01 深度学习介绍
目录 1.1深度学习介绍 1.2神经网络NN 1、概念: 2、神经元 3、(单层)神经网络 4、感知机(两层) 5、多层神经网络 6、激活函数 (1)饱和与非饱和激活函数 (2)饱和激活…...

k8s 部署 Nginx 并代理到tomcat
一、已有信息 [rootmaster nginx]# kubectl get nodes -o wide [rootmaster nginx]# kubectl get svc NAME TYPE CLUSTER-IP EXTERNAL-IP PORT(S) AGE kubernetes ClusterIP 10.96.0.1 <none> 443/TCP 2…...

医学图像的数据增强技术 --- 切割-拼接数据增强(CS-DA)
医学图像的新型数据增强技术 CS-DA 核心思想自然图像和医学图像之间的关键差异CS-DA 步骤确定增强后的数据数量 代码复现 CS-DA 核心思想 论文链接:https://arxiv.org/ftp/arxiv/papers/2210/2210.09099.pdf 大多数用于医学分割的数据增强技术最初是在自然图像上开…...

git克隆/拉取报错过早的文件结束符(EOF)的原因及解决
近期使用git拉取仓库的时候,拉取了好几次都不行,总是反馈说过早的文件结束符 总是这样,当然我的报错信息并没有描述完整,因为在我检索此类问题的时候,我发现有好多种所谓的过早的文件结束符这样的报错,但是…...
【ARM 嵌入式 编译系列 2.5 -- GCC 编译参数学习 --specs=nano.specs选项 】
请阅读【嵌入式开发学习必备专栏 之 ARM GCC 编译专栏】 文章目录 概述nano.specs示例使用注意事项问题总结概述 ARM 工具链 (arm-none-eabi-) 包括了一个叫作 --specs 的编译器和链接器选项,这个选项允许用户指定一个或多个 “specs” 文件,以影响编译或链接阶段的行为。Sp…...
C语言大师(5)构造函数和析构函数
引言 在C的面向对象编程中,构造函数和析构函数扮演着至关重要的角色。它们分别管理对象的初始化和销毁过程,确保资源的有效分配和释放。了解这些函数如何工作,对于编写高效和可靠的C程序至关重要。 1. 构造函数 构造函数在每次创建类的新对…...

安全审查常见要求
一、是否有密码复杂度策略、是否有密码有效期 1)密码长度至少8位; 2)要求用户密码必须包含大小写字母、数字、特殊字符 3)避免常见密码 123456,qwerty, password; 4) 强制用户定期修改密码; 5&#x…...

最新 生成pdf文字和表格
生成pdf文字和表格 先看效果 介绍 java项目,使用apache的pdfbox工具,可分页,自定义列 依赖 <dependency><groupId>org.apache.pdfbox</groupId><artifactId>pdfbox</artifactId><version>2.0.22<…...

安全基础~攻防特性3
文章目录 SSTI(模板注入)1. 简介2. 成因3. 常见框架存在注入4. 判断存在SSTI SSTI(模板注入) 1. 简介 (Server-Side Template Injection) 服务端模板注入 1、使用框架(MVC的模式),如python的flask,php的tp,java的sp…...

Windows7关闭谷歌浏览器提示“若要接收后续 Google Chrome 更新,您需使用 Windows 10 或更高版本”的方法
背景 电脑比较老,系统一直没有更新,硬件和软件版本如下: 操作系统版本:Windows7 企业版 谷歌浏览器版本:109.0.5414.120(正式版本) (64 位) 该版本的谷歌浏览器是支持…...

[一]ffmpeg音视频解码
[一]ffmpeg音视频解码 一.编译ffmpeg1.安装vmware虚拟机2.vmware虚拟机安装linux操作系统3.安装ftp和fshell软件4.在Ubuntu(Linux)中编译Android平台的FFmpeg( arm和x86 )5.解压FFmpeg6.Android编译脚本(1)…...

k8s-认证授权 14
Kubernetes的认证授权分为认证(鉴定用户身份)、授权(操作权限许可鉴别)、准入控制(资源对象操作时实现更精细的许可检查)三个阶段。 Authentication(认证) 认证方式现共有8种&…...

在全志H616核桃派上实现USB摄像头的OpenCV颜色检测
在给核桃派开发板用OpenCV读取图像并显示到pyqt5的窗口上并加入颜色检测功能,尝试将图像中所有蓝色的东西都用一个框标记出来。 颜色检测核心api 按照惯例,先要介绍一下opencv中常用的hsv像素格式。颜色还是那个颜色,只是描述颜色用的参数变…...

mac安装部署gitbook教程
mac安装部署gitbook教程 前言一、安装准备二、GitBook安装三、项目初始化 前言 一些自己实际操作的记录。 一、安装准备 Node.js gitbook基于Node.js,所以需要提前安装。 下载地址:https://nodejs.org/en/,可以下载比较新的版本。(但我的建议…...

有关软件测试的,任何时间都可以,软件测试主要服务项目:测试用例 报告 计划
有关软件测试的,任何时间都可以,软件测试主要服务项目: 1. 测试用例 2. 测试报告 3. 测试计划 4. 白盒测试 5. 黑盒测试 6. 接口测试 7.自动…...

快乐过寒假,安全不放假
寒假将至,春节即来,为了使孩子们过上一个平安、快乐、文明、祥和、健康、有益的寒假和春节,在共青团永宁县委员会、永宁县望洪镇人民政府的大力支持下,在永宁新华中心村校外少工委的积极配合下,1月20日下午宁夏妇女儿童…...
qt学习:模仿qq界面+添加资源+无边框界面+修改样式
目录 一,创建登录ui界面类 LoginWidget 二,添加图片资源 三,通过样式的方法将图片设置成圆圈的背景 四,新建登录后的ui界面 MWindow 简陋的就可以,因为只为了学习,可以自己补充 五,新建三个嵌套ui界面类,ChatWidget聊天界面 FriendWiidget好友界面 CollectW…...

使用VSCode开发Django指南
使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架,专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用,其中包含三个使用通用基本模板的页面。在此…...

RocketMQ延迟消息机制
两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数,对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后…...
linux 下常用变更-8
1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行,YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID: YW3…...
Spring Boot+Neo4j知识图谱实战:3步搭建智能关系网络!
一、引言 在数据驱动的背景下,知识图谱凭借其高效的信息组织能力,正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合,探讨知识图谱开发的实现细节,帮助读者掌握该技术栈在实际项目中的落地方法。 …...
相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)
【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...

C++ 求圆面积的程序(Program to find area of a circle)
给定半径r,求圆的面积。圆的面积应精确到小数点后5位。 例子: 输入:r 5 输出:78.53982 解释:由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982,因为我们只保留小数点后 5 位数字。 输…...

用docker来安装部署freeswitch记录
今天刚才测试一个callcenter的项目,所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

Mac下Android Studio扫描根目录卡死问题记录
环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中,提示一个依赖外部头文件的cpp源文件需要同步,点…...

STM32---外部32.768K晶振(LSE)无法起振问题
晶振是否起振主要就检查两个1、晶振与MCU是否兼容;2、晶振的负载电容是否匹配 目录 一、判断晶振与MCU是否兼容 二、判断负载电容是否匹配 1. 晶振负载电容(CL)与匹配电容(CL1、CL2)的关系 2. 如何选择 CL1 和 CL…...
Kafka主题运维全指南:从基础配置到故障处理
#作者:张桐瑞 文章目录 主题日常管理1. 修改主题分区。2. 修改主题级别参数。3. 变更副本数。4. 修改主题限速。5.主题分区迁移。6. 常见主题错误处理常见错误1:主题删除失败。常见错误2:__consumer_offsets占用太多的磁盘。 主题日常管理 …...