不用循环数组，js+html实现贪吃蛇
功能描述：每走10步随机改变一个方方向，当键盘按下方向键 w,s,a,d时，使用键盘方向控制蛇的移动，蛇头每撞到一次自身时改变屏幕颜色，蛇头碰到边界时从另一边回来。
实现思路：用个30大小的数组存放每个结点，蛇头结点根据当前方向移动，数组中其他结点的值依次换成上一个结点的值。
效果展示：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script>const NORTH = 0;const SOUTH = 1;const WEST = 2;const EAST = 3;const NODE_LENGTH = 50;const MAX_LENGTH = 30;const CURRENT_LENGTH = 30;const SPEED = 50;const SCREEN_WIDTH = window.innerWidth;const SCREEN_HEIGHT = window.innerHeight;var x=0;var y=0;var head = 0;var tail = MAX_LENGTH - 1;var body = [];var direction = 1;var count = 0;var touchSelfCnt = 0;var colorArray = ['red','orange','yellow','green','#025CBD','#05BC67','#6C6783','#766783','#836783','#836776','white'];var KEY_CONTROL_FLAG = 0;for (var i = 0; i <MAX_LENGTH ; i++) {console.log();var element = document.createElement("span");element.id = i;element.style.position = 'absolute';element.style.left = i*NODE_LENGTH+'px';element.style.top = 0;element.style.background ='black';element.style.border='2px solid red';element.style.width=NODE_LENGTH+'px';element.style.height=NODE_LENGTH+'px';var docBody = document.body;docBody.appendChild(element);body[i] = {x:i*NODE_LENGTH,y:0,element:element};console.log(element);}console.log(SCREEN_WIDTH,SCREEN_HEIGHT);document.addEventListener("keydown",function (event) {KEY_CONTROL_FLAG = 1;switch (event.keyCode) {case 87:direction = NORTH;break;case 83:direction = SOUTH;break;case 65:direction = WEST;break;case 68:direction = EAST;break;default:break;}});function move(){if(count%10===0 && KEY_CONTROL_FLAG===0){direction = Math.floor(Math.random()*4)}console.log('direction',direction);switch (direction) {case NORTH:y-=SPEED;break;case SOUTH:y+=SPEED;break;case WEST:x-=SPEED;break;case EAST:x+=SPEED;break;default:break;}if (x > (SCREEN_WIDTH-NODE_LENGTH)) {x = 0;}else if (y > SCREEN_HEIGHT-NODE_LENGTH) {y = 0;}else if (x < 0) {x = SCREEN_WIDTH-NODE_LENGTH;}else if (y < 0) {y = SCREEN_HEIGHT-NODE_LENGTH;}body[0] = {x:x,y:y};// console.log('x,y,direction',x,y,direction)//判断有没有撞到自己for (var i = 1; i <body.length ; i++) {if(body[i].x ===x && body[i].y===y){document.body.style.background = colorArray[touchSelfCnt%11];touchSelfCnt++;document.body.appendChild(div);}}}function drawSnake(){for (var i = body.length-1; i >0 ; i--) {body[i] = body[i-1];}for (var i = 0; i <body.length ; i++) {var element = document.getElementById(i);element.style.left = body[i].x+"px";element.style.top = body[i].y+"px";}}setInterval(function () {move();drawSnake();count++;},100)
</script>
</body>
</html>
相关文章：
不用循环数组，js+html实现贪吃蛇
功能描述：每走10步随机改变一个方方向，当键盘按下方向键 w,s,a,d时，使用键盘方向控制蛇的移动，蛇头每撞到一次自身时改变屏幕颜色，蛇头碰到边界时从另一边回来。 实现思路：用个30大小的数组存放每个结点&a…...
什么是线程安全和线程不安全？
线程安全（Thread Safety）和线程不安全（Thread Unsafety）是与并发编程相关的概念，特别是在多线程环境中使用共享资源时会涉及到这些概念。 线程安全： 当多个线程同时访问共享资源时，如果在没有额外的同步措施的情况下，这些线程仍然能够正确地执行并保持数据的一致性，那…...
VUE笔记（十）Echarts
一、Echarts简介 1、什么是echarts ECharts是一款基个基于 JavaScript 的开源可视化图表库 官网地址：Apache ECharts 国内镜像：ISQQW.COM x ECharts 文档（国内同步镜像） - 配置项 示例：echarts图表集 2、第一个E…...
FPGA原理与结构——时钟IP核原理学习
一、前言 在之前的文章中，我们介绍了FPGA的时钟结构 FPGA原理与结构——时钟资源https://blog.csdn.net/apple_53311083/article/details/132307564?spm1001.2014.3001.5502 在本文中我们将学习xilinx系列的FPGA所提供的时钟IP核，来帮助我们进一…...
创建python环境——Anaconda
在Windows中安装Anaconda和简单使用 一.Anaconda发行概述 Anaconda是一个可以便捷获取和管理包，同时对环境进行统一管理的发行版本，它包含了conda、 Python在内的超过180个科学包及其依赖项。 1.Anaconda发行版本具有以下特点： (1)包含了…...
使用Linux部署Kafka教程
目录 一、部署Zookeeper 1 拉取Zookeeper镜像 2 运行Zookeeper 二、部署Kafka 1 拉取Kafka镜像 2 运行Kafka 三、验证是否部署成功 1 进入到kafka容器中 2 创建topic 生产者 3 生产者发送消息 4 消费者消费消息 四、搭建kafka管理平台 五、SpringBoot整合Kafka 1…...
pyechart笔记：opts.AxisOpts
定制化图表的轴线（x轴和y轴）的样式和设置 0 不设置坐标轴 c1(Bar().add_xaxis([力量,智力,敏捷]).add_yaxis(全能骑士,# 系列名称，用于 tooltip 的显示，legend 的图例筛选。[429,321,296],#系列数据).add_yaxis(猴子,[352,236,4…...
深度思考rpc框架面经之五：rpc熔断限流、rpc复用连接机制
11 RPC框架如何实现限流和熔断 推荐文章：RPC实现原理之核心技术-限流熔断 11.1 为什么Dubbo要做服务的限流？(根本原因是服务端进行自我保护) 限流是一种常见的系统保护手段。在分布式系统和微服务架构中，一个接口的过度使用可能会导致资源…...
Go 数组
数组用于在单个变量中存储相同类型的多个值，而不是为每个值声明单独的变量。 声明数组 在Go中，有两种声明数组的方式： 使用var关键字： 语法 var array_name [length]datatype{values} // 这里定义了长度 或者 var array_n…...
04架构管理之分支管理实践-一种git分支管理最佳实践
专栏说明：针对于企业的架构管理岗位，分享架构管理岗位的职责，工作内容，指导架构师如何完成架构管理工作，完成架构师到架构管理者的转变。计划以10篇博客阐述清楚架构管理工作，专栏名称：架构管理…...
D.OASIS City 和 Warrix 在The Sandbox 庆祝 Rise of the 10th Legend十周年
D.OASIS 首次展示了变革性娱乐 D.OASIS City，正如它与 WARRIX 一起承诺的那样。WARRIX 是获得泰国国家队球衣生产授权的标志性运动服装品牌。 这款激动人心的游戏冒险游戏于今天推出，让用户能够投入 D.OASIS City x WARRIX：Rise of the 10th…...
Git基本操作（Idea版）
第一次发布项目（本地->远程） 方式一 通过push的方式推送本地库到远程库（远程已创建好仓库） 这种方式需要提前创建好仓库。 右键点击项目，可以将当前分支的内容 push 到 GitHub 的远程仓库中。 注意：…...
NSS [羊城杯 2020]easyser
NSS [羊城杯 2020]easyser 开题。很容易让人觉得环境坏了。 不要慌，无从下手时。看源码、扫目录、抓包。一套操作下来，发现几个可以下手的路由。 /index.php /robots.txt 访问 /star1.php，一说到百度，就猜测是否存在SSRF。 源码中…...
理解底层— —Golang的log库，二开实现自定义Logger
理解底层— —Golang的log库，实现自定义Logger 1 分析实现思路 基于golang中自带的log库实现：对日志实现设置日志级别，每天生成一个文件，同时添加上前缀以及展示文件名等 日志级别，通过添加prefix：[INFO]、…...
RabbitMQ---Spring AMQP
Spring AMQP 1. 简介 Spring有很多不同的项目，其中就有对AMQP的支持： Spring AMQP的页面：http://spring.io/projects/spring-amqp 注意这里一段描述： Spring-amqp是对AMQP协议的抽象实现，而spring-rabbit 是对协…...
C语言练习题解析：挑战与突破，开启编程新篇章！（2）
💓博客主页：江池俊的博客⏩收录专栏：C语言刷题专栏👉专栏推荐：✅C语言初阶之路 ✅C语言进阶之路💻代码仓库：江池俊的代码仓库🎉欢迎大家点赞👍评论📝收藏⭐ 文…...
sqlite3 加密访问
关于sqlite3 加密 一、相关加密用到的sqlcipher 1.1 sqlcipher 是一个数据库加密的开源库 sqlcipher开源地址 我这边是使用的docker镜像，镜像地址： https://hub.docker.com/r/pallocchi/sqlcipher 加密格式 docker run -v <workdir>:/sqlcip…...
clickhouse 系列1：clickhouse v21.7.5.29 源码编译
1.gcc10安装 安装依赖 yum update yum install -y gcc gcc-c++ yum install -y bzip2 下载gcc 源码包并解压 wget -P /data/base https://mirrors.aliyun.com/gnu/gcc/gcc-10.2.0/gcc-10.2.0.tar.gz cd /data/base && tar -xzvf /data/base/gcc-...
servlet初体验之环境搭建！！！
我们需要用到tomcat服务器，咩有下载的小伙伴看过来：如何正确下载tomcat？？？_明天更新的博客-CSDN博客 1. 创建普通的Java项目，并在项目中创建libs目录存放第三方的jar包。 建立普通项目 创建libs目录存放第三…...
宁芝 NIZ 键盘开机需要重新插拔 USB 线才能使用
宁芝 NIZ 键盘开机需要重新插拔 USB 线才能使用 问题描述 宁芝 NIZ 键盘开机后无法识别到键盘，需要重新插拔 USB 线才能使用。 解决方法 按住 Fn BackSpaceE 键 5 秒，键盘会切换模式, 状态灯闪 1 次为 USB 接口；状态灯闪 2 次为 PS / 2 …...
Python爬虫实战：研究MechanicalSoup库相关技术
一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库，专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力，提供了直观的 API，让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...
19c补丁后oracle属主变化，导致不能识别磁盘组
补丁后服务器重启，数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后，存在与用户组权限相关的问题。具体表现为，Oracle 实例的运行用户（oracle）和集…...
` 方法)
深入浅出：JavaScript 中的 `window.crypto.getRandomValues()` 方法
深入浅出：JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中，随机数的生成看似简单，却隐藏着许多玄机。无论是生成密码、加密密钥，还是创建安全令牌，随机数的质量直接关系到系统的安全性。Jav…...
DIY｜Mac 搭建 ESP-IDF 开发环境及编译小智 AI
前一阵子在百度 AI 开发者大会上，看到基于小智 AI DIY 玩具的演示，感觉有点意思，想着自己也来试试。 如果只是想烧录现成的固件，乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外，还提供了基于网页版的 ESP LA…...
Unity | AmplifyShaderEditor插件基础（第七集：平面波动shader）
目录 一、👋🏻前言 二、😈sinx波动的基本原理 三、😈波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、🌊波动优化…...
今日学习：Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存
文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...
关键领域软件测试的突围之路：如何破解安全与效率的平衡难题
在数字化浪潮席卷全球的今天，软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件，这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下，实现高效测试与快速迭代？这一命题正考验着…...
Java 二维码
Java 二维码 **技术：**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...
【7色560页】职场可视化逻辑图高级数据分析PPT模版
7种色调职场工作汇报PPT，橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版：职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...
GruntJS-前端自动化任务运行器从入门到实战
Grunt 完全指南：从入门到实战 一、Grunt 是什么？ Grunt是一个基于 Node.js 的前端自动化任务运行器，主要用于自动化执行项目开发中重复性高的任务，例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...