小白记录~学习JAVA一个多月使用js写出简易版贪吃蛇

来源：互联网发布：旺旺名是淘宝名吗编辑：程序博客网时间：2024/06/01 11:39

没有百度哦

其实有哈哈不过是百度一些js事件

最自豪的就是1小时多想出了蛇移动的方法

虽然我也不知道是快是慢

自我感觉挺快的所以认为这脑子不能浪费好好敲代码

允许我自己对自己装一下哈哈

蛇移动的核心就是把最后一张图片变为第一张

代码比较简陋但注释都有见谅

jsp代码 (图片是一张10*10像素的 name="1.png"

<html><head><title></title><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><style type="text/css">div{width:800px; height:600px;border:2px solid red;background-color:black;}body{overflow:hidden;}</style></head><body  onkeydown="remove(event)"><div id="a" ><img id="1" src="1.png" style="position:absolute;top:280;left:380px"><img id="cba" src="1.png" style="position:absolute;top:280;left:300px"> </div></body><script language="javascript">//初始化随机出现的坐标var L;var T;//初始化头出现的坐标var Left = 380;var Top = 280;//标记第二个的idvar index=1;//标记最后一个的idvar i=2;//初始化自动移动的方向的ID,以便于下一次按键后,上一次的自动可以清除var ID=null;//初始化相反的移动方向var key=null;//随机添加食物function removecba(){//取俩个随机数并设置坐标L=Math.ceil(Math.random()*80)*10;T=Math.ceil(Math.random()*60)*10;var cba=document.getElementById("cba");cba.style.left=L;cba.style.top=T;}removecba();//吃到食物后增加图片的方法function addimg(){var img=document.createElement("img");fff=document.getElementById("a");img.setAttribute("src","1.png");img.style.position="absolute";img.style.left=Left;img.style.top=Top;fff.appendChild(img);var test=document.getElementById("1");index=index+1;test.id=index;img.setAttribute("id","1");}//移动的方向function removeL(){if(Left!=10){if(Left==L&&Top==T){removecba();addimg();}var test=document.getElementById("1");Left-=10;test.style.left=Left+"px";}else{clearInterval(ID);window.alert("游戏结束");}}function removeT(){if(Top!=10){if(Left==L&&Top==T){removecba();addimg();}var test=document.getElementById("1");Top -= 10;test.style.top=Top+"px";}else{clearInterval(ID);window.alert("游戏结束");}}function removeR(){if(Left!=800){if(Left==L&&Top==T){removecba();addimg();}var test=document.getElementById("1");Left+=10;test.style.left=Left+"px";}else{clearInterval(ID);window.alert("游戏结束");}}function removeD(){if(Top!=600){if(Left==L&&Top==T){removecba();addimg();}var test=document.getElementById("1");Top += 10;test.style.top=Top+"px";}else{window.alert("游戏结束");clearInterval(ID);}}function removeLL(){//判断是否撞上墙壁if(Left!=10){//当蛇头的坐标与食物的坐标完全重合时,重新出现一个食物if(Left==L&&Top==T){//调用出现食物的方法removecba();//调用增加长度的方法addimg();}//取得蛇头与最后一个var test=document.getElementById("1");var testT=document.getElementById(i++);//对下一次蛇头所在位置进行计算Left-=10;//将最后一个的坐标设置为计算好的蛇头所在位置testT.style.left=Left+"px";testT.style.top=Top+"px";//将新的蛇头id设置为1testT.id="1";index++;//将原来的蛇头id设置为indextest.id=index;//每次移动完调用此方法判断是否撞上自身myself();}else{clearInterval(ID);window.alert("游戏结束");}}function removeTT(){if(Top!=10){if(Left==L&&Top==T){removecba();addimg();}var test=document.getElementById("1");var testT=document.getElementById(i++);Top -= 10;testT.style.top=Top+"px";testT.style.left=Left+"px";testT.id="1";index++;test.id=index;myself();}else{clearInterval(ID);window.alert("游戏结束");}}function removeRR(){if(Left!=800){if(Left==L&&Top==T){removecba();addimg();}var test=document.getElementById("1");var testT=document.getElementById(i++);Left+=10;testT.style.left=Left+"px";testT.style.top=Top+"px";testT.id="1";index++;test.id=index;myself();}else{clearInterval(ID);window.alert("游戏结束");}}function removeDD(){if(Top!=600){if(Left==L&&Top==T){removecba();addimg();}var test=document.getElementById("1");var testT=document.getElementById(i++);Top += 10;testT.style.top=Top+"px";testT.style.left=Left+"px";testT.id="1";index++;test.id=index;myself();}else{window.alert("游戏结束");clearInterval(ID);}}//接收键盘指令并开始自动移动function remove(event){var sum=event.keyCode;if(index==1){//判断是否为上一次的相反方向,如果是,此次返回false,按键不响应if(sum==key){return false;}else if(sum==37){//每次按键根据ID清除上一次的自动移动clearInterval(ID);//每次设置为相反方向key=39;removeL()//设置自动移动ID=setInterval("removeL()",500);}else if(sum==38){clearInterval(ID);key=40;removeT();ID=setInterval("removeT()",500);}else if(sum==39){clearInterval(ID);key=37;removeR();ID=setInterval("removeR()",500);}else if(sum==40){clearInterval(ID);key=38;removeD();ID=setInterval("removeD()",500);//如果不是上下左右四个键,弹出对话框,游戏暂停}else{window.alert("游戏暂停,点击确认恢复");}}else{if(sum==key){return false;}else if(sum==37){clearInterval(ID);key=39;removeLL();ID=setInterval("removeLL()",150);}else if(sum==38){clearInterval(ID);key=40;removeTT();ID=setInterval("removeTT()",150);}else if(sum==39){clearInterval(ID);key=37;removeRR();ID=setInterval("removeRR()",150);}else if(sum==40){clearInterval(ID);key=38;removeDD();ID=setInterval("removeDD()",150);}else{window.alert("游戏暂停,点击确认恢复");}}}//碰到自己function myself(){//根据蛇身长度用for循环依次判断蛇头与蛇身任意一张图片是否重合for(var k=i;k<index;k++){var t1=document.getElementById("1");var t2=document.getElementById(k);if(t1.style.top==t2.style.top&&t1.style.left==t2.style.left){window.alert("游戏结束");}}}</script></html>

0 0

小白记录~学习JAVA一个多月 使用js写出简易版贪吃蛇

小白记录~学习JAVA一个多月使用js写出简易版贪吃蛇