jquery 写的贪吃蛇。。 散分

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

解决方案 »

  1.   

    不错基本功能实现。利用jquery各个浏览器都兼容的不错！
    楼主可以直接引用 jquery官方的jquery :http://code.jquery.com/jquery-1.4.2.min.js
    以下是引用后的代码
    <!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>
      

  2.   

    long
      

  3.   

    不错喔，头像居然是凤姐，omg
      

  4.   

    以前见过一个面试者写的也是这个游戏，不过比起楼主的差远了。不知道楼主有没有兴趣到我们公司工作啊？我们公司（上海）正在招C语言和C＃。net的工程师。
      

  5.   

    =.=~  这东西 好玩是好玩 就是感觉没必要写这个! 
    LZ帮我看看我的问题阿 也是jqueryhttp://topic.csdn.net/u/20100618/14/1cf82dc3-773d-4fff-83c7-1f4df1aac381.html?seed=501935408&r=66319162#r_66319162