【TypeScript】贪吃蛇小游戏

效果预览

项目结构

共有Food,GameControl,ScorePanel,Snake四个类

食物类

//食物类
class Food {
   
  //食物所对应的元素
  element: HTMLElement;
  constructor() {
   
    this.element = document.getElementById('food');
  }

  //获取食物位置的方法
  get X() {
   
    return this.element.offsetLeft;
  }
  get Y() {
   
    return this.element.offsetTop;
  }

  //食物位置的修改
  change() {
   
    //生成随机位置
    //0~290的随机数，一格是10px
    //Math.round(Math.random() * 29) * 10
    let Left = Math.round(Math.random() * 29) * 10;
    let Top = Math.round(Math.random() * 29) * 10;
    this.element.style.left = Left + 'px';
    this.element.style.top = Top + 'px';
  }
}

export default Food;

记分牌类

记分牌只需要控制自己的分数增长和等级提高

/**
 * 记分牌
 */

 class ScorePanel {
   
  //分数和等级
  score = 0;
  level = 1;
  scoreEle: HTMLElement;
  leveEle: HTMLElement;

  //等级限制
  maxLevel: number;

  //多少分升级
  upLevel: number;

  constructor(maxLevel: number = 10, upLevel: number = 10) {
   
    this.scoreEle = document.getElementById('score');
    this.leveEle = document.getElementById('level');
    this.maxLevel = maxLevel;
    this.upLevel = upLevel;
  }

  //分数增加方法
  addScore() {
   
    this.scoreEle.innerHTML = ++this.score + '';

    //每10分升1级
    if(