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。