用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的高考志愿推荐系统设计与实现 指导教师姓名 职称 拟…...
基于java+springboot+vue实现的电商个性化推荐系统（文末源码+Lw+ppt）23-389
摘 要 伴随着我国社会的发展，人民生活质量日益提高。于是对电商个性化推荐进行规范而严格是十分有必要的，所以许许多多的信息管理系统应运而生。此时单靠人力应对这些事务就显得有些力不从心了。所以本论文将设计一套电商个性化推荐系统，帮…...
论文阅读，The Lattice Boltzmann Method: Principles and Practice（六）(1)
目录 一、流体模拟方法概述 二、传统的Navier-Stokes求解器 2.1 有限差分 2.2 有限体积法 2.3 有限元法 三、基于粒子的求解器 3.1 动力学理论 3.2 分子动力学 3.3 格子气体模型 3.4 耗散粒子动力学 3.5 多粒子碰撞动力学 3.6 直接模拟蒙特卡罗方法 3.7 平滑粒子流…...
新能源充电桩站场视频汇聚系统建设方案及技术特点分析
随着新能源汽车的普及，充电桩作为新能源汽车的基础设施，其安全性和可靠性越来越受到人们的关注。为了更好地保障充电桩的安全运行与站场管理，TSINGSEE青犀&触角云推出了一套新能源汽车充电桩视频汇聚管理与视频监控方案。 方案采用高清摄…...
三、音频隐写[Audacity、deepsound、dtmf2num、MMSSTV、虚拟声卡、MP3Stego]
工具 1.Audacity 下载：https://www.audacityteam.org/download/windows/ 使用： 删除：先用左键长按拖着选中内容，然后选择软件最上方菜单栏的编辑，然后选择“删除”，最后点击文件的导出音频就能成功导出…...
二、Web3 学习（区块链）
区块链基础知识 一、基础知识1. 区块链可以做什么？2. 区块链的三个特点 二、区块链的类型概括1. PoW2. PoS3. 私有链和联盟链 三、智能合约1. 什么是智能合约2. 如何使用智能合约 四、困境1. 三难选择的基本要素2. 这真的是一个三难选择吗? 五、比特币1. 什么是比特…...
Linux内网提权
一、SUID提权 前提条件： （1）SUID仅对二进制有效（2）执行者对于该程序需要有x的可执行权限（3）本权限仅在程序的执行过程中有效 1、设置SUID权限：（root权限） …...
聚观早报 | 抖音独立商城App上线；阿里云联发科合作
聚观早报每日整理最值得关注的行业重点事件，帮助大家及时了解最新行业动态，每日读报，就读聚观365资讯简报。 整理丨Cutie 3月29日消息 抖音独立商城App上线 阿里云联发科合作 苹果WWDC24官宣 恒大汽车2023年营收财报 亚马逊投资Anthro…...
第十四届蓝桥杯省赛C++ B组所有题目以及题解（C++）【编程题均通过100%测试数据】
第一题《日期统计》【枚举】 【问题描述】 小蓝现在有一个长度为100的数组，数组中的每个元素的值都在0到9的范围之内。数组中的元素从左至右如下所示： 5 6 8 6 9 1 6 1 2 4 9 1 9 8 2 3 6 4 7 7 5 9 5 0 3 8 7 5 8 1 5 8 6 1 8 3 0 3 7 9 2 7 0 5 8 8 …...
【御控物联】 IOT异构数据JSON转化（场景案例一）
文章目录 前言技术资料 前言 随着物联网、大数据、智能制造技术的不断发展，越来越多的企业正在进行工厂的智能化转型升级。转型升级第一步往往是设备的智能化改造，助力设备数据快速上云，实现设备数据共享和场景互联。然而，在生产…...
Kubernetes-running app on kube
Docker 安装Docker 首先，您需要在Linux机器上安装Docker。如果您不使用Linux，则需要启动一个Linux虚拟机(VM)并在该虚拟机中运行Docker。如果你使用的是Mac或Windows系统，并按照指令安装Docker, Docker将为你建立一个虚拟机，并在…...
环境设计排版素材网站/百度网站怎样优化排名
转载自：http://www.cocoachina.com/gamedev/misc/2011/0627/2981.html 游戏一直是 App Store 应用里最热门、最赚钱的一大分类，iOS 游戏强调创意和趣味性的特点也让国内开发团队有更多一鸣惊人的机会。针对市场、玩家、开发商、成功案例等游戏开发要素&a…...
浏览国外服务器的网站/百度推广电话销售好做吗
root用户删除文件提示：Operation not permitted http://blog.csdn.net/evanbai/article/details/6187578转载于:https://www.cnblogs.com/diyunpeng/p/7648537.html...
佛山网站建设哪个好点/宣传推广计划
开发中复杂嵌套时，时常会导致父级事件操作累积在子级身上，相当于子级事件重复执行，即事件累积。类似于定时器的多次叠加 e.g. HTML： 1 <div> 2 <span>123</span> 3 </div> jQueryÿ…...
上海网网站建设/在线子域名二级域名查询工具
一、分类的目的和分类的方法 目标 能够说出项目中进行文本的目的能够说出意图识别的方法能够说出常见的分类的方法 1.1 文本分类的目的 回顾之前的流程，我们可以发现文本分类的目的就是为了进行意图识别 在当前我们的项目的下，我们只有两种意图需要被…...
那个网站做教学视频/网络营销该如何发展
一 模糊查询 sql语法: like concat() 概念: concat: 可以连接一个或者多个字符串，若其中一个为null，则返回null 用concat（org1,org2,…）将 %与 #{name}与连接在一起，避免将sql中%放到java代码中 语法: mysql中是不支…...
规范门户网站的建设和管理办法/市场推广方案ppt
Explain 命令中的 type 列，显示MySQL查询所使用的 关联类型(Join Types) 或者 访问类型，它表明 MySQL决定如何查找表中符合条件的行。常见访问类型性能由最差到最优依次为：ALL < index < range < index_subquery < unique_subque…...