js实现贪吃蛇小游戏代码(源码)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>贪吃蛇游戏</title>
</head>
<script type="text/javascript">
    //定义一个点对象
    function Point(x,y){
        this.x=x;
        this.y=y;
        this.getX=function(){
            return x;
        }
        this.getY=function(){
            return y;
        }
    }
    //定义方向变量
    var startDir=null;//蛇移动方向
    var food;//定义存储食物节点的数组
    var snakeloc;//定义一个存储蛇身节点的数组
    //初始化地图
    function initMap() {
        var map = document.getElementById("map");//找到跟节点
        for (var i = 0; i < 20; i++) {
            var tr = document.createElement("tr");//创建节点
            for (var j = 0; j < 20; j++) {
                var td = document.createElement("td");//创建节点
                td.setAttribute("id", "td" + i +"_"+ j);//设置id值 方便后续的查找 设置值
                tr.appendChild(td);//添加节点
            }
            map.appendChild(tr);//加入值
        }
    }
    //初始化蛇
    function initSnake(){
        snakeloc=[];
        var x=10;//设置蛇的x节点 中点
        var y=10;//设置蛇的y节点 中点
        var dir;//保存蛇运动的方向
        var tdm=document.getElementById("td"+x+"_"+y);
        var tdl=document.getElementById("td"+x+"_"+(y-1));
        var tdr=document.getElementById("td"+x+"_"+(y+1));
        //设置点的值
        var point1=new Point(x,y-1);
        var point2=new Point(x,y);
        var point3=new Point(x,y+1);
        //将点对象放入数组中去
        snakeloc.push(point3);
        snakeloc.push(point2);
        snakeloc.push(point1);
        //设置颜色
        tdr.style.background="red";//设置节点为红色
        tdm.style.background="blue";//设置节点颜色
        tdl.style.background="blue";//设置节点颜色
    }
    //初始化食物
    function initFood(){
        var foodX;
        var foodY;
    var flag=0;//定义次数
            while(true){
               foodX = Math.floor(Math.random() * 20);
                foodY = Math.floor(Math.random() * 20);
                for(var i=0;i<snakeloc.length;i++){
                    //如果不和数组中的所有点都不重合,说明这个点可以用
                    if(snakeloc[i].getX()==foodX&&snakeloc[i].getY()==foodY){
                        flag++;
                       break;
                    }
                }
                if(flag==0) break;
            }
                food=[ ];
                food.push(new Point(foodX,foodY));//将食物坐标放入数组中去
                var td=document.getElementById("td"+foodX+"_"+foodY);
                td.style.background="black";
    }
    //监听蛇的移动
    function snakeMove(){
        document.οnkeydοwn=function(e){
            if(e.keyCode>=37&& e.keyCode<=40){
                var currentDir= e.keyCode;
                //看看是否要改变方向 如果没有这一步可能会出现头和身体重合
                if(startDir-currentDir!=2&&currentDir-startDir!=2){
                    startDir=currentDir;
                }
                switch(startDir){
                    case 37:moveLeft();break;
                    case 38:moveUp();break;
                    case 39:moveRight();break;
                    case 40:moveDown();break;
                    default:break;
                }
            }
            if(eatFood()){
                initFood();//就再创建一个食物
            }else{
                clearSnakeEnd();//清除蛇尾
            }
            //如果撞墙或者咬到自己
            if(gameOver()){
                alert("Game Over!");
                return;
            }
            updateSnake();//调用显示蛇
        }
    }
    //向上移动
    function moveUp(){
        var oldHead=snakeloc[0];//旧蛇头位置
        //更新蛇坐标
        for (var i = snakeloc.length ; i > 0; i--) {
            snakeloc[i] = snakeloc[i - 1];
        }
        snakeloc[0]=new Point(oldHead.getX()-1,oldHead.getY());


    }
    //向下移动
    function moveDown(){
        var oldHead=snakeloc[0];//旧蛇头位置
        //更新蛇坐标
        for (var i = snakeloc.length ; i > 0; i--) {
            snakeloc[i] = snakeloc[i - 1];
        }
        snakeloc[0]=new Point(oldHead.getX()+1,oldHead.getY());
    }
    //向左移动
    function moveLeft(){
        var oldHead=snakeloc[0];//旧蛇头位置
        //更新蛇
        for (var i = snakeloc.length ; i > 0; i--) {
            snakeloc[i] = snakeloc[i - 1];
        }
        snakeloc[0]=new Point(oldHead.getX(),oldHead.getY()-1);
    }
    //向右移动
    function moveRight(){
       var oldHead=snakeloc[0];//旧蛇头位置
            //更新蛇
                for (var i = snakeloc.length ; i > 0; i--) {
                    snakeloc[i] = snakeloc[i - 1];
                }
        snakeloc[0]=new Point(oldHead.getX(),oldHead.getY()+1);


    }
    //消除蛇尾 即将它的颜色消掉
    function clearSnakeEnd(){
        var end=snakeloc.pop();//清楚蛇尾 返回蛇尾坐标
        var td=document.getElementById("td"+end.getX()+"_"+end.getY());
        td.style.background="";//设置为一个字符串 即没有颜色
    }
    //更新蛇 显示蛇
    function updateSnake(){
        for(var i=1;i<snakeloc.length;i++){
            var td=document.getElementById("td"+snakeloc[i].getX()+"_"+snakeloc[i].getY());
            td.style.background="blue";
        }
        var th=document.getElementById("td"+snakeloc[0].getX()+"_"+snakeloc[0].getY());
        th.style.background="red";
    }
    //检测蛇是否吃到食物
    function eatFood(){
        var foodX=food[0].getX();
        var foodY=food[0].getY();
        var headX=snakeloc[0].getX();
        var headY=snakeloc[0].getY();
        if(foodX==headX&&foodY==headY){
            return true;
        }
        return false;
    }
    //游戏结束情况
    function gameOver(){
        //死的第一种情况 撞墙而死
        var headX=snakeloc[0].getX();
        var headY=snakeloc[0].getY();
        if(headY>19||headY<0||headX<0||headX>19){
            return true;
        }
        //死的第二种情况 咬死自己
        for(var i=1;i<snakeloc.length;i++){
            var ele=snakeloc[i];
            if(ele.getX()==snakeloc[0].getX()&&ele.getY()==snakeloc[0].getY()){
                return true;
            }
        }
        return false;
    }
</script>
<body>
    <table id="map" border="3" align="center" width="500px" height="500px" style="border-collapse:collapse;">
        <caption style="color: red;font-size: larger;">贪吃蛇游戏</caption>
    </table>
</body>
<script type="text/javascript">
    snakeMove();//移动方法的调用
    initMap();//初始化地图
    initSnake();//初始化蛇
    initFood();//初始化食物
    snakeMove();//移动


</script>
</html>
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页