HTML5小试 双人贪吃蛇

2023-05-16

<html>
	<head>
	</head>
	<body>
		<div style="float:left;">当前速度1:<button οnclick="jiancl()">-</button><span id="sudu">300ms</span><button οnclick="jiacl()">+</button></div>
		<div style="float:right;">当前速度2:<button οnclick="jiancl2()">-</button><span id="sudu2">300ms</span><button οnclick="jiacl2()">+</button></div>
		<canvas id="mcan" width="300px" height="200px" style="background-color:#CCFF99">您的浏览器版本过低</canvas>
	</body>
	<script type="text/javascript">
		var st1 = "红方 GAMEOVER!",st2 = "蓝方 GAMEOVER!";
		var obj = document.getElementById("mcan");
		var ctx = obj.getContext("2d");//canvas对象
		var width = 300,height = 200;
		var len = 10;//模块长宽
		var keyData = [{k:38,x:0,y:-len},{k:40,x:0,y:len},{k:37,x:-len,y:0},{k:39,x:len,y:0}];
		var keyData2 = [{k:87,x:0,y:-len},{k:83,x:0,y:len},{k:65,x:-len,y:0},{k:68,x:len,y:0}];
		//贪吃蛇
		var data = [[220,20]];//初始位置
		var data2 = [[20,20]];//初始位置
		var eatData;
		var sudu = 300,sudu2 = 300;
		getSj();//要吃的位置
		+function(){
			ctx.fillStyle = "red";
			ctx.fillRect(data[0][0],data[0][1],len,len);
			ctx.fillStyle = "blue";
			ctx.fillRect(data2[0][0],data2[0][1],len,len);
			//ctx.moveTo(0,0);
			//ctx.lineTo(50,20);
			//ctx.stroke();
		}();
		var si,i,si2,i2;
		document.onkeydown = function(e){
			var kcode = e.keyCode;
			if(kcode<97){
				if(kcode>36&&kcode<41){
					i = -1;
					if(kcode==38){i=0}
					else if(kcode==40){i=1}
					else if(kcode==37){i=2}
					else if(kcode==39){i=3}
					if(i!=-1){
						clearInterval(si);
						si = window.setInterval("testFunction()",sudu);
						animateDraw();	
					}
				}else{// 87 83 65 68
					i2 = -1;
					if(kcode==87){i2=0}
					else if(kcode==83){i2=1}
					else if(kcode==65){i2=2}
					else if(kcode==68){i2=3}
					if(i2!=-1){
						clearInterval(si2);
						si2 = window.setInterval("testFunction2()",sudu);
						animateDraw2();	
					}
				}
			}else{
				//188 190 97 98
				if(kcode==188){
					jiancl2();
				}else if(kcode==190){
					jiacl2();
				}else if(kcode==97){
					jiancl();
				}else if(kcode==98){
					jiacl();
				}
			}
		}
		function jiancl(){
			clearInterval(si);
			sudu = sudu-10;
			document.getElementById("sudu").innerHTML = sudu+"ms";
			si = window.setInterval("testFunction()",sudu);
			animateDraw();
		}
		function jiancl2(){
			clearInterval(si2);
			sudu2 = sudu2-10;
			document.getElementById("sudu2").innerHTML = sudu2+"ms";
			si2 = window.setInterval("testFunction2()",sudu2);
			animateDraw2();
		}
		function jiacl(){
			clearInterval(si);
			sudu = sudu+10;
			document.getElementById("sudu").innerHTML = sudu+"ms";
			si = window.setInterval("testFunction()",sudu);
		}
		function jiacl2(){
			clearInterval(si2);
			sudu2 = sudu2+10;
			document.getElementById("sudu2").innerHTML = sudu2+"ms";
			si2 = window.setInterval("testFunction2()",sudu2);
		}
		function testFunction(){
			animateDraw();
		}
		function testFunction2(){
			animateDraw2();
		}
		function animateDraw(){
			if(i!=-1){
				var x = data[0][0]+keyData[i].x;
				var y = data[0][1]+keyData[i].y;
				for(var m = 0;m<data2.length;m++){
					if(m!=0){
						if(x==data2[m][0]&&y==data2[m][1]){
							alert(st1);
							clearInterval(si);
							return;
						}
					}else{
						if(x==data2[0][0]&&y==data2[0][1]){
							if(data.length>data2.length){
								alert(st2);
								clearInterval(si);
								return;
							}else{
								alert(st1);
								clearInterval(si);
								return;
							}
						}
					}
				}
				if(x>=0&&x<width&&y>=0&&y<height){
					if(x==eatData[0]&&y==eatData[1]){
						getSj();
					}else{
						draw("#CCFF99",data.pop());
					}
					data.unshift([x,y]);
					draw("red",data[0]);
				}else{
					clearInterval(si);
					alert(st1+" GAME OVER!");
				}
			}
		}
		function animateDraw2(){
			if(i2!=-1){
				var x = data2[0][0]+keyData2[i2].x;
				var y = data2[0][1]+keyData2[i2].y;
				for(var m = 0;m<data.length;m++){
					if(m!=0){
						if(x==data[m][0]&&y==data[m][1]){
							alert(st2);
							return;
						}
					}else{
						if(x==data[0][0]&&y==data[0][1]){
							if(data2.length>data.length){
								alert(st1);
								clearInterval(si);
								return;
							}else{
								alert(st2);
								clearInterval(si);
								return;
							}
						}
					}
				}
				if(x>=0&&x<width&&y>=0&&y<height){
					if(x==eatData[0]&&y==eatData[1]){
						getSj();
					}else{
						draw("#CCFF99",data2.pop());
					}
					data2.unshift([x,y]);
					draw("blue",data2[0]);
				}else{
					clearInterval(si2);
					alert(st2);
				}
			}
		}
		function getSj(){
			var now=new Date();
			var x = now.getSeconds()%(width/len-1)*len;
			var y = now.getSeconds()%(height/len-1)*len;
			var b = false;
			for(var m = 0;m<data.length;m++){
				if(m.x==x&&m.y==y)b = true;
			}
			if(!b){
				eatData = [x,y];
				draw("#"+randomColor(),eatData);
			}	
		}
		function randomColor(){  
			var rand = Math.floor(Math.random( ) * 0xFFFFFF).toString(16);  
			if(rand.length == 6){  
				return rand;  
			}else{  
				return randomColor();  
			}
		}
		function draw(a,b){
			ctx.fillStyle = a;
			ctx.fillRect(b[0],b[1],len,len);
		}
	</script>
