用html写一个贪吃蛇游戏
<!DOCTYPE html>
<html>
<head><title>贪吃蛇</title><meta charset="UTF-8"><meta name="keywords" content="贪吃蛇"><meta name="Description" content="这是一个初学者用来学习的小游戏"><style type="text/css">*{margin:0;}.map{margin:100px auto;height:600px;width:900px;background:pink;border:10px solid #AFAEB2;border-radius:8px;}</style></head><body>
<div class="map">
<canvas id="canvas" height="600" width="900"></canvas>
</div><script type="text/javascript">//获取绘制工具/*var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");//获取上下文ctx.moveTo(0,0);ctx.lineTo(450,450);*/var c=document.getElementById("canvas");var ctx=c.getContext("2d");/*ctx.beginPath();ctx.moveTo(0,0);ctx.lineTo(450,450);ctx.stroke();*/var snake =[];//定义一条蛇，画蛇的身体var snakeCount = 6;//初始化蛇的长度var foodx =0;var foody =0;var togo =0;function drawtable()//画地图的函数{for(var i=0;i<60;i++)//画竖线{ctx.strokeStyle="black";ctx.beginPath();ctx.moveTo(15*i,0);ctx.lineTo(15*i,600);ctx.closePath();ctx.stroke();}for(var j=0;j<40;j++)//画横线{ctx.strokeStyle="black";ctx.beginPath();ctx.moveTo(0,15*j);ctx.lineTo(900,15*j);ctx.closePath();ctx.stroke();}for(var k=0;k<snakeCount;k++)//画蛇的身体{ctx.fillStyle="#000";if (k==snakeCount-1){ctx.fillStyle="red";//蛇头的颜色与身体区分开}ctx.fillRect(snake[k].x,snake[k].y,15,15);//前两个数是矩形的起始坐标，后两个数是矩形的长宽。}//绘制食物 ctx.fillStyle ="black";ctx.fillRect(foodx,foody,15,15);ctx.fill();}function start()//定义蛇的坐标{//var snake =[];//定义一条蛇，画蛇的身体//var snakeCount = 6;//初始化蛇的长度for(var k=0;k<snakeCount;k++){snake[k]={x:k*15,y:0};}drawtable();addfood();//在start中调用添加食物函数}function addfood(){foodx = Math.floor(Math.random()*60)*15; //随机产生一个0-1之间的数foody = Math.floor(Math.random()*40)*15;for (var k=0;k<snake;k++){if (foodx==snake[k].x&&foody==sanke[k].y)//防止产生的随机食物落在蛇身上{ addfood();}}} function move(){switch (togo){case 1: snake.push({x:snake[snakeCount-1].x-15,y:snake[snakeCount-1].y}); break;//向左走case 2: snake.push({x:snake[snakeCount-1].x,y:snake[snakeCount-1].y-15}); break;case 3: snake.push({x:snake[snakeCount-1].x+15,y:snake[snakeCount-1].y}); break;case 4: snake.push({x:snake[snakeCount-1].x,y:snake[snakeCount-1].y+15}); break;case 5: snake.push({x:snake[snakeCount-1].x-15,y:snake[snakeCount-1].y-15}); break;case 6: snake.push({x:snake[snakeCount-1].x+15,y:snake[snakeCount-1].y+15}); break;default: snake.push({x:snake[snakeCount-1].x+15,y:snake[snakeCount-1].y});}snake.shift();//删除数组第一个元素ctx.clearRect(0,0,900,600);//清除画布重新绘制isEat();isDead();drawtable();} function keydown(e){switch(e.keyCode){case 37: togo=1; break;case 38: togo=2; break;case 39: togo=3; break;case 40: togo=4; break;case 65: togo=5; break;case 68: togo=6; break;}}function isEat()//吃到食物后长度加1{if(snake[snakeCount-1].x==foodx&&snake[snakeCount-1].y==foody){addfood();snakeCount++;snake.unshift({x:-15,y:-15});}}function isDead(){if (snake[snakeCount-1].x>885||snake[snakeCount-1].y>585||snake[snakeCount-1].x<0||snake[snakeCount-1].y<0){alert("You are dead,GAME OVER!!!");window.location.reload();}}document.onkeydown=function(e)
{keydown(e);}
window.onload = function()//调用函数
{ start();setInterval(move,150);drawtable();}
</script>
</body>
</html>相关文章：
用html写一个贪吃蛇游戏
<!DOCTYPE html> <html> <head><title>贪吃蛇</title><meta charset"UTF-8"><meta name"keywords" content"贪吃蛇"><meta name"Description" content"这是一个初学者用来学习的小…...
Topaz Gigapixel AI for Mac 图像放大软件
Topaz Gigapixel AI for Mac是一款专为Mac用户设计的智能图像放大软件。它采用了人工智能技术，特别是深度学习算法，以提高图像的分辨率和质量，使得图像在放大后仍能保持清晰的细节。这款软件的特点在于其能够将低分辨率的图片放大至高分辨率&…...
uniapp先显示提示消息再返回上一页
一、描述 在有些业务场景中，需要先弹出提示后，再返回上一页。 二、思路 使用定时器，先弹出提示消息，然后开个定时器俩秒后再执行，返回上一页的操作，并且清除定时器。 三、实现 uni.showToast({title: …...
【爬虫开发】爬虫从0到1全知识md笔记第2篇：requests模块,知识点：【附代码文档】
爬虫开发从0到1全知识教程完整教程（附代码资料）主要内容讲述：爬虫课程概要，爬虫基础爬虫概述,,http协议复习。requests模块，requests模块1. requests模块介绍,2. response响应对象,3. requests模块发送请求,4. request…...
【算法刷题day11】Leetcode: 20. 有效的括号、 1047. 删除字符串中的所有相邻重复项、150. 逆波兰表达式求值
20. 有效的括号 文档链接：[代码随想录] 题目链接：20. 有效的括号 状态：ok 题目： 给定一个只包括 ‘(’，‘)’，‘{’，‘}’，‘[’，‘]’ 的字符串 s ，判断字符…...
推荐算法策略需求-rank model优化
1.pred_oobe (base) [rusxx]$ pwd /home/disk2/data/xx/icode/baidu/oxygen/rus-pipeline/pipeline-migrate/UserBaseActiveStatPipeline/his_session (base) [rusxx]$ sh test.sh 2. user_skill_history_dict_expt2包含userid [workxx]$ vim /home/work/xx/du-rus/du_rus_o…...
hadoop 常用命令
hadoop 常用命令 hadoop fs -mkdir /test hadoop fs -put /opt/frank/tb_test03.txt /test/ hadoop fs -ls /test/ hadoop fs -cat /test/tb_test03.txt hadoop fs -rm /test/tb_test03.txt hadoop dfs 也能使用、但不推荐，执行会提示： DEPRECATED: Us…...
pdf在浏览器上无法正常加载的问题
一、背景 觉得很有意思给大家分享一下。事情是这样的，开发给我反馈说，线上环境接口请求展示pdf异常，此时碰巧我前不久正好在ingress前加了一层nginx，恰逢此时内心五谷杂陈，思路第一时间便放在了改动项。捣鼓了好久无果…...
实时语音识别（Python+HTML实战）
项目下载地址：FunASR 1 安装库文件 项目提示所需要下载的库文件：pip install -U funasr 和 pip install modelscope 运行过程中，我发现还需要下载以下库文件才能正常运行： 下载：pip install websockets，pi…...
x86_64 ubuntu22.04编译MetaRTC
metaRTC5.0 API https://github.com/metartc/metaRTC/wiki/metaRTC5.0-API Sample https://github.com/metartc/metaRTC/wiki/metaRTC5.0-API-Sample MetaRTC7.0编译 https://github.com/metartc/metaRTC/wiki/Here-we-come,-write-a-C-version-of-webRTC-that-runs-everywhere…...
FreeRTOS day1
1.总结keil5下载代码和编译代码需要注意的事项 需要与板子连通 配置完成后才点击下载 2.总结STM32Cubemx的使用方法和需要注意的事项 下载支持包 打开芯片配置界面 3.总结STM32Cubemx配置GPIO的方法...
SqlSugar快速入门
文章目录 配置SqlSugar0、引入SqlSugarCore包1、编写Context类2、配置实体类3、创建Service服务类进行数据库的CRUD4、配置Controller进行路由 配置SqlSugar 0、引入SqlSugarCore包 1、编写Context类 public static SqlSugarClient db new SqlSugarClient(new ConnectionCon…...
基于el-table实现行内增删改
实现效果： 核心代码： <el-table :data"items"style"width: 100%;margin-top: 16px"border:key"randomKey"><el-table-column label"计划名称"property"name"><template slot-scope&q…...
《霍格沃茨之遗》推荐购买吗 《霍格沃茨之遗》不支持Mac电脑怎么办 crossover24软件值得买吗 crossover中文官网
《霍格沃茨之遗》作为一款期待已久的游戏，自发布以来就吸引了无数玩家的目光。它以哈利波特系列为背景，提供了一个沉浸式的魔法世界体验，让玩家能够探索广阔的霍格沃茨魔法学校，体验魔法学习与战斗，解开古老谜团的乐趣…...
神经网络代码实现（用手写数字识别数据集实验）
目录 一、前言 二、神经网络架构 三、算法实现 1、导入包 2、实现类 3、训练函数 4、权重参数矩阵初始化 5、参数矩阵变换向量 6、向量变换权重参数矩阵 7、进行梯度下降 7.1、损失函数 7.1.1、前向传播 7.2、反向传播 8、预测函数 四、完整代码 五、手写数字识别 一、前言 …...
菜鸟笔记-Python函数-linspace
linspace 是 NumPy 库中的一个函数，用于生成具有指定数量的等间距样本的数组。它的名字来源于“linear space”（线性空间），因为它在指定的范围内均匀地生成数值。 linspace 函数的基本语法如下： numpy.linspace(star…...
为什么我们应该使用QGIS
QGIS地理信息系统是免费的开源软件，已成为创建地图和分析空间数据的强大工具。在本文中，我们将探讨 QGIS 为地图公司带来的诸多好处，以及为什么使用它可以促进您的业务成功。使用QGIS的好处： 1. 免费开源软件，但从长远…...
用Python实现办公自动化（自动化处理Excel工作簿）
自动化处理Excel工作簿 （一）批量生产产品出货清单 以“出货统计表”为例， 需求：将出货记录按照出货日期分类整理成多张出货清单 “出货统计表数据案例” “产品出货清单模板” 1.提取出货统计表的数据 “Python程序代码” # 使用…...
BaseDao入门使用
目录 一、什么是BaseDao?BaseDao的优点：BaseDao用来做什么操作？ 二、BaseDao封装增删改查 案例演示：1、java与数据库进行连接2、连接后可对其进行操作（增、删、改）返回影响行数3、查询 查询一个字段（返回一…...
计算机毕业设计Python+Spark知识图谱高考志愿推荐系统 高考数据分析 高考可视化 高考大数据 大数据毕业设计 机器学习 深度学习 人工智能
学院（全称）： 专业（全称）： 姓名 学号 年级 班级 设计（论文） 题目 基于Spark的高考志愿推荐系统设计与实现 指导教师姓名 职称 拟…...
【kafka】Golang实现分布式Masscan任务调度系统
要求： 输出两个程序，一个命令行程序（命令行参数用flag）和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽，然后将消息推送到kafka里面。 服务端程序： 从kafka消费者接收…...
TDengine 快速体验（Docker 镜像方式）
简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能，本节首先介绍如何通过 Docker 快速体验 TDengine，然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker，请使用 安装包的方式快…...
stm32G473的flash模式是单bank还是双bank？
今天突然有人stm32G473的flash模式是单bank还是双bank？由于时间太久，我真忘记了。搜搜发现，还真有人和我一样。见下面的链接：https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...
模型参数、模型存储精度、参数与显存
模型参数量衡量单位 M：百万（Million） B：十亿（Billion） 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的，但是一个参数所表示多少字节不一定，需要看这个参数以什么…...
【大模型RAG】Docker 一键部署 Milvus 完整攻略
本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装；只需暴露 19530（gRPC）与 9091（HTTP/WebUI）两个端口，即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...
汽车生产虚拟实训中的技能提升与生产优化
在制造业蓬勃发展的大背景下，虚拟教学实训宛如一颗璀璨的新星，正发挥着不可或缺且日益凸显的关键作用，源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例，汽车生产线上各类…...
STM32F4基本定时器使用和原理详解
STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...
【2025年】解决Burpsuite抓不到https包的问题
环境：windows11 burpsuite:2025.5 在抓取https网站时，burpsuite抓取不到https数据包，只显示： 解决该问题只需如下三个步骤： 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...
AI编程--插件对比分析：CodeRider、GitHub Copilot及其他
AI编程插件对比分析：CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展，AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者，分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...
聊一聊接口测试的意义有哪些？
目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开，首…...