刚学会 TypeScript， 顺手做个贪吃蛇小游戏

@bg-color: #b7d4a8;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

// index.html
<!-- 蛇 -->
<div id="snake">
    <!-- 蛇身 -->
    <div></div>
</div>

// index.less
#snake {
  & > div {
    width: 10px;
    height: 10px;
    background-color: black;
    // 设置间距
    border: 1px solid @bg-color;
    // 开启定位
    position: absolute;
  }
}

#food {
  position: absolute;
  width: 10px;
  height: 10px;
  left: 40px;
  top: 100px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-content: space-between;
  & > div {
    width: 4px;
    height: 4px;
    background-color: black;
    transform: rotate(45deg); 
  }
}

// 定义食物类 Food
class Food {
    // 定义食物元素
    element: HTMLElement;
    constructor() {
        // 获取页面中的 food 元素给 element
        this.element = document.getElementById("food")!
    }
    // 获取食物 x 轴坐标的方法
    get X() {
        return this.element.offsetLeft
    }
    get Y() {
        return this.element.offsetTop
    }
    // 修改食物位置的方法
    change() {
        // 一格大小就是10
        let top = Math.round(Math.random() * 29) * 10
        let left = Math.round(Math.random() * 29) * 10
        this.element.style.left = left + 'px'
        this.element.style.top = top + 'px'
    }
}

class ScorePanel {
    // 记录分数和等级
    score = 0;
    level = 1;
    // 分数和等级的元素
    scoreEle: HTMLElement
    levelEle: HTMLElement
    // 设置一个变量的限制等级
    maxLevel: number
    // 设置一个变量 表示多少分时升级
    upScore: number
    constructor(maxLevel: number = 10, upScore: 10) {
        this.scoreEle = document.getElementById("score")!
        this.levelEle = document.getElementById("level")!
        this.maxLevel = maxLevel
        this.upScore = upScore
    }
    // 设置一个加分方法
    addScore() {
        this.scoreEle.innerHTML = ++this.score + '';
        (this.score % this.upScore === 0) && this.levelUp()
    }
    // 提升等级的方法
    levelUp() {
        this.level < this.maxLevel && (this.levelEle.innerHTML = ++this.level + '')
    }
}

addScore() {
        this.scoreEle.innerHTML = ++this.score + '';
        (this.score % this.upScore === 0) && this.levelUp()
}

// 蛇头
head: HTMLElement
// 蛇的身体
bodies: HTMLCollection
// 获取蛇容器
element: HTMLElement
constructor() {
    this.element = document.getElementById("snake")!
    this.head = document.querySelector("#snake > div") as HTMLElement
    this.bodies = this.element.getElementsByTagName("div")
}

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

// 蛇加身体的方法
addBody() {
    // 向 element 中添加一个 div
    this.element.insertAdjacentHTML("beforeend", "<div></div>")
}

init() {
    // 绑定键盘事件
    document.addEventListener("keydown", this.keydownHandle.bind(this))
    this.run()
}

// 存储蛇的移动方向
direction: string = ''

// 键盘响应函数
keydownHandle(event: KeyboardEvent) {
    // 检查是否合法
    this.direction = event.key                    
}

// 创建蛇移动的方法
run() {
    let X = this.snake.X
    let Y = this.snake.Y
    // 根据按键方向修改值
    switch (this.direction) {
        // 向上 top减少
        case "ArrowUp":
            Y -= 10
            break
        // 向下 top 增加
        case "ArrowDown":
            Y += 10
            break
        // 向左 left 减少
        case "ArrowLeft":
            X -= 10
            break
        // 向右 left 增加
        case "ArrowRight":
            X += 10
            break
    }
}

this.snake.X = X;
this.snake.Y = Y;

// 递归调用
this.isLive && setTimeout(this.run.bind(this), 300 - (this.scorePanel.level - 1) * 30)

// 检查是否吃到食物
checkEat(X: number, Y: number) {
    if (X === this.food.X && Y === this.food.Y) {
        // 食物位置改变
        this.food.change()
        // 加分
        this.scorePanel.addScore()
        // 蛇加一
        this.snake.addBody()
    }
}

// 添加一个蛇身体移动的方法
moveBody() {
    //位置在前一个蛇块的位置
    for (let i = this.bodies.length - 1; i > 0; i--) {
        let X = (this.bodies[i - 1] as HTMLElement).offsetLeft;
        let Y = (this.bodies[i - 1] as HTMLElement).offsetTop;
        (this.bodies[i] as HTMLElement).style.left = X + 'px';
        (this.bodies[i] as HTMLElement).style.top = Y + 'px';
    }
}

set Y(value) {
    // 如果新值和旧值相同，则直接返回不再修改
    if(this.Y === value){
        return;
    }
    if (value < 0 || value > 290) {
        throw new Error('蛇撞墙了')
    }
    // 移动身体
    this.moveBody();
    this.head.style.top = value + 'px';
}

try {
	this.snake.X = X;
	this.snake.Y = Y;
} catch (e: any) {
    alert(e.message + 'GAME OVER')
    // isLive 设置为 false
    this.isLive = false
}

set Y(value) {
    // 有没有第二个身体
    if (this.bodies[1] && (this.bodies[1] as HTMLElement).offsetTop === value) {
        // 如果掉头，应该继续前进
        if (value > this.Y) {
            value = this.Y - 10
        } else {
            value = this.Y + 10
        }
    }
}

checkHeadBody() {
    // 获取所有的身体，检查是否重叠
    for (let i = 1; i < this.bodies.length; i++) {
        let bd = this.bodies[i] as HTMLElement
        if (this.X === bd.offsetLeft && this.Y === bd.offsetTop) {
            throw new Error('撞到自己了')
        }
    }
}