</html>


  

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

HTML5小试 双人贪吃蛇 的相关文章

  • python代码,两个4*4旋转矩阵之间的位姿变化,相对旋转矩阵

    python代码 xff0c 两个4 4旋转矩阵之间的位姿变化 xff0c 也就是求两个旋转矩阵之间的相对旋转矩阵 import numpy as np def get transform matrix rot mat1 rot mat2
  • crazyS中给firefly飞机添加两个相机

    firefly飞机中原本只有一个相机 xff0c 由于项目需要一个飞机去识别前方两架飞机 xff0c 因此需要增加一个相机 在rotors descriptioin gt urdf gt mav with vi sensor中可以看到此处
  • gitee(码云)和gitHub的区别

    1 gitee与gitHub概念 xff1f Gitee xff08 码云 xff09 是开源中国社区推出的代码托管协作开发平台 xff0c 支持Git和SVN xff0c 提供免费的私有仓库托管 Gitee专为开发者提供稳定 高效 安全的
  • 使用库函数API和C代码中嵌入汇编代码两种方式使用同一个系统调用

    郭孟琦 43 原创作品转载请注明出处 43 Linux内核分析 MOOC课程http mooc study 163 com course USTC 1000029000 首先我选择的系统调用是122号系统调用 uname 简单的介绍一下un
  • 局域网共享文件夹加密(100%成功版本)

    文章目录 一 创建新用户1 右键此电脑选择管理2 点击本地用户和组3 点击用户A 右键空白区域选择创建新用户B 设置用户名和密码C 取消勾选用户下次登录时须更改密码D 勾选用户不能更改密码和密码永不过期 二 创建共享文件夹1 创建一个新文件
  • STM32PWM--基于HAL库(第十三届蓝桥杯嵌入式模拟题)

    文章目录 前言一 CubeMX配置 第十三届模拟题完整版 二 代码相关定义 声明1 函数声明2 宏定义3 变量定义 三 主要函数1 按键扫描2 配置模式3 LCD显示4 频率检测 TIM2输入捕获中断函数 5 PWM输出 TIM3 6 Ma
  • STM32综合-基于HAL库(第十二届蓝桥杯嵌入式省赛)

    文章目录 前言一 CubeMX配置 第十二届省赛完整版 二 代码相关定义 声明1 函数声明2 宏定义3 变量定义 三 主要函数1 按键扫描2 串口接收中断 定时器中断 接收 3 数据解析4 判定数据正误5 数据更新6 结算7 Main函数
  • STM32RTC秒中断--基于HAL库(一文看懂如何配置并使用)

    文章目录 前言一 CubeMX配置 RTC相关 1 使能RTC xff1a 2 进制配置 xff1a 3 初始时间配置 xff1a 4 日期配置 5 闹钟配置 二 代码1 获取时间2 设置闹钟3 闹钟中断函数 三 实验结果总结 前言 相关说
  • STM32LCD--基于HAL库(选中高亮?一文看懂如何玩转高亮显示)

    文章目录 前言一 LCD上的坐标这个坐标是怎么确定的 xff1f X轴Y轴 二 高亮显示类型三 部分真题要求解析四 如何高亮显示选中数据五 代码分析总结 前言 相关说明 xff1a 开发板 xff1a CT117E M4 STM32G431
  • STM32MP157实现串口接收数据上云-MP157串口测试

    文章目录 前言一 需要软件二 minicom配置三 功能选择四 发送数据结语 前言 本篇分享 xff1a 这次将会用几篇博客分享STM32MP157实现串口接收数据上云的一个基础功能 xff0c 实现STM32MP157的串口在接收到数据时
  • STM32MP157实现串口接收数据上云-云数据库存储多设备数据&界面显示实现

    文章目录 前言一 软件安装二 代码改进1 串口接收2 JSON数据解析 三 云产品流转1 作用2 自定义产品功能 amp 添加设备3 创建数据传输规则 四 MYSQL操作五 NODE RED操作1 总体思路2 安装节点3 节点配置4 页面布
  • TX2

    目录 1 Jetson TX2简介2 使用前准备2 1显示2 2控制2 3电源2 4开机2 5系统2 6使用图形界面2 7系统更新 xff0c 安装模块3 对外接口 xff1a 4 软件包配置JetPack4 1使用JetPack 5 TX
  • Linux应用编程-音频应用编程-语音转文字项目

    文章目录 前言Linux语音识别alsa lib简介 xff1a 安装alsa lib库 xff1a libcurl库简介 xff1a 安装libcurl库 xff1a API调用录音相关概念样本长度 xff08 Sample xff09
  • STM32MP157-QT-串口调试助手设计

    文章目录 前言STM32MP157串口调试助手widget uipro文件widget h头文件槽函数成员声明 widget cpp头文件扫描串口并添加到下拉列表串口配置参数获取配置参数 打开 关闭串口读取数据信号读数据函数代码 发送数据清
  • Linux-VIM使用

    文章目录 前言VIM使用1 切换模式2 跳转 1 跳转到指定行 2 跳转到首行 3 跳转到末行 3 自动格式化程序4 大括号对应5 删除 xff08 1 xff09 删除一个单词 xff08 2 xff09 删除光标位置至行尾 xff08
  • JAVA学习记录

    文章目录 前言Pta做题样例做题样例 命名规范 amp 代码风格基本数据类型基本语法类变量类函数关系运算 浮点数 xff08 实型 xff09 数组Java定义数组Java程序遍历整个数组使用FOR EACH循环输出整个数组 循环使用对象字
  • STM32G431-基于HAL库(第十四届蓝桥杯嵌入式模拟题2)

    文章目录 前言一 CubeMX配置 第十四届模拟题2完整版 二 代码相关定义 声明1 函数声明2 宏定义3 变量定义 三 主要函数1 按键扫描2 各参数控制3 LCD显示4 输出信号改变5 串口接收6 Main函数 四 实验结果1 数据页1
  • 线性控制理论纵横

    线性控制理论是系统与控制理论中最为成熟和最为基础的一个组成分支 xff0c 是 现代控制理论的基石 系统与控制理论的其他分支 xff0c 都不同程度地受到线性控制 理论的概念 方法和结果的影响和推动 线性系统理论的研究对象为线性系统 xff
  • 非线性控制理论的发展

    人类认识客观世界和改造世界的历史进程 xff0c 总是由低级到高级 xff0c 由简单到复 杂 xff0c 由表及里的纵深发展过程 在控制领域方面也是一样 xff0c 最先研究的控制系统 都是线性的 例如 xff0c 瓦特蒸汽机调节器 液面
  • 如何正确使用电烙铁

    焊接技术是一项无线电爱好者必须掌握的基本技术 xff0c 需要多多练习才能熟练掌握 1 选用合适的焊锡 xff0c 应选用焊接电子元件用的低熔点焊锡丝 2 助焊剂 xff0c 用25 的松香溶解在75 的酒精 xff08 重量比 xff09

