[JavaScript] 간단한 자동차 게임 만들기

https://youtu.be/gD4fdiEsChU

 

자바 스크립트로 프로젝트를 하나 만들었는데, 옛날 테트리스 게임기에 수록되어 있었던 자동차게임을 만들었다.

 

이렇게 적 자동차를 좌우 방향으로 피하는 옛날 게임. 

원래 자바스크립트로 게임을 만드려면 canvas를 이용하느게 유용하고 쉬운 방법이지만, 아직 canvas를 배우지 않았고

내가 그동안 배운 것들을 종합해서 만들고 싶었기 때문에 canvas를 미사용하여 게임을 만들었다.

 

 

 

 

먼저 HTML과 CSS로 화면을 만들었다. 처음에 나는 적 자동차를 HTML에 만들지 않고 자바스크립트로 생성후 Y축으로 이동하여 완전히 이동했으면 그 요소를 지우고 요소를 다시 생성하는 방식으로 게임을 만드려고 했다. 하지만 그걸 구현하기에는 매우 어렵고 헷깔리기도 하고, 또.. 화면에 나타나는 적 자동차가 2개 밖에 안 되고, 똑같은 장면만을 반복하기에 굳이 그럴 필요가 없다고 판단했다. 그냥 적 자동차를 HTML로 미리 만들어 놓고, y축으로 이동 후, 완전히 이동했을 시, 그냥 y축을 초기화해서 다시 시작 지점으로 갖다 놓고, 그걸 무한반복하면 된다.

 

그리고 충돌 이미지도 HTML에 생성했는데, 이 이미지는 display : none으로 평소에 보이지 않을 뿐,  내 자동차가 좌우로 움직일 때 같이 움직인다. 충돌 시 [active] 설정으로 충돌 이미지가 보이도록 설계하였다.

 

 

 

 

자바스크립트 부분이다. 여러 변수들을 만들었다. 게임 최초 시작시, 준비시간을 설정해놓기 위해 만든 준비시간 변수, 남은 생명 변수, 스코어 변수, 게임오버 변수 등등. 게임에 필요한 여러 변수들을 미리 만들어 놓았다

 

 

 

맨 처음 적 자동차 2개가 좌 혹은 우측에서 랜덤으로 나오게하기 위해 랜덤숫자를 이용했다. 1부터 10까지 랜덤 숫자가 설정되는데, 1에서 5까지는 적 자동차가 X축으로 185px(우측), 6에서 10까지는 X축으로 40px(좌측)에서 나타나도록 설정하였다.

 

 

게임시작 버튼, 중지버튼을 누르면 각각 게임시작, 게임중지가 되도록 설정하였다. 게임 시작, 중지 버튼이 아니더라도 방향키 UP을 누르면 게임시작, down을 누르면 게임 중지가 되도록 설정하였다. 그리고 미리 만들어둔 ready 변수가 0일 경우(게임을 최초로 시작할 경우) setTimeout으로 게임시작 전 2초간 준비시간을 준다. 그리고 ready 변수는 1로 만든다. 그러면 게임 중지를 누르고 다시 게임시작을 누를 경우 더이상 2초간 준비시간을 주지 않는다.

 

 

 

내 자동차 좌우 움직이기 함수, 방향키 오른쪽을 누를 시, x축은 185px(우측), 방향키 왼쪽을 누를 시 x축이 40px(좌측)으로 움직이게 만들었다.

 

 

 

이제 게임 시작 함수, 게임시작 버튼 혹은 방향키 up을 누를시 실행되는 함수이다. 레벨에 따라 스피드와 화면에 표시될 레벨을 다르게 설정하였다. gameSpeed 변수는 게임을 움직일 setInterval 함수에 집어넣어 게임의 속도를 변화시키는 중요한 변수이다. 그리고 addEventListener로 키보드 방향키로 내 자동차 좌우 움직이기가 가능하도록 했다.

 

 

이 역시 start 함수에 들어있다. gameStart 변수에 setInterval로 게임 동작 함수를 넣고, gameSpeed 함수를 집어넣어 게임이 실행되도록 하였다. 그리고 gameStart 변수가 0보다 클 경우 게임시작 버튼을 여러번 클릭해도 중복해서 실행되지 않도록 하였다.

 

 

 

