HTML5小试 双人贪吃蛇
生活随笔
收集整理的這篇文章主要介紹了
HTML5小试 双人贪吃蛇
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<html><head></head><body><div style="float:left;">當(dāng)前速度1：<button οnclick="jiancl()">-</button><span id="sudu">300ms</span><button οnclick="jiacl()">+</button></div><div style="float:right;">當(dāng)前速度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 = "藍(lán)方 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>
總結(jié)
以上是生活随笔為你收集整理的HTML5小试 双人贪吃蛇的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 约4万个外国人名，中英对照
- 下一篇： 仿链家地图找房_【前端-自如/链家/安居