js贪吃蛇

js贪吃蛇

这家伙想通了其实超级简单

原理，主要就是绘制食物和蛇咯，食物出现的位置需要检测（不出现在蛇身上），至于蛇(蛇身存为一个二维数组[[1,1],[1,2],…])，数组的unshift吃食物和pop方法移动就可以搞定了，不管蛇身多长，也不会有啥性能问题……

自己写的源码：

/*
#tcs {
    width: 400px;
    height: 400px;
    margin: 100px auto 0;
}
#tcs div {
    float: left;
    width: 20px;
    height: 20px;
    background: #000;
}
#tcs div.worm {
    background: red;
}
#tcs div.snake {
    background: blue;
}

<div id="tcs"></div>
*/
var Djtcs = function() {
    this.elem = document.getElementById('tcs');
    // 方向
    this.dir = null;
    // 蛇
    this.snake = [
        [10, 10]
    ];
    // 食物
    this.worm = null;
    // 上一次蛇停留的最后一个位置
    this.last = this.snake[0];
    // 是否开启游戏
    this.isstart = false;
    // 定时器
    this.timer = null;
    this.t = 520;
};
Djtcs.prototype = {
    init: function() {
        var _t = this,
            str = '';
        // 生成地图
        for (var i = 0; i < 400; i++) str += '<div></div>';
        this.elem.innerHTML = str;
        // 蛇
        this.getCd(this.snake[0]).className = 'snake';
        // 食物
        this.showWorm();
        // 方向键
        document.onkeydown = function(ev) {
            var dir = [-1, -2, 1, 2][(ev || window.event).keyCode - 37];
            if (!!dir && _t.dir !== dir && (dir + _t.dir) !== 0 && (_t.dir = dir)) _t.snakeMove();
            if (!!dir) {
                ev.preventDefault && ev.preventDefault();
                return false;
            }
        }
    },
    getCd: function(a) {
        return this.elem.children[a[0] + 20 * a[1]];
    },
    //定时运动
    snakeMove: function(d) {
        clearInterval(this.timer);
        if (this.gameOver) return false;
        var _t = this,
            s = this.snake[0],
            shead = [s[0] + (_t.dir === -1 ? -1 : _t.dir === 1 ? 1 : 0), s[1] + (_t.dir === -2 ? -1 : _t.dir === 2 ? 1 : 0)];
        if (this.test(shead)) {
            this.eat(shead, this.worm).snakeGo(shead);
            this.timer = setTimeout(function() {
                _t.snakeMove();
            }, this.t);
        } else {
            this.gameOver = true;
            alert('游戏结束！');
        }
    },
    //前进
    snakeGo: function(a) {
        this.last = this.snake.pop();
        this.getCd(this.last).className = '';
        this.snake.unshift(a);
        this.getCd(a).className = 'snake';
    },
    //显示食物
    showWorm: function() {
        this.worm = this.rn();
        this.getCd(this.worm).className = 'worm';
    },
    //吃食物
    eat: function(a, b) {
        //达到条件吃掉，然后继续给他食物
        if (a[0] === b[0] && a[1] === b[1]) {
            this.snake.push(this.last);
            this.getCd(this.last).className = 'snake';
            this.getCd(a).className = '';
            this.showWorm();
        }
        return this;
    },
    //检测是否游戏结束
    test: function(a) {
        if (a[0] < 0 || a[1] < 0 || a[0] > 19 || a[1] > 19 || ('|' + this.snake.join('|') + '|').indexOf('|' + a.toString() + '|') >= 0) return !1;
        return !0;
    },
    //食物生成并检测
    rn: function() {
        var arr = [~~(Math.random() * 20), ~~(Math.random() * 20)];
        arr = ('|' + this.snake.join('|') + '|').indexOf('|' + arr.toString() + '|') >= 0 ? this.rn() : arr;
        return arr;
    }
};
window.onload = function() {
    var tcs = new Djtcs();

    tcs.init();
}

当然还有很多细节需要处理啦。演示地址