jQuery写个贪吃蛇

发布时间：2020-07-27 03:59:00 作者：pozey
来源：网络阅读：1121
都说码农都该有自己的博客，我也整个，这是第一次发。
自学JS/JQ半年多，半年前要是听说谁会用JS/JQ做个贪吃蛇我都会觉得他是大神，现在觉得，也就那样了。
最近没项目做，正好想到贪吃蛇我现在应该能做出来了。
说干就干，先不看别人的代码，自己搞，半天的时间搞定了。
偷个懒用JQ写的，也不知道有没有啥问题。
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    var hgn = 15;//横格数 
    var sgn = 10;//竖格数 
    var sc = 3;//初始蛇长 
    var sind = new Array;//蛇索引 
    var sd = 200;//速度 
    var fxcur = null; 
    var inv; 
    var dan_ind;//胆索引 
    var stop_onf = true;//暂停 
     
    $(".body").css({width:50*hgn+"px"}); 
    $(".msg").css({width:$(".body").css("width")}); 
    for(var i=0;i<hgn;i++){ 
        for(var j=0;j<sgn;j++){ 
            $(".body ul").append("<li></li>"); 
        } 
    } 
    for(var i=0;i<sc;i++){ 
        sind[i]=i; 
    } 
     
    dan(); 
    she(); 
    move(); 
     
 
     
     
    //绘蛇 
    function she(){ 
        $("ul li").removeClass("she"); 
        for(var i=0;i<sc;i++){ 
            $("ul li:eq("+sind[i]+")").addClass("she"); 
        } 
    } 
     
    //移动 
    function move(){ 
        if(inv){ 
            window.clearInterval(inv); 
        } 
        inv = window.setInterval(function(){ 
            goway(fxcur); 
        },sd); 
    } 
     
    //移动开关 
    function stopmove(){ 
        if(stop_onf){ 
            if(inv){ 
                window.clearInterval(inv); 
            } 
            $(".msg").animate({top:(parseInt($(".body").css("height"))/2-50)+"px"}).html("STOP"); 
        }else{ 
            $(".msg").html("GO").animate({top:"-50px"}); 
            move(); 
        } 
        stop_onf = !stop_onf; 
    } 
     
    //结束 
    function gameover(){ 
        if(inv){ 
            window.clearInterval(inv); 
        } 
        $(".msg").animate({top:(parseInt($(".body").css("height"))/2-50)+"px"}).html("GAME OVER"); 
    } 
     
    //判断撞到自己 
    function zsf(){ 
        for(var i=0;i<sc-1;i++){ 
            if(sind[sc-1]==sind[i]){ 
                gameover(); 
                return true; 
            } 
        } 
        return false; 
    } 
     
    //移动功能 
    function goway(fx){ 
         
        for(var i=0;i<sc-1;i++){ 
            if(sind[sc-1]==sind[i]){ 
                gameover(); 
                return; 
            } 
        } 
         
         
        if(fx=="you"){ 
            if(sind[sc-1]+1==dan_ind){//吃胆 
                scsc=sc+1; 
                sind[sc-1]=dan_ind; 
                dan(); 
                she(); 
                return; 
            }else if((sind[sc-1]+1)%hgn==0){//撞墙 
                gameover(); 
                return; 
            } 
             
            for(var i=0;i<sc;i++){ 
                if(i==sc-1){ 
                    sind[i]=sind[i]+1; 
                    she(); 
                    return; 
                } 
                sind[i]=sind[i+1]; 
            } 
        }else if(fx=="xia"){ 
            if(sind[sc-1]+hgn==dan_ind){//吃胆 
                scsc=sc+1; 
                sind[sc-1]=dan_ind; 
                dan(); 
                she(); 
                return; 
            }else if(sind[sc-1]>hgn*sgn-hgn){//撞墙 
                gameover(); 
                return; 
            } 
            for(var i=0;i<sc;i++){ 
                if(i==sc-1){ 
                    sind[i]=sind[i]+hgn; 
                    she(); 
                    return; 
                } 
                sind[i]=sind[i+1]; 
            } 
        }else if(fx=="zuo"){ 
            if(sind[sc-1]-1==dan_ind){//吃胆 
                scsc=sc+1; 
                sind[sc-1]=dan_ind; 
                dan(); 
                she(); 
                return; 
            }else if((sind[sc-1])%hgn==0){//撞墙 
                gameover(); 
                return; 
            } 
            for(var i=0;i<sc;i++){ 
                if(i==sc-1){ 
                    sind[i]=sind[i]-1; 
                    she(); 
                    return; 
                } 
                sind[i]=sind[i+1]; 
            } 
        }else if(fx=="shang"){ 
            if(sind[sc-1]-hgn==dan_ind){//吃胆 
                scsc=sc+1; 
                sind[sc-1]=dan_ind; 
                dan(); 
                she(); 
                return; 
            }else if(sind[sc-1]<hgn){//撞墙 
                gameover(); 
                return; 
            } 
            for(var i=0;i<sc;i++){ 
                if(i==sc-1){ 
                    sind[i]=sind[i]-hgn; 
                    she(); 
                    return; 
                } 
                sind[i]=sind[i+1]; 
            } 
        }else{ 
            return; 
        } 
         
         
    } 
     
     
     
     
    //判断是否吃到胆 
    function isdan(num){ 
        if(num==dan_ind){ 
            scsc=sc+1; 
            sind[sc-1]=num; 
            dan(); 
        } 
    } 
     
     
    //按键 
    $(document).keydown(function(event){ 
        var down_num = event.which; 
        var fx = null; 
        if(down_num==37){//左 
            fx = "zuo"; 
        }else if(down_num==38){//上 
            fx = "shang"; 
        }else if(down_num==40){//下 
            fx = "xia"; 
        }else if(down_num==39){//右 
            fx = "you"; 
        }else if(down_num==32){ 
            stopmove(); 
        } 
         
        //需判断能否点击 
        if(fxcur=="shang"&&fx=="xia"||fxcur=="xia"&&fx=="shang"||fxcur=="zuo"&&fx=="you"||fxcur=="you"&&fx=="zuo"){ 
            return; 
        }else{ 
            fxfxcur = fx; 
        } 
         
    }); 
     
    //绘胆 
    function dan(){ 
        //需判断生成胆是否在蛇索引上 
         
        dan_ind = parseInt(hgn*sgn*Math.random()-1); 
        for(var i=0;i<sc;i++){ 
            if(dan_ind==sind[i]){ 
                dan(); 
                return; 
            } 
        } 
         
        $("ul li").removeClass("dan"); 
        $("ul li:eq("+dan_ind+")").addClass("dan"); 
    } 
     
     
     
}) 
</script> 
<style> 
/*整体设置*/ 
a:active {outline: none;star:expression(thisthis.onFocus=this.blur());} 
html{ overflow-y:scroll;} 
*{margin:0;padding:0;list-style:none;outline:none;word-wrap:break-word;} 
img{border:none} 
h2,h3,h4,h5,h6,h7,body,small{font-size:12px; font-weight:400; font-family:Arial,"宋体";} 
table{table-layout:fixed; border-collapse:collapse} 
a{ text-decoration:none;} 
body{ background:#fff;} 
 
.body{ overflow:hidden; border:1px solid #666; position:absolute; left:250px; top:0;} 
li{ width:48px; height:48px; overflow:hidden; float:left; border:1px solid #666; background:#6C9;} 
li.she{ background:#069;} 
li.dan{ background:#0CF;} 
.tel{ font-size:24px;} 
.msg{ overflow:hidden; font-size:24px; color:#333; text-align:center; position:absolute; left:250px; top:0;} 
</style> 
</head> 
 
<body> 
<div class="tel">方向键控制方向<br />空格键暂停</div> 
<div class="body"> 
<ul> 
</ul> 
</div> 
<div class="msg"></div> 
 
</body> 
</html>
jQuery写个贪吃蛇

相关阅读
