이번에는 타이프스크립트 공부를 바탕으로
JavaScript 슈팅 게임을 TypeScript로 변환하려고 합니다.

물론 내가 쓰고 있는 코드가 최적화된 TypeScript 코드가 아닐 수도 있지만
최대한 날짜를 찾으면서 적용하려고 합니다.

버그는 댓글이나 Github에 남겨주시면 적극 반영하도록 하겠습니다!
감사해요!

그럼 시작하겠습니다.
🙂

게임 소개

슈팅게임 보러가기
Github 소스로 이동
JavaScript 코드가 궁금하시다면 github에서 확인하실 수 있습니다.

변수 설정 및 DOM 제어

const $startScreen = document.querySelector("#start_screen") as HTMLDivElement
const $canvasScreen = document.querySelector("#canvas_screen") as HTMLDivElement
const $manualScreen = document.querySelector("#manual_screen") as HTMLDivElement;
const $gameOver = document.querySelector(".game_over") as HTMLDivElement;
const $gameBtn = document.querySelector(".game_btn") as HTMLButtonElement;
const $replayBtn = document.querySelector(".replay_btn") as HTMLButtonElement;
const $manualBtn = document.querySelector(".manual_btn") as HTMLButtonElement;
const $okBtn = document.querySelector(".ok_btn") as HTMLButtonElement;

type UserKeys = "ArrowUp"| "ArrowLeft" | "ArrowDown" | "ArrowRight" | " "
type Keys = {
  (key in UserKeys)?: boolean;
}

interface Meteor {
  x: number;
  y: number;
}

interface Bullet extends Meteor {
  alive: boolean;
}

let game = null;
let keysDown: Keys = {};
let bulletList: Bullet() = (); // 총알 저장 리스트
let meteorList: Meteor() = (); // 몬스터 리스트
let score: number = 0;
let interval; // 추후에 설정할 예정
let gameOver: boolean = false;
let clickable: boolean = true;

keysDown 변수는 사용자가 누를 키에 대한 값과 boolean 값을 객체에 저장하므로 사용자가 누를 수 있는 값은 미리 정해져 있습니다.
Computed Property Name방법의 문법 Optional개체 유형을 지정합니다.

bulletList그리고 meteorList구체와 운석의 위치 값을 배열로 가진 개체 셀을 받기 때문에

interface Meteor {
  x: number;
  y: number;
}

interface Bullet extends Meteor {
  alive: boolean;
}

let bulletList: Bullet() = (); // 총알 저장 리스트
let meteorList: Meteor() = (); // 몬스터 리스트

Meteor 인터페이스를 만들어 Bullet에서 상속받아 x와 y의 같은 값을 함께 사용하고 Bullet alive에 추가했을 뿐입니다.

참조

ZeroCho/ts 올인원
Typescript의 DOM 컨트롤