jquery 写的贪吃蛇。。 散分
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>
里面<script language="javascript" type="text/javascript" src="../scripts/jquery-1[1].2.6.js"></script>
是jquery库，路径需要改下的
发表在本人博客地址：http://blog.csdn.net/li277680701/archive/2010/06/18/5677264.aspx
下载地址：http://download.csdn.net/source/2463742
[解决办法]
沙发
[解决办法]
强悍，有前途！
[解决办法]
你知道我来干嘛的、 呵呵。
[解决办法]
Up~
[解决办法]
[解决办法]
高人...不过头像...
[解决办法]
jf 主要是没有分了！
[解决办法]
学习。。接分
[解决办法]
不错基本功能实现。利用jquery各个浏览器都兼容的不错！
楼主可以直接引用 jquery官方的jquery :http://code.jquery.com/jquery-1.4.2.min.js
以下是引用后的代码
- 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="http://code.jquery.com/jquery-1.4.2.min.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>
[解决办法]
long
[解决办法]
学习了。。。
顶一个。。。
[解决办法]
学习啦。。牛人
[解决办法]
非常感谢非常感谢
[解决办法]
学习学习，很好
[解决办法]
顶啊，多给我点分吧。。。哈哈
[解决办法]
很好 学习一下 呵呵
[解决办法]
b bx
bx
bc
x
cbv
[解决办法]
jfzr
[解决办法]
顶起 牛人
[解决办法]
顶一下吧，牛人啊
[解决办法]
学习。。接分
[解决办法]
唉，好久以前看到过啊！
[解决办法]
牛人一个，凤姐的头像！！！
[解决办法]
不错喔，头像居然是凤姐，omg
[解决办法]
很好....正在学习中
[解决办法]
学习学习
[解决办法]
学习下
[解决办法]
看看
[解决办法]
牛人，致敬
[解决办法]
牛人，致敬
[解决办法]
[解决办法]
顶牛人
[解决办法]
学习学习！！！！
[解决办法]
牛人, 学习一下.楼主,你懂我来干嘛的.
[解决办法]
为什么你们这么牛？
[解决办法]
牛人啊。。。。
[解决办法]
牛人啊
[解决办法]
蹭分来的。。。。。。
[解决办法]
牛人，学习学习！！！！！
[解决办法]
顶一下，厉害。。
[解决办法]
学习了，帮顶。。。接分、、
[解决办法]
======================================
[解决办法]
------解决方案--------------------
呵呵，强帖留名
[解决办法]
学习！
[解决办法]
还不赖。
不错。
[解决办法]
弄大点就好啦。样式什么的弄弄，哈哈，顶
[解决办法]
[解决办法]
那是凤姐???
[解决办法]