转自：http://topic.youkuaiyun.com/u/20100618/09/B16693A6-77D1-4E53-B1D5-BC8BB90CCED5.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>贪吃蛇</title> <script language="javascript" type="text/javascript" src="../scripts/jquery-1[1].2.6.js" mce_src="scripts/jquery-1[1].2.6.js"></script> <script language="javascript" type="text/javascript"><!-- $(function(){ $("body").append("<div id='panel'></div>"); //构建地图 var strHtml = ""; for(i=0;i<long;i++) { for(j=0;j<high;j++) { strHtml+='<span Xindex="' + j + '" Yindex="' + i + '" class="map noSnake"></span>'; } strHtml+='<div class="clear"></div>'; } $("#panel").append(strHtml); //键盘点击事件 $(document).keydown(function(evt){ evt = evt ||window.event; var key=evt.which||evt.keyCode; switch(key) { case 37:direction="left";break; case 38:direction="up";break; case 39:direction="right";break; case 40:direction="down";break; } }); init(); }); var long = 10; var high = 10; var sLong = 3; var direction = 'right'; var MyInterval = null; var timeSpan = 1000; //初始化 function init() { long = 10; high = 10; sLong = 3; direction = 'right'; for(i=0;i<sLong;i++) { $("span[Yindex='0'][Xindex='" + (sLong-i-1) + "']").attr("index",i).removeClass("noSnake").addClass("snake"); } DisFood(); MyInterval=setInterval("moveNext()",timeSpan); } //移动到下一个 function moveNext() { hspan = $("span[index='0']"); x = 0; y = 0; if(direction=='left') { x = -1; y = 0; }else if(direction=='right') { x = 1; y = 0; }else if(direction=='up') { x = 0; y = -1; }else if(direction=='down') { x = 0; y = 1; } hx = parseInt(hspan.attr('Xindex')); hy = parseInt(hspan.attr('Yindex')); nx = hx + x; ny = hy + y; if(nx<0 || nx>=long || ny<0 || ny>=high) { Failure(); }else if($(".snake[Xindex='" + nx + "'][Yindex='" + ny + "']").size()>0) { Failure(); } $(".snake").attr("temp","temp"); nextMove(0,nx,ny); if($(".food").size()==0) { DisFood(); $("span[temp='temp']").attr("index",sLong).removeAttr("temp").removeClass("noSnake").addClass("snake"); timeSpan=timeSpan-10; sLong++; } $("span[temp='temp']").removeClass("snake").removeClass("food").addClass("noSnake").removeAttr("index").removeAttr("temp"); } //显示食物 function DisFood() { noSnakeCount = parseInt($(".noSnake").size()); if(noSnakeCount>1) { foodIndex = Math.round(Math.random()*noSnakeCount); $(".noSnake").eq(foodIndex).removeClass("noSnake").addClass("food"); }else { success(); } } //蛇身体的下一节移动 function nextMove(index,x,y) { if(index<sLong && $("span[index='" + index + "'][temp='temp']").size()>0) { tx = $("span[index='" + index + "'][temp='temp']").attr("Xindex"); ty = $("span[index='" + index + "'][temp='temp']").attr("Yindex"); $("span[Xindex='" + x + "'][Yindex='" + y + "']").attr("index",index).removeAttr("temp").removeClass("noSnake").removeClass("food").addClass("snake"); nextMove(++index,tx,ty); } } function success() { alert("您获胜了"); } function Failure() { clearInterval(MyInterval); alert('结束了'); } // --></script> <style type="text/css"><!-- .map{ width:10px; height:10px; border:1px solid #000; float:left; } .noSnake{ background:#00F; } .snake{ background:#F00; } .food{ background:#FF0; } .clear{ clear:both; } --></style><style type="text/css" mce_bogus="1">.map{ width:10px; height:10px; border:1px solid #000; float:left; } .noSnake{ background:#00F; } .snake{ background:#F00; } .food{ background:#FF0; } .clear{ clear:both; }</style> </head> <body> </body> </html>
本文介绍了一个使用HTML和JavaScript实现的简单贪吃蛇游戏。通过键盘控制蛇的方向，使其在地图上移动并吃到食物以增长身体长度。文章包含了完整的源代码，展示了游戏逻辑和界面布局。
扫一扫
681
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