随机推荐

  • 2.13 STM32 串口传输最佳处理方式 FreeRTOS+队列+DMA+IDLE (一)

    当多个串口数据都有大量数据来时 我们如何最佳处理STM32串口通信数据 可以通过FreeRTOS 队列的发送方式 下面将串口DMA发送处理过程 中心思想 1 建立一个大的环形数组 2 发送的数据时 将数据存入到大的数组 3 需要发送数据的长
  • 最流行的开源飞控项目ArduPilot Mega(APM)介绍及发展历史

    ArduPilotMega APM 是市面上最强大的基于惯性导航的开源自驾仪 特性包括 免费开源固件 xff0c 支持飞机 xff08 34 ArduPlane 34 xff09 xff0c 多旋翼 四旋翼 六旋翼 八旋翼等 直升机 xff
  • 解密Apache HAWQ ——功能强大的SQL-on-Hadoop引擎 [作者:常雷]

    作者 xff1a 常雷 博士 xff0c Pivotal中国研发中心研发总监 xff0c HAWQ并行Hadoop SQL引擎创始人 xff0c Pivotal HAWQ团队负责人 xff0c 曾任EMC高级研究员 专注于大数据与云计算领域
  • 超简单的麻将算法

    麻将的算法 提高篇 1 先说说 xff0c 数值的构成 类型字 0 xff1a 东南西北中发白 1 xff0c 2 xff0c 3 xff0c 4 xff0c 5 xff0c 6 xff0c 7 类型万 1 xff1a 1 万 2万3 万
  • Android布局常用

    1 控件隐藏 在XML 文件里设置属性隐藏 android visibility 61 34 invisible 34 android visibility 61 34 visible 34 android visibility 61 34
  • 乘法

    乘法 请仔细把下面的看懂 xff0c 看完后 xff0c 也许你能口算出 1 xff5e 199 之间数的平方 xff0c 或许能口算出多个数的结果 1 乘法的本质 xff1a 乘法的本质就是求和 从上面两张图片中 xff0c 你可以知道
  • Android Activity之间跳转与传值

    一 Activity 跳转与传值 xff0c 主要是通过 Intent 类来连接多个 Activity xff0c 通过 Bundle 类来传递数据 最常见最一般的页面跳转代码 xff0c 很简单 xff0c 如下 xff1a Intent
  • URLEncoder.encode和decode

    http www apkbus com forum php mod 61 viewthread amp tid 61 13853 amp fromuid 61 3402
  • JPCT-AE资料相关

    JPCT AE相关 1 网站参考 xff1a 官方网站 http www jpct net download html API http www jpct net jpct ae doc JPCT AE wiki http www jpct
  • 分享本人VSCode配色(如何修改VSCode各种颜色)

    按下Command 43 Shift 43 P打开命令面板输入settings Open Settings为用户自定义设置Open Default Settings为默认设置 xff08 只读 xff0c 不能修改的 xff09 选中Ope
  • ROS学习番外篇12—Mac M1(Pro+Max)安装ROS1或ROS2须知

    由于苹果换了芯片架构 xff0c 因此裸机安装ROS2或者源码安装ROS1和ROS2变得非常困难 使用Parallels Desktop或者其他虚拟机 xff08 比如UTM xff09 安装Ubuntu然后再在Ubuntu上安装ROS是目
  • stm32cubemx hal学习记录:PWR 低功耗停止模式

    一 低功耗停止模式 1 所有时钟都已经停止 2 进入方式 xff1a 配置PWR CR寄存器的PDDS 43 LPDS位 43 SLEEPDEEP位 43 WFI或WFE命令 3 唤醒方式 xff1a 任意外部中断 4 关闭所有1 8v区域
  • Ubuntu下查看文件、文件夹和磁盘空间的大小

    在实际使用ubuntu时候 xff0c 经常要碰到需要查看文件以及文件夹大小的情况 有时候 xff0c 自己创建压缩文件 xff0c 可以使用 ls hl 查看文件大小 参数 h 表示Human Readable xff0c 使用GB MB
  • stm32cubemx hal学习记录:FreeRTOS任务管理

    一 基本配置 1 配置RCC USART1 时钟84MHz 2 配置SYS xff0c 将Timebase Source修改为除滴答定时器外的其他定时器 xff0c 因为滴答定时器被用于时钟基准 xff0c 可以实现任务切换 Timebas
  • 【面试笔试-c/c++】2013年校园招聘创新工场笔试题(北邮场)

    2013年校园招聘创新工场笔试题 xff08 北邮场 xff09 及一面 题目节后补上 回家了 xff0c 上网不方便 面试题 一面 xff1a 1 手写二叉树的中序非递归遍历 xff0c 一步一步解释代码 xff0c 给个二叉树示范代码流
  • PX4驱动分析之MPU6000

    PX4驱动分析之MPU6000 前言 xff1a 首先分析PX4中MPU6000传感器驱动的注册 xff0c 调用 xff0c 实例的过程 xff0c 先要理解一个事情 就是PX4是使用了一个类Linux操作系统的Nuttx操作系统 也就是
  • PX4分析系列之添加北醒TOF传感器(使用UART)

    PX4分析系列之添加北醒TOF传感器 xff08 使用UART xff09 提示 xff1a 一个飞行器爱好者 xff0c 才疏学浅 通过自己学习PX4源码的过程 xff0c 进行分析和记录 欢迎各路大神讨论 xff0c 并指正文中错误 x
  • 产品化的理解

    我对产品化的理解 产品化的时机是看业务的需要 xff0c 不管是对前景的落实 xff0c 还是项目转化成产品 xff0c 这些都不是技术人员能考虑的 xff0c 业务的发展和策划 xff0c 如何进行市场细化等如果都由技术人员考虑 xff0
  • JS对象转insert语句

    function obj2Sql tablename obj var sqls 61 34 34 f 61 34 34 v 61 34 34 obj forEach o 61 gt f 61 34 34 v 61 34 34 for let
  • HTML5小试 双人贪吃蛇

    lt html gt lt head gt lt head gt lt body gt lt div style 61 34 float left 34 gt 当前速度1 xff1a lt button nclick 61 34 jianc