typescript | 贪吃蛇小项目

在TypeScript中创建一个贪吃蛇小项目，你可以使用下面的简单示例代码来开始。这个示例使用了HTML5 Canvas来绘制游戏界面，并且使用TypeScript来增加类型系统。

// 贪吃蛇的方向
enum Direction {
    Up = 1,
    Down = 2,
    Left = 3,
    Right = 4
}
 
// 贪吃蛇节点
class SnakeNode {
    x: number;
    y: number;
 
    constructor(x: number, y: number) {
        this.x = x;
        this.y = y;
    }
}
 
// 贪吃蛇类
class Snake {
    body: SnakeNode[] = [];
    direction: Direction = Direction.Right;
 
    constructor(x: number, y: number) {
        this.body.push(new SnakeNode(x, y));
    }
 
    // 移动蛇
    move(canvas: HTMLCanvasElement) {
        const ctx = canvas.getContext('2d');
        if (ctx) {
            // 清除蛇的轨迹
            ctx.clearRect(0, 0, canvas.width, canvas.height);
 
            // 更新蛇的位置
            const head = this.body[0];
            const newHead = new SnakeNode(
                head.x + (this.direction === Direction.Right ? 10 : this.direction === Direction.Left ? -10 : 0),
                head.y + (this.direction === Direction.Down ? 10 : this.direction === Direction.Up ? -10 : 0)
            );
            this.body.unshift(newHead);
 
            // 绘制蛇
            this.body.forEach((node, index) => {
                ctx.fillStyle = index === 0 ? 'blue' : 'green';
                ctx.fillRect(node.x, node.y, 10, 10);
            });
        }
    }
 
    // 改变蛇的方向
    changeDirection(newDirection: Direction) {
        const oppositeDirection = newDirection === Direction.Left ? Direction.Right : newDirection === Direction.Right ? Direction.Left : newDirection === Direction.Up ? Direction.Down : Direction.Up;
        if (this.direction !== oppositeDirection) {
            this.direction = newDirection;
        }
    }
}
 
// 游戏主体逻辑
const canvas = document.getElementById('gameCanvas') as HTMLCanvasElement;
const snake = new Snake(20, 20);
setInterval(() => {
    snake.move(canvas);
}, 100);
 
// 按键处理
document.addEventListener('keydown', (event) => {
    switch (event.key) {
        case 'ArrowUp':
            snake.changeDirection(Direction.Up);
            break;
        case 'ArrowDown':
            snake.changeDirection(Direction.Down);
            break;
        case 'ArrowLeft':
            snake.changeDirection(Direction.Left);
            break;
        case 'ArrowRight':
            snake.changeDirection(Direction.Right);
            break;
    }
});

这段代码定义了贪吃蛇的基本属性和行为，包括蛇的移动和按键控制。你可以将这段代码放入