일시중지버튼 혹은 키보드 방향키 아래쪽을 누를 경우 게임이 일시 중지 되도록 일시중지 함수를 만들었다. clearInterval로 동작하고 있는 게임을 멈추고, gameStart 변수도 -1로 설정하여 다시 게임시작을 눌렀을 경우 게임이 시작되도록 하였다. 그리고 일시중지일 경우 좌우 방향키가 먹히지 않도록 하기 위해 removeEventListener를 걸었다.

 

리셋함수는 자동차가 충돌했을 경우 모든 요소들을 원래대로 돌려놓기위해 만들었다. 내 자동차 위치도 원래위치(좌측)로 이동하게 했고, 충돌 이미지도 똑같히 설정했다. 적 자동차도 좌측 혹은 우측에서 랜덤으로 위치시켰고, 게임 시작했을 경우 누를 수 없었던 레벨 선택 input도 다시 활성화 그리고 stop함수를 실행시켜 게임을 멈춘다.

 

 

 

대망의 게임 실행 함수... 위 코드는 게임 동작 함수 function move() 안의 코드들이다.  적 자동차가 2개인데,  하나는 처음 동작할때 18초의 딜레이를 두게 했다. 왜냐하면 2개 모두 동시에 움직일 경우 어쩔 수 없이 게임오버가 될 수 밖에 없기 때문이다. 2개의 적 자동차 각각 y축으로 20px씩 이동하게 하였고, y축이 550보다 크다면(다 지나갔다면) 다시 y축을 -120px(처음 시작위치) 로 초기화한다. 그리고 다 지나갔으면 점수도 10씩 올린다. 그리고 다시 랜덤 숫자를 이용하여 좌측 혹은 우측에서 적 자동차가 나타나게끔 하였다.

 

 

 

충돌 일 경우 게임오버 변수를 true로 만든다. 내 자동차는 y축이 변하지 않기 때문에 적 자동차가 내 자동차의 y축 근처에 다다랐을 경우, 내 자동차와 적 자동차의 x값을 비교하여 같다면 충돌을 인식하도록 하였다. 그리고 보이지 않던 충돌 이미지도 toggleAttribute로 나타나게 하였다.

 

 

충돌했을 경우 gameOver 변수가 true가 되는데, 이때 reset 함수를 실행시켜 게임을 리셋하고, gameOver = true로 인해 move() 함수는 더이상 실행이 되지 않기 때문에 다시 gameOver 변수를 false로 변경한다. 그리고 목숨 하나를 잃게하고 게임 화면에 나타내고 알림으로 알려준다. 그리고 충돌 이미지를 다시 toggleAttribute로 없앤다.

 

 

 

목숨이 0이 됐다면 최종적으로 게임오버가 됐기 때문에, 목숨을 다시 초기화하고 스코어 역시 초기화한다. 스피드도 초기화, 레벨도 초기화... 그리고 게임 스코어를 저장하기 위해 localStorage를 이용하였다.

 

 

이 코드도 move 함수에 들어있는 코드다. 점수 200점씩 받으면 레벨이 한단게 올라가도록 설정하였고, 게임스피드가 20이이 됐을 경우(레벨 5가 되었을 경우) 가장 큰 레벨이기 때문에 더이상 레벨업을 할 수 없도록 설정했다. 그리고 스코어가 200이 됐을 경우 이 역시 여기에 걸려서 레벨 업을 할 시 다시 게임이 실행되지 않기 때문에 storageScore라는 스코어 저장 변수에 얻었던 스코어 200점을 저장해놓고, 스코어 변수는 다시 0이 되게 하였다. 그리고 현재 실시간 점수를 화면에 나타나게 스코어보드의 textContent에 스코어변수와 저장스코어변수를 합친 값을 넣었다.

 

 

 

완성된 게임! 옛날에 재미있게 플레이했던 게임을 직접 만들어서 플레이하니 감회가 새롭다.