原生JS实现贪食蛇(无敌娱乐版)

面向对象分析

确定三个类，一个是地图类Map，一个是食物Food，一个是蛇的本体Snake

1. Map类
   Map类用来一开始的时候布置出一个区域，自有height，width，color等属性，同时持有一个成员_map属性用于保存操作Dom时候生成的div元素，这里是为了实例化之后，可以让其他对象操作该属性。
   注意：appendChild()函数用于在Dom中插入一个节点，并具有以下的特点

如果是已经存在的节点执行再次插入操作，那么该节点将自动从它当前的位置删除并在新的位置重新插入：没有必要显式删除该节点
–引自《javascript权威指南》第六版15.6节（David Flanagan著）

function Map() {            this.width = 64 * 24;            this.height = 64 * 14;            this.color = "#4ECC2B";            this.position = "absolute";            this._map = null;            this.show = function () {                this._map = document.createElement("div");                this._map.style.width = this.width + "px";                this._map.style.height = this.height + "px";                this._map.style.backgroundColor = this.color;                this._map.style.position = this.position;                this._map.style.left = 0;                this._map.style.top = 0;                document.getElementsByTagName("body")[0].appendChild(this._map);            }        }

1. Food类
   Food类用于在由Map对象生成的区域中随机生成一个“食物”，自身有一个show方法用于操作Dom节点添加元素，在这里我是直接用的img来作为生成的食物，当然也可以如Map类一样生成div。
   注意：需要持有一个属性img来保存第一次生成的img节点，今后再次生成食物的时候就直接操作这个属性，这里是利用了appendChild()函数在插入到新位置前会自动删除已经存在的节点的当前位置

function Food() {            this.position = "absolute";            this.img = null;        ……………………………………            this.show = function () {                if(this.img == null){                    this.img = document.createElement("img");                    this.img.src = "./TIM.png";                }             …………………………                map._map.appendChild(this.img);             }        }

1. Snake类
   最为复杂的类，分析Snake需要具备属性：direction(前进方向),body(身体)，方法：move() (配合定时器实现移动)，show() (显示，和move配合刷新蛇的位置), setDirection(keyCode)(通过判断keydown事件的键值来更改蛇的行进方向)
   在show方法中，采取了和Food类的show方法一样的思路，利用已经存在的body元素；
   在move方法中，用蛇头的坐标和食物的坐标判断是否吃到食物，然后将body数组元素加1，（为什么可以随意添加一个坐标0，0的元素呢，当然是因为紧接着这个元素的坐标就会变成倒数第二节的坐标，这个无关紧要，注意坐标变化一定要从尾向头并且除开头部），然后根据direction属性的值，让蛇头的坐标变化，最后调用show方法，展示刷新后的body

function Snake() {            this.direction = "right";            this.body = [[4,2,null],[3,2,null],[2,2,null]];            this.show =function(){                for (var index = 0; index < this.body.length; index++) {                    var element = this.body[index];                    if (element[3]==null) {                       ………………                    }                    ………………                    map._map.appendChild(element[3]);                }            }            this.move =function(){                if(this.body[0][0] == food.x && this.body[0][1] == food.y) {                    this.body.push([0,0,null]);                    food.show();                }                var length =this.body.length;                for (var index = length - 1; index > 0; index--) {                    var element = this.body[index];                    var element2 = this.body[index-1];                    element[0] = element2[0];                    element[1] = element2[1];                }                switch (this.direction) {                    case "right":                                          this.body[0][0] += 1;                     ………………                        break;                    case "left":                       ………………                        break;                    case "up":                    …………                        break;                    case "down":                       …………                        break;                    default:                        break;                }                this.show();            }            this.setDirection=function(keycode){                switch (keycode) {                    case 37:                        this.direction = 'left';                        break;                   ………………                }            }            }

跑起来

后续就很简单了，将三个类的对象都保存在一个window全局对象中，给Snake对象的move方法设置定时器操作，就可以让贪食蛇动起来了。这里当然还需要给document的keydown事件绑定一个函数，用于改变Snake对象的direction属性

window.onload = function () {         ……………………            setInterval("snake.move()",20);            window.document.onkeydown=function(){                var code;                code = event ? event.keyCode :window.event.keyCode;                snake.setDirection(code);            }        }

还没完

还有很多需要完善的
1. 撞墙死和撞自己死怎么判定？用蛇头的坐标判定，当然都是在move方法里面做判断
2. 怎么实现自动吃？当然也是在坐标上面做文章
上面两个就不做具体实现了