当前位置： 首页 > news >正文

不用循环数组，js+html实现贪吃蛇

news 2026/2/9 16:11:34

功能描述：每走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实现贪吃蛇

功能描述&#xff1a;每走10步随机改变一个方方向&#xff0c;当键盘按下方向键 w,s,a,d时&#xff0c;使用键盘方向控制蛇的移动&#xff0c;蛇头每撞到一次自身时改变屏幕颜色&#xff0c;蛇头碰到边界时从另一边回来。 实现思路&#xff1a;用个30大小的数组存放每个结点&a…...

编程日记 2023/8/31 1:53:05

什么是线程安全和线程不安全？

线程安全（Thread Safety）和线程不安全（Thread Unsafety）是与并发编程相关的概念，特别是在多线程环境中使用共享资源时会涉及到这些概念。 线程安全： 当多个线程同时访问共享资源时，如果在没有额外的同步措施的情况下，这些线程仍然能够正确地执行并保持数据的一致性，那…...

编程日记 2023/8/31 1:52:04

VUE笔记（十）Echarts

一、Echarts简介 1、什么是echarts ECharts是一款基个基于 JavaScript 的开源可视化图表库 官网地址&#xff1a;Apache ECharts 国内镜像&#xff1a;ISQQW.COM x ECharts 文档&#xff08;国内同步镜像&#xff09; - 配置项 示例&#xff1a;echarts图表集 2、第一个E…...

编程日记 2023/8/31 1:51:03

FPGA原理与结构——时钟IP核原理学习

一、前言 在之前的文章中&#xff0c;我们介绍了FPGA的时钟结构 FPGA原理与结构——时钟资源https://blog.csdn.net/apple_53311083/article/details/132307564?spm1001.2014.3001.5502 在本文中我们将学习xilinx系列的FPGA所提供的时钟IP核&#xff0c;来帮助我们进一…...

编程日记 2023/8/31 1:50:02

创建python环境——Anaconda

在Windows中安装Anaconda和简单使用 一.Anaconda发行概述 Anaconda是一个可以便捷获取和管理包&#xff0c;同时对环境进行统一管理的发行版本&#xff0c;它包含了conda、 Python在内的超过180个科学包及其依赖项。 1.Anaconda发行版本具有以下特点&#xff1a; (1)包含了…...

编程日记 2023/8/31 1:49:00

使用Linux部署Kafka教程

目录 一、部署Zookeeper 1 拉取Zookeeper镜像 2 运行Zookeeper 二、部署Kafka 1 拉取Kafka镜像 2 运行Kafka 三、验证是否部署成功 1 进入到kafka容器中 2 创建topic 生产者 3 生产者发送消息 4 消费者消费消息 四、搭建kafka管理平台 五、SpringBoot整合Kafka 1…...

编程日记 2023/8/31 1:47:59

pyechart笔记：opts.AxisOpts

定制化图表的轴线&#xff08;x轴和y轴&#xff09;的样式和设置 0 不设置坐标轴 c1(Bar().add_xaxis([力量,智力,敏捷]).add_yaxis(全能骑士,# 系列名称&#xff0c;用于 tooltip 的显示&#xff0c;legend 的图例筛选。[429,321,296],#系列数据).add_yaxis(猴子,[352,236,4…...

编程日记 2023/8/31 1:46:57

深度思考rpc框架面经之五：rpc熔断限流、rpc复用连接机制

11 RPC框架如何实现限流和熔断 推荐文章&#xff1a;RPC实现原理之核心技术-限流熔断 11.1 为什么Dubbo要做服务的限流&#xff1f;(根本原因是服务端进行自我保护) 限流是一种常见的系统保护手段。在分布式系统和微服务架构中&#xff0c;一个接口的过度使用可能会导致资源…...

编程日记 2023/8/31 1:45:56

Go 数组

数组用于在单个变量中存储相同类型的多个值&#xff0c;而不是为每个值声明单独的变量。 声明数组 在Go中&#xff0c;有两种声明数组的方式&#xff1a; 使用var关键字&#xff1a; 语法 var array_name [length]datatype{values} // 这里定义了长度 或者 var array_n…...

编程日记 2023/8/31 1:44:55

04架构管理之分支管理实践-一种git分支管理最佳实践

专栏说明&#xff1a;针对于企业的架构管理岗位&#xff0c;分享架构管理岗位的职责&#xff0c;工作内容&#xff0c;指导架构师如何完成架构管理工作&#xff0c;完成架构师到架构管理者的转变。计划以10篇博客阐述清楚架构管理工作&#xff0c;专栏名称&#xff1a;架构管理…...

编程日记 2023/8/31 1:43:54

D.OASIS City 和 Warrix 在The Sandbox 庆祝 Rise of the 10th Legend十周年

D.OASIS 首次展示了变革性娱乐 D.OASIS City&#xff0c;正如它与 WARRIX 一起承诺的那样。WARRIX 是获得泰国国家队球衣生产授权的标志性运动服装品牌。 这款激动人心的游戏冒险游戏于今天推出&#xff0c;让用户能够投入 D.OASIS City x WARRIX&#xff1a;Rise of the 10th…...

