[TypeScript] JavaScript 슈팅게임에 TypeScript 적용하기! #6 - Bullet & Meteor

Bullet

bullet은 총알을 담당하는 class 입니다.

1. 기존 코드

class Bullet {
  constructor() {
    this.x = 0;
    this.y = 0;
  }
  init(spaceShip) {
    this.x = spaceShip.x + 12.5;
    this.y = spaceShip.y;
    this.alive = true;

    bulletList.push(this);
  }
  update() {
    this.y -= 7;

    if (this.y < 0) {
      this.alive = false;
    }  
  }
  checkHit() {
    for (let i = 0; i < meteorList.length; i++) {
      if (
        this.y <= meteorList[i].y &&
        this.x + 16 >= meteorList[i].x &&
        this.x + 16 <= meteorList[i].x + 48
      ) {
        score += 1;
        this.alive = false;
        meteorList.splice(i, 1);
      }
    }
  }
}

2. TypeScript 코드

// TypeScript 코드
class Bullet {
  public x: number;
  public y: number;
  public alive: boolean;
  constructor() {
    this.x = 0;
    this.y = 0;
    this.alice = false;
  }
  public init(spaceShip: SpaceShip): void {
    this.x = spaceShip.x + 12.5;
    this.y = spaceShip.y;
    this.alive = true;

    bulletList.push(this);
  }
  public update(): void {
    this.y -= 7;

    if (this.y < 0) {
      this.alive = false;
    }
  }
  public checkHit(): void {
    for (let i = 0; i < meteorList.length; i++) {
      if (
        this.y <= meteorList[i].y &&
        this.x + 16 >= meteorList[i].x &&
        this.x + 16 <= meteorList[i].x + 48
      ) {
        score += 1;
        this.alive = false;
        meteorList.splice(i, 1);
      }
    }
  }
}

Meteor

Meteor는 위에서 내려오는 운석의 값을 담당하는 class 입니다.

1. 기존 코드

class Meteor {
  constructor() {
    this.x = 0;
    this.y = 0;
  }
  init(width) {
    this.y = 0;
    this.x = this.generateRandomPosX(0, width - 48);
    meteorList.push(this);
  }
  generateRandomPosX(min, max) {
    let randomNum = Math.floor(Math.random() * (max - min + 1));
    return randomNum;
  }
  update(spaceShip, canvasHeight) {
    this.y += spaceShip.lev / 2;
    // this.y += 3;

    if (this.y + 48 >= canvasHeight) {
      gameOver = true;
    }

    if (this.x >= spaceShip.x
        && this.x <= spaceShip.x + 57
        || this.x + 48 >= spaceShip.x
        && this.x + 48 <= spaceShip.x + 57) {
      if (this.y + 24 >= spaceShip.y) {
        gameOver = true;
      }
    }
  }
}

2. TypeScript 코드

class Meteor {
  public x: number;
  public y: number;
  constructor() {
    this.x = 0;
    this.y = 0;
  }
  public init(width: number): void {
    this.y = 0;
    this.x = this.generateRandomPosX(0, width - 48);

    meteorList.push(this);
  }
  private generateRandomPosX(min: number, max: number): number {
    let randomNum = Math.floor(Math.random() * (max - min + 1));
    return randomNum;
  }
  public update(spaceShip: SpaceShip, canvasHeight: number): void {
    this.y += spaceShip.lev / 2;
    // this.y += 3;

    if (this.y + 48 >= canvasHeight) {
      gameOver = true;
    }

    if (this.x >= spaceShip.x
      && this.x <= spaceShip.x + 57
      || this.x + 48 >= spaceShip.x
      && this.x + 48 <= spaceShip.x + 57) {
      if (this.y + 24 >= spaceShip.y) {
        gameOver = true;
      }
    }
  }
}

부족한 점이 많습니다.
더 좋은 코드를 구현할 수 있는 방법을 알고계시면 댓글에 남겨주세요!
적극 반영하겠습니다.