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小试 双人贪吃蛇 的相关文章

随机推荐

  • pip 安装faiss 不能用,使用conda安装并使用faiss成功

    pip 安装faiss 安装过程没有报错 xff0c import时候必报错 xff01 xff01 xff01 1 安装cpu版本faiss pip default time 61 1000 install i https pypi tu
  • busybox 网络相关

    busybox 瑞士军刀 包含很多linux unix 平台的有用utilities 比如sh ls cat grep touch chmod chown cp mv vi stat等等等 包括系统常用工具 编辑器 shell 文件操作 文
  • linux glibc2.12到2.14升级

    linux centos glibc 2 12 到 2 14 有些软件可能要求系统的 Glibc 高于某个版本才可以正常运行 如果您的 Glibc 低于要求的版本 xff0c 为了运行这些软件 xff0c 您就不得不升级您的 Glibc 了
  • Ubuntu 开机自定义脚本启动(最全版)

    一 背景 同伴在频繁更新系统环境 xff0c 需要经常使用reboot命令重启 xff0c 但每次重启后端Jar都会停止 xff0c 每次重启都需要手动启动Web后端Jar包 针对此种情况 xff0c 想到了采用开机自动启动Jar包的方法来
  • pycharm 中让python程序暂停的几种方法

    1 input 这种方法不用包含模块 xff0c 因此这也是最常用的一种暂停手段 Python2中的raw input 和input 语句在Python3中已经被合并到input 中 2 os system 34 pause 34 这种方法
  • 关于 Win32API 中的 LoadLibrary

    有人说 反射反射 xff0c 程序员的法宝 这句话一点也没有错 如果能够动态的加载类和方法 xff0c 就等于彻底的解除了类和类 xff0c 方法和方法的耦合 当然 xff0c 这样编译器就无法帮你检查出其中的错误了 xff0c 还是有一定
  • ViewPage+RadioGroup实现Tab切换

    以前写过一篇也是Tab切换的文章 xff0c 当时做安卓一年左右 xff0c 单纯觉得这样能实现功能 xff0c 但是没有注意到性能和代码简洁性的问题 xff0c 文章为 http blog csdn net nzzl54 article
  • 学科前沿技术(高性能计算机)

    高性能计算机 xff1a 二十世纪八 九十年代是高性能计算机丰富多彩的时期 xff0c 各种体系结构的系统争奇斗妍 进入二十一世纪 xff0c 高性能计算机产业逐渐成熟 xff0c 用户面大大扩大 xff0c 技术也不断聚焦 工业界认为 x
  • 异常行为分析模型设计

    本文针对异常访问现状及问题进行简要描述 xff0c 在此基础上提出基于一元线性回归的最小二乘法异常访问分析模型 xff0c 通过该模型解决了异常访问中时间与访问间相关性问题 异常访问是指网络行为偏离正常范围的访问情况 异常访问包含多种场景
  • CSS 参考手册

    CSS 参考手册 CSS 参考手册 CSS 选择器 W3School 的 CSS 参考手册定期通过所有主流浏览器进行测试 CSS 属性 CSS 属性组 xff1a 动画背景边框和轮廓盒 xff08 框 xff09 颜色内容分页媒体定位可伸缩
  • C语言求n的阶乘(n!)

    从键盘输入一个数 xff0c 求出这个数的阶乘 xff0c 即 n 算法思想 首先要清楚阶乘定义 xff0c 所谓 n 的阶乘 xff0c 就是从 1 开始乘以比前一个数大 1 的数 xff0c 一直乘到 n xff0c 用公式表示就是 x
  • Oracle grant all privileges to user

    测试流程 xff1a 解锁HR用户 SQL gt alter user hr account unlock identified by hr User altered 创建一个test用户 SYS 64 orcl11g gt CREATE
  • 《自己动手写Docker》书摘之一: Linux Namespace

    Linux Namespace 介绍 我们经常听到说Docker 是一个使用了Linux Namespace 和 Cgroups 的虚拟化工具 xff0c 但是什么是Linux Namespace 它在Docker内是怎么被使用的 xff0
  • YYText

    特性 API 兼容 UILabel 和 UITextView支持高性能的异步排版和渲染扩展了 CoreText 的属性以支持更多文字效果支持 UIImage UIView CALayer 作为图文混排元素支持添加自定义样式的 可点击的文本高
  • 场景设计:用OOP的思想设计一个生产者消费者的模型

    具体模型如下 xff1a 有若干个消费者 xff0c 每个消费者都可以独立的执行消费任务 xff0c 偶尔会因为某种原因 xff0c 该消费者会不可用 xff0c 这个时候不能在给他分配消费任务了 此外还有大量待消费的生产品 xff0c 每
  • Ubuntu卡死在登录界面进不去的处理方法

    原因是显卡驱动坏了 xff0c 基本上本人的16 04版本动不动就坏一次 xff0c 已经习惯了 xff0c 18 04好像好不少 xff0c 也不知道是不是兼容问题 操作很简单 xff0c 就是卸载掉原来的驱动然后重装就OK了 1 在登录
  • 产品化的理解

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

    生产消费模式 在实际的软件开发过程中 xff0c 经常会碰到如下场景 xff1a 某个模块负责产生数据 xff0c 这些数据由另一个模块来负责处理 xff08 此处的模块是广义的 xff0c 可以是类 函数 线程 进程等 xff09 产生数
  • 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