编程日记 2023/8/31 1:42:53

Git基本操作（Idea版）

第一次发布项目&#xff08;本地->远程&#xff09; 方式一 通过push的方式推送本地库到远程库&#xff08;远程已创建好仓库&#xff09; 这种方式需要提前创建好仓库。 右键点击项目&#xff0c;可以将当前分支的内容 push 到 GitHub 的远程仓库中。 注意&#xff1a…...

编程日记 2023/8/31 1:41:48

NSS [羊城杯 2020]easyser

NSS [羊城杯 2020]easyser 开题。很容易让人觉得环境坏了。 不要慌&#xff0c;无从下手时。看源码、扫目录、抓包。一套操作下来&#xff0c;发现几个可以下手的路由。 /index.php /robots.txt 访问 /star1.php&#xff0c;一说到百度&#xff0c;就猜测是否存在SSRF。 源码中…...

编程日记 2023/8/31 1:40:47

理解底层— —Golang的log库，二开实现自定义Logger

理解底层— —Golang的log库&#xff0c;实现自定义Logger 1 分析实现思路 基于golang中自带的log库实现&#xff1a;对日志实现设置日志级别&#xff0c;每天生成一个文件&#xff0c;同时添加上前缀以及展示文件名等 日志级别&#xff0c;通过添加prefix&#xff1a;[INFO]、…...

编程日记 2023/8/31 1:39:45

RabbitMQ---Spring AMQP

Spring AMQP 1. 简介 Spring有很多不同的项目&#xff0c;其中就有对AMQP的支持&#xff1a; Spring AMQP的页面&#xff1a;http://spring.io/projects/spring-amqp 注意这里一段描述&#xff1a; Spring-amqp是对AMQP协议的抽象实现&#xff0c;而spring-rabbit 是对协…...

编程日记 2023/8/31 1:38:44

C语言练习题解析：挑战与突破，开启编程新篇章！（2）

&#x1f493;博客主页&#xff1a;江池俊的博客⏩收录专栏&#xff1a;C语言刷题专栏&#x1f449;专栏推荐&#xff1a;✅C语言初阶之路 ✅C语言进阶之路&#x1f4bb;代码仓库&#xff1a;江池俊的代码仓库&#x1f389;欢迎大家点赞&#x1f44d;评论&#x1f4dd;收藏⭐ 文…...

编程日记 2023/8/31 1:37:41

sqlite3 加密访问

关于sqlite3 加密 一、相关加密用到的sqlcipher 1.1 sqlcipher 是一个数据库加密的开源库 sqlcipher开源地址 我这边是使用的docker镜像&#xff0c;镜像地址&#xff1a; https://hub.docker.com/r/pallocchi/sqlcipher 加密格式 docker run -v <workdir>:/sqlcip…...

编程日记 2023/8/31 1:36:40

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-...

编程日记 2023/8/31 1:35:37

servlet初体验之环境搭建！！！

我们需要用到tomcat服务器&#xff0c;咩有下载的小伙伴看过来&#xff1a;如何正确下载tomcat&#xff1f;&#xff1f;&#xff1f;_明天更新的博客-CSDN博客 1. 创建普通的Java项目&#xff0c;并在项目中创建libs目录存放第三方的jar包。 建立普通项目 创建libs目录存放第三…...

编程日记 2023/8/31 1:34:36

宁芝 NIZ 键盘开机需要重新插拔 USB 线才能使用

宁芝 NIZ 键盘开机需要重新插拔 USB 线才能使用 问题描述 宁芝 NIZ 键盘开机后无法识别到键盘&#xff0c;需要重新插拔 USB 线才能使用。 解决方法 按住 Fn BackSpaceE 键 5 秒&#xff0c;键盘会切换模式, 状态灯闪 1 次为 USB 接口&#xff1b;状态灯闪 2 次为 PS / 2 …...

编程日记 2023/8/31 1:33:35

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

编程新知 2025/9/14 18:41:15

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

编程新知 2026/1/27 7:46:36

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

编程新知 2025/9/5 12:16:40

定时器任务——若依源码分析

分析util包下面的工具类schedule utils&#xff1a; ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类&#xff0c;封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz&#xff0c;先构建任务的 JobD…...

编程新知 2026/1/26 14:24:46

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

编程新知 2026/2/4 15:29:40

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

编程新知 2025/9/18 11:31:13

【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）

骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术&#xff0c;它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)&#xff1a;由层级结构的骨头组成&#xff0c;类似于人体骨骼蒙皮 (Mesh Skinning)&#xff1a;将模型网格顶点绑定到骨骼上&#xff0c;使骨骼移动…...

编程新知 2026/2/1 5:42:50

汇编常见指令

汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX&#xff08;不访问内存&#xff09;XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

编程新知 2026/1/23 2:04:44

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

编程新知 2025/8/25 19:12:45

以光量子为例，详解量子获取方式

光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学&#xff08;silicon photonics&#xff09;的光波导&#xff08;optical waveguide&#xff09;芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中&#xff0c;光既是波又是粒子。光子本…...

编程新知 2026/2/7 11:51:32