[Toy Projects] 레트로 Space Shooter Game 만들기

Space Shooter Game

유튜버 '코딩알려주는누나'의 영상을 참고하여 space shooter game을 만들었다.

 

동작설명

 

• 키보드의 좌우키로 우주선을 조종하고 스페이스바로 총알을 발사할 수 있다.
• UFO가 1초간격으로 랜덤하게 내려오고 총알로 UFO를 격추시키면 SCORE가 올라간다.
• 우주선이 화면 바닥에 닿으면 게임오버화면이 뜨며 게임이 멈춘다.

사용스택

 

html, css, javascript

 

결과물

 

space_shooter_game.gif

 

 

 

배운 것

 

1. KeyboardEvent.KeyCode가 지원 중단되고 KeyboardEvent.Key로 바뀌었다고 한다. 

키값을 보면 KeyCode는 32(스페이스바), 37, 39(좌우방향키) 등 숫자로 콜아웃되고 Key는 'ArrowRight', 'ArrowLeft' 등 상대적으로 직관적인 문자열로 콜아웃되는 것을 알 수 있다. 다만 console.log로 찍어보던 중 스페이스바를 눌렀을 때 빈 값이 나와 당황했는데 원래 빈 문자열(" ")을 값으로 가진 것이었다.

 

 

2. UFO를 랜덤하게 배치시키기 위해 사용한 랜덤함수

//랜덤한 값 리턴
function randomValue(min, max){ 
    let randomNum = Math.floor(Math.random()*(max-min+1))+min;
    return randomNum;
}

min값과 max값을 입력받아 두 수 사이의 랜덤한 함수(정수)를 리턴한다.

정리 : https://itgoblin.tistory.com/49

 

 

3. new operator / img()

canvas에서 이미지를 띄우기 위해 html로 태그를 생성하고 DOM으로 다루는 대신 javascript에서 재공하는 img()클래스를 new로 생성하고 canvas에 바로 적용시킨 부분이다. img()를 이용하면 보다 동적으로 이미지를 다룰 수 있다고 한다. 

backgroundImage = new Image();
backgroundImage.src="images/backgroundImage.png";

bulletImage = new Image();
bulletImage.src="images/bullet.png";

 

 

후기

 

사실 프론트엔드 공부를 시작하면서부터 게임이 너무너무 만들고 싶었다. 유튜브 영상에서 알려주는 것을 보며 따라 만들었기 때문에 순수 내 힘으로 만든 프로젝트는 아니지만 열심히 공부하며 만들었으니 올려놓는다. 결과를 내기보단 게임은 어떻게 만드는지 배우기 위해 만들었는데 내가 생각했던 것 보다 훨씬 많은 것을 배울 수 있었다. 기능들 뿐만 아니라 실무나 프로젝트에서 함수를 효율적으로 활용하는 방법등 전체적인 구성에서도 느낀 것이 많았고 중구난방으로 작성하던 코드를 앞으론 어떻게 정리해야 하는지 어느정도 알 것 같다. 캔버스 기능은 어떻게 사용하는지, 좌표설정, 키보드 조작은 어떻게 하는지 물체와 물체가 만났을 때의 이벤트는 어떻게 처리하는지 같은 자잘한 부분들도 알게 되어 기분이 좋다.

 

 

github 주소 : https://github.com/AngryDoggaebi/FrontendMentor-Projects

 

 

---