js游戏 散分
看csdn各位大大写js游戏早就想练练手也写一个了。
这个贪吃蛇是我的第一个js游戏不对的地方各位大大给指正。
代码写的没什么难的,用Firefox看里面span的属性改变就知道我是怎么做的了。
不多说了,代码贴出来
- HTML code
<!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"></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> </head> <body> </body> </html>