贪吃蛇

贪吃蛇演示地址：传送门

//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";         }     }    }