不用循环数组，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 …...
—东方仙盟)
酒店门锁V10SDK接口说明-幽冥大陆(一百23)—东方仙盟
相关文件系统环境C# :NET.20,NET3.5,NET4,NET4.5,NET 5.0C:VS2005,VS2012,VS2015操作系统：未来之窗VOSWEB:CHROME43核心代码完整代码using System; using System.Collections.Generic; using System.Text; using System.Collections.Specialized;using System.Windo…...
用Python+OpenCV手把手实现Prewitt边缘检测（附完整代码与效果对比图）
用PythonOpenCV手把手实现Prewitt边缘检测（附完整代码与效果对比图） 边缘检测是计算机视觉中最基础也最关键的预处理步骤之一。想象一下，当你需要让计算机"看清"一张照片中的物体轮廓时，边缘检测算法就是它的"视觉…...
ARMv8 HFGITR_EL2寄存器解析与虚拟化指令陷阱控制
1. AArch64 HFGITR_EL2寄存器架构解析HFGITR_EL2（Hypervisor Fine-Grained Instruction Trap Register）是ARMv8架构中专门用于指令级陷阱控制的系统寄存器，属于虚拟化扩展的重要组成部分。这个64位寄存器通过位映射机制实现对特定AArch64指令…...
3步解锁专业级MMD创作：Blender插件如何重塑二次元动画工作流
3步解锁专业级MMD创作：Blender插件如何重塑二次元动画工作流 【免费下载链接】blender_mmd_tools MMD Tools is a blender addon for importing/exporting Models and Motions of MikuMikuDance. 项目地址: https://gitcode.com/gh_mirrors/bl/blender_mmd_tools …...
基于声卡与电流互感器的安全交流功率测量系统设计与实践
1. 项目概述：用声卡安全测量交流功率我一直对各种测量技术抱有浓厚的兴趣，毕竟“测量即认知”这句老话在今天依然适用。对于电力消耗和产出，没有什么比直接测量更能说明问题了。交流功率的测量，核心在于同时获取电压和电流的瞬时值…...
开发转兼职DBA（二）：执行计划教我做事
开发转兼职DBA（二）：执行计划教我做事 查询慢了不知道为什么，加了索引还是慢，复合索引怎么建，执行计划怎么看——这些不是DBA的专利，是每个写SQL的开发者迟早要面对的事。 文章目录 开发转兼职DB…...
第三卷第4章：原型模式设计思想
第三卷第4章：原型模式设计思想 目录介绍 01.案例引入与思考 1.1 痛点场景 1.2 它哪里不舒服 1.3 引出本篇主角 02.原型模式介绍 2.1 原型模式由来 2.2 原型模式定义...
阿波罗登月，不可能：读心术与影子叙事 ——不是向全世界展示登月，而是向全世界注射登月
阿波罗登月，不可能：读心术与影子叙事 ——不是向全世界展示登月，而是向全世界注射登月 Jianbing Zhu 1^{1}1 1^{1}1 ECT-OS-JiuHuaShan 文明实验室 ORCID: 0009-0006-8591-1891 DOI: 10.5281/zenodo.20373157 Email: ect-os-jiuhuashanzoho…...
--脚本介绍)
二十六.签名与脚本(1)--脚本介绍
1.区块链脚本介绍在之前的章节中，我们了解了签名与验证相关，但是btc的交易数据，签名和验证，不是单纯的，还有脚本深度参与其中。我们从开始来：bool SendMoney(CScript scriptPubKey, int64 nValue, CWalletT…...
别再死记硬背了！用UE材质里的点积、叉积，5分钟搞定模型表面动态光效
用UE材质玩转动态光效：点积、叉积实战指南第一次接触UE材质编辑器时，看到那些密密麻麻的数学节点总让人头皮发麻。特别是"点积"、"叉积"这些听起来就很高深的术语，很容易让美术背景的创作者望而却步。但你知道吗…...