js贪吃蛇游戏（下）

此文是承接js规范易懂的贪吃蛇游戏（上），主要描述贪吃蛇动态内容，比如前进，吃果实后变大，越界，速度控制等。

在js规范易懂的贪吃蛇游戏（上），init()函数已经 完成了initData()和draw()，接下来是最后一个函数，bindEvents()。

在bindEvents()函数里面，有2个函数：①方向控制；②时间控制。 

①方向控制directionContoller

document.body.onkeydown捕获按键，对ketCode进行判断，左（37），上（38），右（39），下（40），再将direction根据keyCode置为自己设置的标志即可。这里需要注意一点：如果这时候的方向为x，而按下的方向为-x，那么按键无效。比如现在方向是向左，而按下右是无效转弯的。

case 37: // 左, 1表示右，即当蛇向右行时，按左键不能改变方向，下面同理
    if (_this.direction == 1) return;
    _this.direction = -1;
    break;

设置好方向后，调用move()函数，这里控制蛇的移动，就是说到底就是在蛇体数组里面新增头元素，去掉尾元素，这里还要进行2个判断：1)蛇有没有咬到自己；2)有没有出界。

调用food()方法判断蛇是否吃到果实，在蛇数组里面设置好元素后，draw()重绘，以此完成了蛇的移动和吃果实。

this.food = function () {
    var _this = this;
    var headNode = _this.bodyNodes[0];
    //吃到果实
    if (_this.Utils.equals(headNode, _this.foodNode)) {
        _this.bodyNodes.push(_this.foodNode);//push()方法可向数组的末尾添加一个或多个元素，并返回新的长度。
        _this.foodNode = null;
        var score = _this.bodyNodes.length - 1;
        $('#score').text(score);
        if (score % 10 == 0) {//加速提高难度
            _this.speed += 10;
            _this.timerController();
        }
    }
};

②timerController

时间控制，

利用setInterval()函数定时调用move()方法，时间为6000/speed。

this.timerController = function () {
    var _this = this;
    if (_this.timer) {
        clearInterval(_this.timer);
    }
    _this.timer = setInterval(function () {
        _this.move();
    }, 6000 / _this.speed);
    $('#speed').text(_this.speed);
};

最后是工具类方法contains()和equesl()。contains用来判断新生成随机果实的位置和蛇重合时重新生成随机果实，以及蛇自己碰到自己时算游戏结束。

equals用来判断蛇到果实没有。他们的区别就是，contains要用each比较，因为蛇体数组有多个，所以需要循环一个一个比较。而equals()只比较蛇头和果实重合，所以不用循环。

this.Utils = {
    contains: function (arr, o) {
        var _this = this;
        if (!arr || !o) return false;


        var flag = false;
        $.each(arr, function () {
            if (!this) return true;
            if (_this.equals(this, o)) {
                flag = true;
                return false;
            }
        });
        return flag;
    },
    equals: function (o1, o2) {
        if (o1 == o2) return true;
        if (!o1 || !o2) return false;
        return o1.x == o2.x && o1.y == o2.y;
    }
};