시작하기에 앞서 & 텍스트게임메이커

이 항목의 게시물들은 텍스트 게임 메이커 JS 라이브러리(Text Game Maker JS, 이하 텍스트게임메이커)를 사용합니다.

텍스트게임메이커

텍스트게임메이커는 자바스크립트를 사용하여 웹 브라우저에 윈도우 콘솔(일명 도스창)과 같은 환경을 구현하는 것을 기본 목적입니다.

[크롬 브라우저 콘솔]

브라우저 콘솔은 한줄에 명령을 전달받고 다음줄에 결과를 표시하는 것을 반복하는 방식입니다. 반면에 윈도우 콘솔은 가로 X칸, 세로 Y칸의 정해진 공간(이러한 공간을 그리드(grid)라고 합니다) 안의 원하는 위치에 자유롭게 텍스트를 출력할 수 있습니다.

[윈도우 콘솔]

그렇기 때문에 위와 같은 게임을 만드는 것이 가능하죠.

[브라우저에서 텍스트게임메이커를 사용하여 x좌표 1, y좌표 2의 위치에 Hello World를 출력한 모습]

텍스트게임메이커를 사용하면 브라우저에 윈도우 콘솔과 유사한 화면을 연출할 수 있습니다. 이름이 텍스트'게임메이커'이지만, 그 본질은 도스창에서처럼 텍스트를 그리드에 표시하는 것입니다. (물론 게임을 만들 수도 있죠. 텍스트게임메이커로 만든 게임 보러가기(클릭))

혹시 자바스크립트를 공부하는데 있어 외부라이브러리를 사용하는 것에 거부감을 느끼실 수도 있는데요, 자바스크립트는 C언어 콘솔(도스창) 프로그램에 비해 사용자 입력을 받는 것과, 화면에 정보를 출력하는 것이 조금 더 복잡하기 때문에 텍스트게임메이커로 이 부분만을 쉽게 할 수 있습니다. 입출력을 제외한 나머지 부분들은 순수 자바스크립트로 코드를 만들고 나중에 자바스크립트를 어느 정도 익히시고 나면 순수 자바스크립트를 사용하여 자신만의 방법으로 다양하게 입출력 코드를 만들 수 있습니다.

텍스트게임메이커 온라인 샌드박스

https://a-mean-blogger.github.io/text-game-maker-js/sandbox 에서 간단히 텍스트게임메이커 라이브러리를 사용할 수 있습니다. 위 주소로 접속하면 아래의 화면과 같이 페이지로 연결이 됩니다.

화면에 표시되는 텍스트는 아래와 같은 내용을 나타내는 것으로, 지금은 그다지 중요하지 않습니다. 한번 확인만 해보고 넘어갑시다.

  • TMSText Game Maker의 Screen Manager 객체(object)로, 화면 출력과 관련된 함수를 가지고 있습니다.
  • TMIText Game Maker의 Input Manager 객체로, 키입력과 관련된 함수를 가지고 있습니다.
  • TMDText Game Maker의 Debug Manager 객체로, 디버깅과 관련된 함수를 가지고 있습니다.

브라우저 콘솔을 열고 TMS.clearScreen()를 입력해 봅시다.

TMS.clearScreen()은 현재 화면의 모든 텍스트를 지우고 커서를 0,0 좌표로 이동시키는 함수입니다.

다음으로 TMS.insertText("Hello World!")를 입력해 봅시다.

TMS.insertText(출력할_문자열, 글자색, 배경색, 폰트)는 현재 커서 위치에 문자열을 출력하는 함수입니다. 리턴값은 출력 후 x, y좌표이고 출력할_문자열을 제외한 모든 항목들은 생략할 수 있습니다. **폰트는 현재 브라우저에서 표현가능한 폰트만 사용가능합니다.

마지막으로 TMS.insertTextAt(2, 2, "Hello Internet!")를 입력해 봅시다.

TMS.insertTextAt(X_좌표, Y_좌표, 출력할_문자열, 글자색, 배경색, 폰트)는 특정한 위치에 문자열을 출력하는 함수입니다. x,y좌표를 입력하는 것 외 나머지는 TMS.insertText와 동일합니다.

마치며...

이 항목의 연습문제들은 순수 자바스크립트로 문제해결 알고리듬을 만들고 + 위에 소개한 텍스트게임메이커의 함수를 이용하여 화면에 출력하여 풀 수 있는 문제들입니다. 윈도우의 '메모장', 혹은 다른 텍스트 에디터 프로그램으로 코드를 작성하고 텍스트게임메이커 온라인 샌드박스의 콘솔에 붙여넣기 하여 연습문제를 풀어봅시다.

**물론 js파일에 코드를 기록하여 저장할 수도 있고, 자신의 코드, 프로그램을 웹에 올릴 수도 있습니다. 텍스트 게임메이커의 상세한 사용법은 https://www.a-mean-blog.com/ko/blog/Text-Game-Maker-JS 페이지를 참고하시기 바랍니다.

댓글

댓글쓰기

이 글에 댓글을 다시려면 SNS 계정으로 로그인하세요. 자세히 알아보기

UP