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

當然還有很多細節需要處理啦。演示地址