贪吃蛇

贪吃蛇演示地址：https://liujie1990.github.io/game/retroSnake.html

//1、绘制地图--采用面向对象来做
    function Map()
    {
        //私有成员
        var w=800;
        var h=400;
        //成员方法，绘制地图
        this.showmap=function(){
            //创建div、设置css样式、追加给body
            var tu=document.createElement("div");
            tu.style.width=w+"px";
            tu.style.height=h+"px";
            tu.style.backgroundColor="pink";
            //tu.style.borderWidth="2px";
            document.body.appendChild(tu);
        }
    }
    //2、绘制食物
    function Food()
    {
        var len=20;
        //把食物（权值）坐标声明为公开的，以便在外部访问
        this.xFood=0;
        this.yFood=0;

        this.piece=null;//页面上唯一的食物对象
        //绘制
        this.showfood=function()
        {
            //创建div、设置css样式、追加给body
            if(this.piece===null){//判断页面是否存在食物，不存在就创建一个
            this.piece=document.createElement("div");
            this.piece.style.width=this.piece.style.height=len+"px";
            this.piece.style.backgroundColor="green";
            //食物设置绝对定位
            //食物位置随机摆放
            //移动步进值：20px
            //食物权值坐标：x轴（0-39）  y轴（0-19）
            //食物真实坐标：权值坐标*步进值
            this.piece.style.position="absolute";
            document.body.appendChild(this.piece);
            }
            this.xFood=Math.floor(Math.random()*40);//0-39的随机数
            this.yFood=Math.floor(Math.random()*20);//0-19的随机数
            this.piece.style.left=this.xFood*len+"px";
            this.piece.style.top=this.yFood*len+"px";
        }
    }
    //3、绘制小蛇
    //小蛇由各个蛇节组成，其坐标如下
    //(0,1) (1,1) (2,1) (3,1)
    //var snake=[蛇节,蛇节,蛇节,蛇节]
    //var snake=[[x坐标,y坐标,颜色],[x坐标,y坐标,颜色],[x坐标,y坐标,颜色],[x坐标,y坐标,颜色]]
    //var snake=[[0,1,'green'],[1,1,'green'],[2,1,'green'],[3,1,'red']];
    //给小蛇创建一个二维数组
     function Snake()
     {
        var len=20;

        this.direct="right";//默认向右移动
        //后期snakebody要变化，因此声明为公开的
        //每个蛇节：[x坐标,y坐标,颜色,蛇节对象]
        this.snakebody=[[0,1,'green',null],[1,1,'green',null],[2,1,'green',null],[3,1,'red',null]];
        //绘制小蛇
        this.showsnake=function()
        {
            //alert("1");
             //遍历小蛇的各个蛇节，并依次创建即可
             for(var i=0;i<this.snakebody.length;i++)
             {
                     //this.snakebody[i]代表每个蛇节                     //创建蛇节div
                     if(this.snakebody[i][3]===null){//判断有没有创建对应的蛇节
                        this.snakebody[i][3]=document.createElement('div');
                       //设置css样式(宽度、高度、颜色
                       this.snakebody[i][3].style.width=this.snakebody[i][3].style.height=len+"px";
                       this.snakebody[i][3].style.backgroundColor=this.snakebody[i][2];
                       //蛇节绝对定位
                      this.snakebody[i][3].style.position="absolute";
                      //把蛇节追加给body
                     document.body.appendChild(this.snakebody[i][3]);
                     }
                     this.snakebody[i][3].style.left=this.snakebody[i][0]*len+"px";
                     this.snakebody[i][3].style.top=this.snakebody[i][1]*len+"px";

            }
        }
        //小蛇移动
        //小蛇移动  每个蛇节坐标发生变化而已，再根据新坐标把小蛇绘制出来即可
        //移动的顺序是尾部先移动
       //规律：当前蛇节的新坐标是下一个蛇节的旧坐标(其中不考虑蛇头)，蛇头的移动受控制于键盘事件
        this.movesnake=function()
        {
            //console.log(1);
            //非蛇头蛇节(当前蛇节的新坐标是下一个蛇节的旧坐标)
            for(var i=0;i<this.snakebody.length-1;i++)
            {
                this.snakebody[i][0]=this.snakebody[i+1][0];
                this.snakebody[i][1]=this.snakebody[i+1][1];
            }
            if(this.direct=="right"){
                //蛇头x坐标递增
                this.snakebody[this.snakebody.length-1][0]+=1;
            }
            if(this.direct=="left"){
                //蛇头x坐标递减
                this.snakebody[this.snakebody.length-1][0]-=1;
            }
            if(this.direct=="up"){
                //蛇头y坐标递减
                this.snakebody[this.snakebody.length-1][1]-=1;
            }
            if(this.direct=="down"){
                //蛇头x坐标递增
                this.snakebody[this.snakebody.length-1][1]+=1;
            }
            //判断蛇头碰到食物
            //蛇头坐标
           var xSnake=this.snakebody[this.snakebody.length-1][0];
           var ySnake=this.snakebody[this.snakebody.length-1][1];
            //食物坐标food.xFood  food.yFood
            if(xSnake==food.xFood&&ySnake==food.yFood){
                //console.log("ok");
                //吃食物增加蛇节  就是给小蛇尾部增加蛇节
                //增加的新蛇节是原先尾部蛇节的旧坐标
                var newjie=[this.snakebody[0][0],this.snakebody[0][1],'green',null];
                this.snakebody.unshift(newjie);//把newjie放到数组的第一个位置

                //原来食物消失，重新生成一个新事物
                food.showfood();//重新生成食物
            }

            //控制小蛇在地图范围内移动
            if(xSnake<0||xSnake>39||ySnake<0||ySnake>19){
                   alert("Game Over");
                   clearInterval(timer);
                   return false;
            }
            //不能吃到自己(蛇头坐标与其他蛇节坐标一致)
            for(var j=0;j<this.snakebody.length-1;j++)
             {
                if(this.snakebody[j][0]==xSnake&&this.snakebody[j][1]==ySnake)
                {
                    alert("Game Over you kill by yourself");
                    clearInterval(timer);
                    return false;
                }
             }
            //根据新坐标绘制小蛇
           this.showsnake();
        }
     }
    window.onload=function()
    {
    var map=new Map();
    map.showmap();
    food=new Food();//声明为全局变量以便在该加载事件函数外部访问
    food.showfood();
    snake=new Snake();//声明为全局变量
    snake.showsnake();
    //移动小蛇
    //setInterval(全局变量，时间)
    timer=setInterval("snake.movesnake()",200);
     //设置键盘事件，控制小蛇的移动方向
     document.onkeydown=function(evt){
        var num=evt.keyCode;//通过时间对象获取数码值，进而知道点击的键
        //console.log(num);
         if(num==38||num==87){
            snake.direct="up";
         }
         if(num==40||num==83){
            snake.direct="down";
         }
         if(num==37||num==65){
            snake.direct="left";
         }
         if(num==40||num==68){
            snake.direct="right";
         }
     }
    }