HTML5小试双人贪吃蛇

<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 68i2 = -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 98if(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>

HTML5小试双人贪吃蛇相关推荐

Pair Poject 1 【新双人贪吃蛇】本组：龚逸合作者：庞俊
[新双人贪吃蛇] 新双人贪吃蛇是由庞俊和我(龚逸)一起开发的一款双人对战小游戏,并作为我们的Pair Work项目发布. --游戏下载-- http://files.cnblogs.com/banan ...
单双人贪吃蛇小游戏（控制台）
本代码参考另一位博主的贪吃蛇的思想.单双人贪吃蛇模式. 编译已通过的平台:VS2019. 如有问题,请伙伴们一起讨论哟. 1. 程序界面功能以及运行截图如下: (1)程序主界面运行截图: (2)单人游 ...
双人贪吃蛇@botzone数据格式
本游戏由GaoShuo推荐,在北京大学Botzone平台开展. 游戏为双人贪吃蛇,两程序对战,先碰撞为输. 采用JSON进行数据交换,JSON语言的形式定义在这里,平台采用json-cpp作为pars ...
html贪吃蛇自动走,分享一个用html5实现的贪吃蛇特效代码
本篇小编为大家分享一个用html5实现的简单贪吃蛇特效代码,喜欢的小伙伴们可以看一下 Snake //内置大量BUG,I'm sorry. var lev=100; //定时器间隔时间 var num ...
html5实现贪吃蛇,分享一个用html5实现的贪吃蛇特效代码
本篇小编为大家分享一个用html5实现的简单贪吃蛇特效代码,喜欢的小伙伴们可以看一下 Snake //内置大量BUG,I'm sorry. var lev=100; //定时器间隔时间 var num ...
java3d酷眩贪吃蛇下载,100行JS实现HTML5的3D贪吃蛇游戏
js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型, ...
html5+JavaScript实现贪吃蛇游戏（可查看排行榜和个人历史记录）
先看结果截图(界面很丑,但是主要是为了贪吃蛇游戏算法设计和历史记录.排行榜功能的实现,希望以后不被产品经理打,哈哈) 功能描述: 1.开始游戏页面之前输入玩家姓名 2.历史记录:可以查看之前自己玩过的 ...
html5小游戏源码_[源码和报告分享]基于HTML5实现的贪吃蛇小游戏
1 游戏介绍贪吃蛇的经典玩法有两种: 积分闯关一吃到底第一种是笔者小时候在掌上游戏机最先体验到的(不小心暴露了年龄),具体玩法是蛇吃完一定数量的食物后就通关,通关后速度会加快:第二种是诺基亚在1 ...
基于html5贪吃蛇小游戏,使用HTML5 Canvas制作贪吃蛇小游戏
近重要在研究OAuth2,等demo完成了,会给大家来一个专题分享. 看到我身边的一个同事在玩蛇蛇争霸感觉蛮有意思的,这里找了一个贪吃蛇的游戏分享给大家. 按理说canvas与其应用是老生常谈 ...
HTML5小游戏贪吃蛇分析与实现
昨天下午研发中心总结大会,晚上大家一起吃饭. 多少面孔成了曾经,多人新人充满憧憬,明年又会是如何.年年岁岁花相似,岁岁年年人不同. 晚上大家吃饭,我们桌不喝酒. 口味虽然淡了点,勉强也还算尽兴. 8点 ...

HTML5小试双人贪吃蛇

HTML5小试双人贪吃蛇相关推荐

最新文章

热门文章

HTML5小试 双人贪吃蛇

HTML5小试 双人贪吃蛇相关推荐

最新文章

热门文章

HTML5小试双人贪吃蛇

HTML5小试双人贪吃蛇相关推荐