DH의 개발 공부로그 DH의 개발 공부로그

Key Event 키이벤트는 원래 keyEvent함수 안에서 onKeyUp과 onKeyDown을 한번에 해주었는데, 게임이 끝나고 초기화를 해줄 때 키이벤트를 삭제해주기 위해서 세분화 했습니다. onKeyUp과 onKeyDown은 event인자를 받는데 그 타입은 KeyboardEvent로 지정을 해주었습니다. private keyEvent(): void { if (!gameOver) { document.addEventListener("keydown", this.onKeyDown); document.addEventListener("keyup", this.onKeyUp); } } private onKeyUp = (event: KeyboardEvent): void => { if (event.code === ..

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].x && this.x + 16 = spaceShip.x ..

Narrowing '축소'라는 뜻으로 타입가드를 통해서 정확한 타입이 아닐시에 해당 코드가 잘못 실행이 되지 않도록 사전에 방지해주는 방식이라고 생각해주시면 됩니다! 오늘 해볼 것은 DOM에 조작에 대한 Narrowing방법입니다. 다음의 코드를 Narrowing 해보겠습니다. const $startScreen = document.querySelector("#start_screen") $startScreen.style.display = "flex"; // '$startScreen' is possibly 'null'. // '$startScreen'가 'null'일 수 있다라는 에러메세지 1. 조건문 const $startScreen = document.querySelector("#start_screen"..

타입스크립트로 변환하기! // 기존 코드 loadImage() { this.backgroundImage = new Image(); this.backgroundImage.src = "./images/background.gif"; this.bulletImage = new Image(); this.bulletImage.src = "./images/bullet.png"; this.spaceShipImage = new Image(); this.spaceShipImage.src = "./images/space-ship.png"; this.monsterImage = new Image(); this.monsterImage.src = `./images/meteor.png`; this.gameOverImage = new ..

start() & SpaceShip 이번에 TypeScript로 변환할 부분은 Game안에 start 함수와 SpaceShip부분 입니다. Game안의 start함수에 사용자가 조종을 할 spaceShip가 인스턴스 되기 때문에 start와 함께 spaceShip를 같이 묶어서 변환을 해보겠습니다. 우선 기존 JavaScript 코드 먼저 봐보겠습니다. 1. spaceShip class SpaceShip { constructor(game, x, y) { this.game = game; this.lev = 1; this.x = x; this.y = y; } update() { if (score >= this.lev * 15) { this.lev += 1; } } } spaceShip의 자바스크립트 코드는 ..

Canvas 사용하기 // 기존 코드 class Game { constructor() { this.canvas = document.querySelector("canvas"); this.ctx = this.canvas.getContext("2d"); this.canvas.width = 500; this.canvas.height = window.innerHeight; } } class Game { public canvas: HTMLCanvasElement; public ctx: CanvasRenderingContext2D; constructor() { this.canvas = document.querySelector("canvas") as HTMLCanvasElement; this.ctx = this.can..

이번에는 타입스크립트를 공부한걸 토대로 기존에 작업했었던 JavaScript 슈팅게임을 TypeScript로 변경하는 것을 해보려고 합니다. 물론 제가 작성하는 코드가 최적화된 TypeScript코드가 아닐지는 몰라도 최대한 자료들을 찾아가면서 적용하려고 하는 중입니다. 틀린부분이 있으면 댓글에 남겨주시거나 github에 남겨주시면 적극 반영하겠습니다! 감사합니다! 그럼 시작하겠습니다. :) 게임소개 슈팅게임 바로가기 Github 소스 보러가기 JavaScript 코드가 궁금하신 분들은 github에서 확인 가능합니다. 변수설정 및 DOM 제어 const $startScreen = document.querySelector("#start_screen") const $canvasScreen = documen..

자바스크립트에서 배열을 다루다보면 자주 사용하게 되는 메서드 중에 이름이 상당히 비슷한 slice()와 splice()가 있습니다. 두 메서드는 언뜻 보기에 비슷한 기능을 하고 이름도 비슷해서 헷갈리는 경우가 많은데, 두 메서드에는 큰 차이점이 있습니다. 1. slice() slice() 메서드는 어떤 배열의 시작점 부터 끝 까지(끝 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다. 여기서 중요한 점은 slice()는 원본 배열은 바뀌지 않는 새로운 배열을 반환한다는 점입니다. 구문 arr.slice([begin [, end]]) begin 0을 시작으로 하는 추출 시작점에 대한 인덱스를 의미합니다. 만약 undefined인 경우에는 0번 인덱스부터 slice 합니다. 음수는 배열의 끝에서부..