当前位置: 代码迷 >> JavaScript >> jquery 写的贪吃蛇。 散分,该怎么处理
  详细解决方案

jquery 写的贪吃蛇。 散分,该怎么处理

热度:431   发布时间:2012-02-29 16:44:10.0
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>


 
  相关解决方案