**소스 코드: game-tutorial2.js
이전 튜토리얼에서 변경이 없는 부분은 설명을 생략합니다.
var KEYSET = { LEFT: 37, UP: 38, RIGHT: 39, DOWN: 40, };
키입력 확인에 사용될 키보드의 상하좌우 방향키의 key code를 모아서 KEYSET에 넣었습니다.
아래의 방법으로 키보드의 key code를 구할 수 있습니다.
**TM.InputManager의 인스턴스를 생성할 때 두번째 인자로 true를 넣어주면 이렇게 콘솔에 key code가 표시됩니다. 현재 TM.InputManager에 두번째 인자로 debugSetting.devMode가 들어가므로 key code가 표시됩니다.
var player = { x: 22, y: 10, text: "[-<>-]", };
플레이어 좌표와 텍스트를 가진 오브젝트를 만들어 줍니다. 플레이어의 기본 위치는 (22,10)입니다.
function calculate(){ // check key and move player if(TMI.keyboard.checkKey(KEYSET.LEFT) && player.x>2) player.x--; if(TMI.keyboard.checkKey(KEYSET.UP) && player.y>1) player.y--; if(TMI.keyboard.checkKey(KEYSET.RIGHT) && player.x+player.text.length<frame.width-2) player.x++; if(TMI.keyboard.checkKey(KEYSET.DOWN) && player.y<frame.height-2) player.y++; }
calculate함수는 데이터를 변경하는 함수입니다. 키입력을 체크하고 키입력이 있는 경우 player의 x,y좌표를 변경합니다.
TMI.keyboard.checkKey함수를 사용해서 루프중에 키입력이 있는지 확인할 수 있습니다.(TMI.keyboard에는 TM.InputManager_keyboard의 인스턴스가 들어있습니다.)
function draw(){ //clearScreen TMS.clearScreen(); //draw score TMS.insertTextAt(frame.x,frame.y-1,"Score: "); TMS.insertText(frame.score); //draw frame for(var i=0; i<frame.height; i++){ for(var j=0; j<frame.width; j++){ if((i===0 || i==frame.height-1 || j===0 || j==frame.width-2)&&(j%2 === 0)){ TMS.insertTextAt(frame.x+j,frame.y+i,"■"); } } } //draw player TMS.insertTextAt(frame.x+player.x,frame.y+player.y,player.text); }
//draw player 부분에 player를 그리는 코드가 추가되었습니다.
var mainInterval = window.setInterval(function(){ calculate(); draw(); },30);
window.setInterval 함수를 사용해서 calculate함수와 draw함수를 반복시킵니다. 이 window.setInterval 함수는 Text Game Maker JS의 함수가 아니라 자바스크립트의 window오브젝트에서 기본적으로 제공되는 함수입니다. window.setInterval(반복할_함수, 반복간격시간)의 형식이며 반복간격시간의 단위는 millisecond입니다. 즉 0.03초마다 키입력을 체크하고 화면을 업데이트하게 됩니다.
스크린을 한번 클릭한 후에 키보드 방향키를 눌러주면 플레이어가 움직입니다. 또한 키보드에 아무 키나 누르면 브라우저 콘솔에 해당 키의 key code가 표시되는 것을 볼 수 있습니다.
다음 강의로 넘어가기 전에 스크린의 플레이어의 이동 키를 a,w,s,d로 바꾸어 보는 연습을 해봅시다.
댓글
이 글에 댓글을 다시려면 SNS 계정으로 로그인하세요. 자세히 알아보기