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();}

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