[Project] 바닐라 자바스크립트로 게임을 만들어보자


개요

javascript로 게임을 만들어보게 된 계기는 조금 신선하다. 나는 웹 프로그래밍 자체를 군대에서 처음 공부해보기로 마음 먹었는데, 그 이유는 바로 별도의 프로그래밍 언어를 설치할 수 없는 군 PC에서도 javascipt 를 비롯한 웹 프로그래밍은 브라우저만 있으면 가능했기 때문이다.

html 과 같은 웹 언어라면 메모장과 브라우저만 있으면 얼마든지 코딩과 실행을 할 수 있다. 따라서 나는 군대에서의 무료함을 코딩으로 달래기 위해 군대에서 처음으로 html / css / js 를 독학했다. 누구에게나 그렇듯 웹 프로그래밍은 상당히 직관적이고 쉬웠다. 나는 군대에 가기 전까지만 해도 웹에는 아무런 관심이 없었는데 이를 계기로 웹 프로그래밍의 매력을 알게되었다. 직관적인 html 과 손쉬운 css, 그리고 무엇보다 javascript 는 마치 python 처럼 간단한 아이디어를 바로바로 실험해보기 좋았다. 물론 javascript는 깊이 파면 팔수록 영문을 모를 언어라는 평가도 있을 뿐더러 typescript 라는 대체 언어도 등장했지만 그 당시 나에겐 C언어 처럼 간결하면서도 html 의 요소와 그 요소들의 css 를 자유자재로 조작할 수 있는 강력한 언어였다. 심지어 별도의 컴파일러 없이 메모장에 코드를 적은 후 확장자를 변경해 크롬으로 바로 실행시킬 수 있다는 점에서 군대에서 갖고 놀기 아주 적합한 언어였다.

JS는 군대에서 갖고 놀기 좋다.


게임을 만들어보자

군대에서 아무런 프로그램을 뚝딱 만들 수 있는 능력을 갖게됐다면 무엇을 가장 만들고 싶을까? 역시 답은 정해져있다.

GAME

C언어 와 같은 언어로도 콘솔창 게임은 충분히 제작 가능하다. 하지만 나에겐 html 속 안의 다양한 tag 들이 있었고 이들을 css 로 얼마든지 꾸밀 수 있었다. 하지만 어디까지나 html 페이지는 정적이었고, jQueryReact 같은 UI 라이브러리 소스를 군대에서는 구할 길이 없었기 때문에 순수한 VanillaJS 를 통해 게임을 만들어야 했다. 이러한 환경에서 제작하기 적합한 게임들을 여러가지 떠올린 결과 간단한 퍼즐 게임들이 정적인 페이지 속에서도 사용자들이 충분히 재밌게 즐길 수 있는 게임임을 깨달았다. 그 중에서도 나는 한 때 모바일로 유행했었던 2048 이라는 게임을 만들어보기로 했었다.

2048

[Project] 자바스크립트로 2048 게임 만들기 포스트 바로가기


javascript 에서도 비동기 프로그래밍을 지원한다는 것을 알고는 Snake 게임을 만들어보기도 했다.

snake

[Project] 자바스크립트로 뱀 게임 만들기 포스트 바로가기


더 나아가 게임이라면 빠질 수 없는 테트리스도 만들었었다.

tetris

[Project] 자바스크립트로 테트리스 게임 만들기 포스트 바로가기


실제 위 사진들은 군대에서 직접 구현했던 모습 그대로이다.

게임의 UI 는 모두 JS 를 통한 DOM 조작으로 구현되었다.


여담

그런데 과연 군대에서 이런 게임들을 마음대로 찍어내도 될까? 역시 안됐다. 그 당시 군 인트라넷에 육군 IT게시판이라는 곳에서 IT 제품이나 지식에 관한 정보들이 활발히 공유되고 있었다. 그곳에 javscript 강좌라는 명목으로 위 게임들의 소스 코드를 그대로 공유했었는데 반응이 상당히 뜨거웠고 꽤 많은 부대의 병사들이 코드를 그대로 복붙하여 위 게임들을 부대 내에서 플레이 했었다. 그런데 결국 일이 터져버린 게 타부대 병사가 근무 시간에 게임을 하다가 간부에게 걸려버린 것이다. 그대로 내 게시글이 추적당하고 결국 우리 부대까지 연락이 와서 나 또한 처벌을 받게되었다.

근데 군대에서 게임을 만들면 불법인가?

설마 이런 규정이 있겠는가? 그 당시에도 담당 간부들이 군대에서 게임을 만들어 버린 사례는 처음이라 많이 당황해했었다. 게다가 외부 SW 를 반입한게 아니기 때문에 보안 규정에도 어긋나지 않았다. 그래서 내가 받은 처벌은 아주 가벼운 처벌이었다. 딱히 물을 죄가 없었는데 일단은 타부대까지 어그로가 끌린 만큼 형식적인 처벌이 필요했나보다.

한 가지 안타까웠던 소식은 육군 IT 게시판이 그 이후로 운영이 잠정 중단되었다는 것… 행정병들 삶의 낙원 같은 곳이었을텐데 괜스레 미안해진다.


프로젝트

전역하기 전에 위 세가지 게임의 소스 코드를 일단 기념삼아 프린트해왔다. 이 인쇄물을 참조하여 그 때 그 게임들을 온전히 복원해냈다. 그리고 이것들을 발판 삼아 프로젝트 하나를 열었다.

VanillaJs 를 통한 게임 제작 프로젝트

javascript 를 이용한 게임 제작은 아주 매력적이라고 생각한다. 별도의 게임 엔진 없이 꽤나 그럴싸한 2D 게임을 제작할 수 있다. 물론 제작할 수 있는 게임의 장르가 한정적일 수 있지만 절대 불가능한 것도 아니다. 이미 html / css / js 만으로 제작된 고퀄리티 게임들을 많이 찾아볼 수 있다. 무엇보다 html 특성상 직관적으로 내가 원하는 화면을 단시간에 만들 수 있다는게 큰 매력인 것 같다. 또한 javascript 의 문법 또한 쉽고 간결한 편이라 C언어 에 익숙한 사람들도 빠르게 적응할 수 있다.

우선은 군대에서 만든 3가지 게임으로 포스트를 시작하여 점차 기회가 된다면 하나씩 더 만들면서 늘려갈 생각이다.

Github: https://github.com/yjyoon-dev/vanilla-javascript-game

0%