슈팅게임 페이지 가꿔보기

전혀 꾸미지 않았었던 페이지를

부트스트랩을 이용해서 아주 기본적인 것만 만들어 주었다.

 

title을 토리 슈팅게임으로 바꾸었다.

내브바에 "토리 슈팅게임" 제목을 적어주었고, 내 블로그 주소와 깃허브 주소 링크를 넣어두었다.

 

게임 설명을 alert창 파란색에 적어두고,

난이도를 선택할 수 있게 하였다.

 

비둘기가 떨어지는 속도를 level이라는 변수로 바꾸고,

select form에서 난이도를 선택하면 그에 맞는 속도로 비둘기가 떨어지게 하였다.

 

select form에서 input 이벤트가 발생하면 main(), createEnemy()가 실행되도록 하였다.

그래서 난이도를 선택해야 게임이 실행된다.

(처음에는 createEnemy()는 원래대로 두었었는데, 그렇게 했더니 페이지가 로드되고 시간이 조금 지난 후에 난이도를 선택했을 시에 비둘기가 시작할 때 엄청 많이 생성되는 문제가 있었다)

 

난이도를 선택하고, 빈 공간을 선택하지 않은 상태로

바로 게임을 하게되면,

좌우 화살표와 스페이스바를 누를 때 게임이 의도치않게 속도가 빨라지는 버그가 있다.

이를 해결하기 위해서 select form에서 input이벤트가 발생할 때 focus를 옮기도록 하려했으나

생각대로 해결되지 않아서, 빈 공간을 클릭한 후 게임을 시작하라고 경고창만 출력하였다.

 

추가로, 원래 canvas의 변수명이 canvas였는데,

부트스트랩 사용시 변수명이 겹친다는 오류가 발생해서

game_canvas로 변수명을 변경해주었다.

---

https://yeomdonghwan.github.io/슈팅게임

 

토리 슈팅게임