贪吃蛇 javaScript 谷歌浏览器浏览

1.代码:
<!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" />
<script type="text/javascript">
 
window.onload = function(){
//alert("hello world!");
    Snakee();
}
Snakee = function (){ 
    var stopTag = true;
    var i = 0;var headNode = null;
    var snake = new Array(400);
    var size = 2;
    var nextIndex = 0 ;
    snake[0]=21;
    snake[1]=22;
    var tagArr = new Array(400);
    var headIndex = 0 ;
    var tailIndex = 0 ;
    var direction = 0 ;//右 
    var food = 35;
    var speed = 1000;
    var score = 0 ;
    var oTime = null;
    var gameover = false;
    function getHeadIndex(){
        headIndex = snake[size-1];
    }
    function getTailIndex(){
        tailIndex = snake[0];
    }
    function isFood(){
        if(next()==food)return true;
        else return false;
    }
    function generateFood(){
        for(i=0;i<400;i++)tagArr[i]=0;
        for(i=0;i<size;i++)tagArr[snake[i]]=1;
        var t = Math.round(Math.random()*(400-size-76)-0.5);
        var count = 0 ;
        for(i=0;i<400;i++){
            if(tagArr[i]==0&&Math.floor(i/20)!=0&&Math.floor(i/20)!=19&&Math.floor(i%20)!=0&&Math.floor(i%20)!=19){
                if(t==count){
                    food=i;
                    //return i;
                }
                count++;
            }
        }
    }
    function next(){
         
        switch(direction){
            case 0:
                nextIndex = snake[size-1]+1;
            break;
            case 1:
                nextIndex = snake[size-1]+20;
            break;
            case 2:
                nextIndex = snake[size-1]-1;
            break;
            case 3:
                nextIndex = snake[size-1]-20;
            break;
        }
    }
    function eat(){
        next();
        snake[size]=nextIndex;
        size++;
        drawScore(++score);
        generateFood();
    }
    function forword(){
    //eat();
        next();
        if(nextIndex==food){
            eat();
            //alert("");
        }
        else{
            for(i=0;i<size;i++)
            {
                snake[i]=snake[i+1];
            }
            snake[size-1]=nextIndex;
        }
    }
    function leftMove(){
        if(direction!=2&&direction!=0)direction = 2 ;
    }
    function rightMove(){
        if(direction!=2&&direction!=0)direction = 0 ;
    }
    function upMove(){
        if(direction!=3&&direction!=1)direction = 3 ;
    }
    function downMove(){
        if(direction!=3&&direction!=1)direction = 1 ;
    }
     
     
     
    function isExit(){
        next();
        var i = 0 ;
        getHeadIndex();
        var tag = false;
        for(;i<size-1;i++){
            if(headIndex==snake[i])tag=true;
        }
        if(Math.floor(nextIndex/20)<=0||Math.floor(nextIndex/20)>=19||Math.floor(nextIndex%20)<=0||Math.floor(nextIndex%20)>=19||tag)
        {
            //alert("GAVE OVER!!!");
            gameover=true;
            stopTag = true;
            document.getElementById("stopBtn").disabled=true;
            Test();
            snake[0]=21;
            snake[1]=22;
            size = 2 ;
        }
         
    }
    function stopGame(){
        stopTag = true;
    }
    function startGame(){
        stopTag = false;
    }
    function drawPanel(){
        var contentHtml = "";
        var i = 0 ;var j = 0 ;
        var colorStr="";
         
        contentHtml+="<div id='mainPanel' style='top: 10px;position:absolute ; left: 30%;200px;height:200px;'>";
        contentHtml+="<div id='tooldiv'><input id='stopBtn' type='button' value='开始' style='float:left'></input><input id='restartBtn' type='button' value='重置' style='float:left'></input><select id='speedBtn'><OPTION VALUE='1000'>初级1</OPTION><OPTION VALUE='800'>初级2</OPTION><OPTION VALUE='600'>初级3</OPTION><OPTION VALUE='400'>中级1</OPTION><OPTION VALUE='200'>中级2</OPTION><OPTION VALUE='100'>中级3</OPTION><OPTION VALUE='80'>高级1</OPTION><OPTION VALUE='50'>高级2</OPTION><OPTION VALUE='20'>高级3</OPTION></select><input id='scoreInput' readOnly='true' type='text' style='border:0px;50px' value='得分:0'></input></div>";
        contentHtml+="<div id='showPanel'>";
 
        for(;i<20;i++){
            j = 0;
            if(i==0||i==19||j==0||j==19)colorStr="black";
            else colorStr="#00ffff";
            contentHtml+= "<div id='"+(20*i+j)+"' style='position: relative ;clear:left ;float:left;8px;height:8px;background-color:"+colorStr+";margin:1px 1px 1px 1px;'></div>";
            for(j = 1;j<20;j++){
                if(i==0||i==19||j==0||j==19)colorStr="black";
                else colorStr="#00ffff";
                contentHtml += "<div id='"+(20*i+j)+"' style='position: relative ;float:left;8px;height:8px;background-color:"+colorStr+";margin:1px 1px 1px 1px'></div>";
            }
        }
         
        contentHtml += "</div></div>";
        document.write(contentHtml);
     
        var stopBtn = document.getElementById("stopBtn");
        stopBtn.onclick=function(){
            if(stopBtn.value=='开始'){
                startGame();
                stopBtn.value = '暂停';
            }else{
                stopGame();
                stopBtn.value = '开始';
            }
        };
        var restartBtn = document.getElementById("restartBtn");
        restartBtn.onclick=function(){
            window.location.reload();
        };
        var speedBtn = document.getElementById("speedBtn");
        speedBtn.onchange=function(){
            speed=speedBtn.value;
            speedBtn.blur();
            window.focus();
            replay();
        }
        window.onkeypress=_onkeypress;
        window.onkeydown=_onkeydown;
    }http://www.huiyi8.com/tishiyin/
    function drawScore(score){
        document.getElementById("scoreInput").value=('得分:'+score);
    }提示音
    function drawDefaultSnake(){
        for(i=0;i<size-1;i++){
            headNode = document.getElementById(""+snake[i]);
            headNode.style.backgroundColor = "blue";
        }
        headNode = document.getElementById(""+snake[size-1]);
        headNode.style.backgroundColor = "red";
    }
    function clearSnake(){
        for(i=0;i<size;i++){
            headNode = document.getElementById(""+snake[i]);
            headNode.style.backgroundColor = "#00ffff";
        }
    }
    function drawFood(){
        headNode = document.getElementById(""+food);
        headNode.style.backgroundColor = "yellow";
    }
     
    function flashFood(){
         
         
        //alert(r+";"+g+";"+b);
        var foodTimer = null;
        if(foodTimer!=null)clearInterval(foodTimer);
        foodTimer = setInterval(function(){
            if(gameover)clearInterval(foodTimer);
            else{
                if(!stopTag){
                    headNode = document.getElementById(""+food);
                    headNode.style.backgroundColor = "#00ffff";
                    generateFood();
                }
            }
        },8000);
        var fTimer = null;
        if(fTimer!=null)clearInterval(fTimer);
        fTimer = setInterval(function(){
                if(gameover)clearInterval(fTimer);
                else{
                    if(!stopTag){
                        headNode = document.getElementById(""+food);
                        r=Math.round(Math.random()*255);
                        g=Math.round(Math.random()*255);
                        b=Math.round(Math.random()*255);
                        headNode.style.backgroundColor = "rgb("+r+", "+g+", "+b+")";
                    }
                }
        },400);
    }
     
    function tailDraw(){
        getTailIndex();
        headNode = document.getElementById(""+tailIndex);
        headNode.style.backgroundColor = "#00ffff";
    }
    function headDraw(){
        headNode = document.getElementById(""+snake[size-2]);
        headNode.style.backgroundColor = "blue";
        getHeadIndex();
        headNode = document.getElementById(""+headIndex);
        headNode.style.backgroundColor = "red";
    }
    function reDraw(){
                isExit();
                tailDraw();
                forword();
                headDraw();
    }
    function replay(){
        if(oTime!=null)clearInterval(oTime);
        oTime=setInterval(function(){
        if(!stopTag){
            isExit();
            if(!gameover){
                reDraw();
                //flashFood();
                //drawFood();
            }
        }
        },speed);
    }
    function play(){
        drawPanel();
        drawDefaultSnake();
        flashFood();
        replay();
    }
    function _onkeypress(){
         
        if(gameover)return;
        switch(event.keyCode){
            case 39:
            case 68:
            rightMove();
            break;
            case 38:
            case 87:
            upMove();
            break;
            case 37:
            case 65:
            leftMove();
            break;
            case 40:
            case 83:
            downMove();
            break;
            case 32:
            stopTag = !stopTag;
            break;
        }
    }
    function _onkeydown(){
         
        if(gameover||stopTag)return;
        switch(event.keyCode){
            case 39:
            case 68:
            rightMove();
            break;
            case 38:
            case 87:
            upMove();
            break;
            case 37:
            case 65:
            leftMove();
            break;
            case 40:
            case 83:
            downMove();
            break;
        }
        reDraw();   
    }
    play();
}
 
 
function Test(){
    var otTime = null;
    var headdiv = document.getElementById("head");
    if(otTime)
        {
            clearInterval(otTime);
        }
    var i = 0; var j = 0; 
    var headNode = null;
    otTime=setInterval(function(){
        if(i*20+j!=0){
            //headNode.style.backgroundColor = "#00ffff";
        }
        headNode = document.getElementById(""+(i*20+j));
        headNode.style.backgroundColor = "blue";
        if(i%2==0)j++;
        else j--;
        if(j>=20){
            j=19;
            i++;
        }
        if(j<0){
            j=0;
            i++;
        }
        if(i*20+j>=400)clearInterval(otTime);
    },10);
}
 
 
</script>
</head>
<body>
 
</body>
</html>

原文地址:https://www.cnblogs.com/xkzy/p/3873402.html