App.js

"use strict";
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
var len = document.getElementById('len');
var step = 25; // 方块大小
var originX = canvas.width % step / 2;
var originY = canvas.height % step / 2;
var endX = canvas.width - originX;
var endY = canvas.height - originY;
var App = /** @class */ (function () {
    function App() {
        this.map = new Map(step);
        this.snake = new Snake();
        this.food = new Food(this.getPoint());
    }
    App.prototype.run = function () {
        this.init();
        this.update();
        this.draw();
    };
    App.prototype.init = function () {
    };
    App.prototype.update = function () {
        var _this = this;
        setInterval(function () {
            _this.snakeRun();
        }, 200);
        // 电脑方向键控制
        onkeydown = function (e) {
            var oldVector = _this.snake.vector;
            switch (e.key) {
                case 'ArrowUp':
                    _this.snake.vector = [0, -step];
                    break;
                case 'ArrowDown':
                    _this.snake.vector = [0, step];
                    break;
                case 'ArrowLeft':
                    _this.snake.vector = [-step, 0];
                    break;
                case 'ArrowRight':
                    _this.snake.vector = [step, 0];
                    break;
                default:
                    return;
            }
            // 长按加速
            if (oldVector[0] === _this.snake.vector[0] && oldVector[1] === _this.snake.vector[1]) {
                _this.snakeRun();
            }
        };
    };
    App.prototype.snakeRun = function () {
        this.snake.move();
        // 食物碰撞
        if (this.snake.body[0][0] === this.food.x && this.snake.body[0][1] === this.food.y) {
            this.snake.eat();
            len.innerText = (this.snake.body.length - 1).toString();
            console.log("\uD83D\uDC0D.len = " + this.snake.body.length);
            var point = this.getPoint();
            this.food.x = point[0];
            this.food.y = point[1];
        }
    };
    App.prototype.draw = function () {
        var _this = this;
        requestAnimationFrame(function () { return _this.draw(); });
        this.map.draw();
        this.snake.draw();
        this.food.draw();
    };
    App.prototype.getPoint = function () {
        var stepCountX = (endX - originX) / step - 1;
        var stepCountY = (endY - originY) / step - 1;
        var x;
        var y;
        var key;
        do {
            x = Math.round(Math.random() * stepCountX) * step + originX;
            y = Math.round(Math.random() * stepCountY) * step + originY;
            key = this.snake.body.some(function (item) {
                if (x === item[0] && y === item[1])
                    return true;
            });
        } while (key);
        return [x, y];
    };
    return App;
}());
var Map = /** @class */ (function () {
    function Map(size) {
        this.size = size;
    }
    Map.prototype.draw = function () {
        context.fillStyle = 'black';
        context.fillRect(0, 0, canvas.width, canvas.height);
        context.strokeStyle = 'gray';
        for (var i = originY; i <= canvas.height; i += this.size) {
            context.beginPath();
            context.moveTo(0, i);
            context.lineTo(canvas.width, i);
            context.stroke();
        }
        for (var i = originX; i <= canvas.width; i += this.size) {
            context.beginPath();
            context.moveTo(i, 0);
            context.lineTo(i, canvas.height);
            context.stroke();
        }
    };
    return Map;
}());
var Snake = /** @class */ (function () {
    function Snake() {
        this.body = [[originX, originY]];
        this.vector = [step, 0];
    }
    Snake.prototype.eat = function () {
        var tail = this.body[this.body.length - 1];
        this.body.push(tail);
        this.move();
    };
    Snake.prototype.move = function () {
        var newHead = [this.body[0][0] + this.vector[0], this.body[0][1] + this.vector[1]];
        // 碰壁处理
        if (newHead[0] > endX - step)
            newHead[0] = originX;
        if (newHead[0] < originX)
            newHead[0] = endX - step;
        if (newHead[1] > endY - step)
            newHead[1] = originY;
        if (newHead[1] < originY)
            newHead[1] = endY - step;
        this.body.unshift(newHead);
        this.body.pop();
    };
    Snake.prototype.draw = function () {
        context.fillStyle = '#888888';
        this.body.forEach(function (item, index) {
            if (index !== 0) {
                context.fillStyle = '#CCCCCC';
            }
            context.fillRect(item[0], item[1], step, step);
        });
    };
    return Snake;
}());
var Food = /** @class */ (function () {
    function Food(xy) {
        this.x = xy[0];
        this.y = xy[1];
    }
    Food.prototype.draw = function () {
        context.fillStyle = 'green';
        context.fillRect(this.x, this.y, step, step);
    };
    return Food;
}());
var app = new App();
app.run();
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQXBwLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiQXBwLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxJQUFNLE1BQU0sR0FBeUMsUUFBUSxDQUFDLGNBQWMsQ0FBQyxRQUFRLENBQUMsQ0FBQztBQUN2RixJQUFNLE9BQU8sR0FBNkIsTUFBTSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUUsQ0FBQztBQUNuRSxNQUFNLENBQUMsTUFBTSxHQUFHLE1BQU0sQ0FBQyxXQUFXLENBQUM7QUFDbkMsTUFBTSxDQUFDLEtBQUssR0FBRyxNQUFNLENBQUMsVUFBVSxDQUFDO0FBRWpDLElBQU0sR0FBRyxHQUE2QixRQUFRLENBQUMsY0FBYyxDQUFDLEtBQUssQ0FBQyxDQUFDO0FBRXJFLElBQUksSUFBSSxHQUFXLEVBQUUsQ0FBQyxDQUFDLE9BQU87QUFDOUIsSUFBSSxPQUFPLEdBQVcsTUFBTSxDQUFDLEtBQUssR0FBRyxJQUFJLEdBQUcsQ0FBQyxDQUFDO0FBQzlDLElBQUksT0FBTyxHQUFXLE1BQU0sQ0FBQyxNQUFNLEdBQUcsSUFBSSxHQUFHLENBQUMsQ0FBQztBQUMvQyxJQUFJLElBQUksR0FBVyxNQUFNLENBQUMsS0FBSyxHQUFHLE9BQU8sQ0FBQztBQUMxQyxJQUFJLElBQUksR0FBVyxNQUFNLENBQUMsTUFBTSxHQUFHLE9BQU8sQ0FBQztBQUUzQztJQUFBO1FBQ1ksUUFBRyxHQUFRLElBQUksR0FBRyxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQ3pCLFVBQUssR0FBVSxJQUFJLEtBQUssRUFBRSxDQUFDO1FBQzNCLFNBQUksR0FBUyxJQUFJLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxFQUFFLENBQUMsQ0FBQztJQWtGbkQsQ0FBQztJQWhGVSxpQkFBRyxHQUFWO1FBQ0ksSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDO1FBQ1osSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDO1FBQ2QsSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDO0lBQ2hCLENBQUM7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