用TypeScript写贪吃蛇（6）：Snake类初步完成

Snake是整个项目最复杂的部分之一，而且游戏逻辑还没写，一下全写完不现实。因此Snake类目前先完成初步的功能。

回想之前蛇在HTML里的结构：

<!-- 设置蛇 -->
<div id="snake">
  <!-- snake内部的div，表示蛇的各部分 -->
  <div></div>
</div>

id为snake的div为蛇的容器，然后里边的div代表蛇的每一节。例如，里边的第一个div为蛇的头，如果蛇的容器里边有4个div，则说明现在这条蛇有4节。添加div元素也十分简单，通过insertAdjacentHTML方法进行添加即可。

在写Snake类的时候，从上面的思考可以理所应当地想到，获取蛇的整个身体的元素是必须。以下为经过调整后的Snake初步代码。

class Snake {
    // 表示蛇的元素
    head: HTMLElement;

    // 蛇的身体（包括蛇头）
    bodies: HTMLCollection;

    // 获取蛇的容器
    element: HTMLElement;

    constructor() {
        this.element = document.getElementById("snake")!;
        // 获取放置蛇的容器，取第一个子元素便为头
        this.head = this.element.querySelector("div")!;
      	// 获取蛇的身体
        this.bodies = this.element.getElementsByTagName("div");
    }

    // 获取蛇头的X坐标
    get X() {
        return this.head.offsetLeft;
    }

    // 获取蛇头的Y坐标
    get Y() {
        return this.head.offsetTop;
    }

    // 设置蛇头的X坐标
    set X(value: number) {
        this.head.style.left = value + "px";
    }

    // 设置蛇头的Y坐标
    set Y(value: number) {
        this.head.style.top = value + "px";
    }

    // 吃入食物后身体变长（增加div元素）
    addBody() {
        // 向element中的末尾添加一个div
        this.element.insertAdjacentHTML("beforeend", "<div></div>");
    }
}

export default Snake;

想要蛇动，我们需要键盘事件让蛇动起来。下一节开始写游戏逻辑的类GameControl。