**소스 코드: game-tutorial1.js
var screenSetting = { // canvasId: 'tm-canvas', // frameSpeed: 40, // column: 60, // row: 20, // backgroundColor: '#151617', // webFontJsPath: 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js', // fontFaceObserverJsPath:'https://cdnjs.cloudflare.com/ajax/libs/fontfaceobserver/2.0.13/fontfaceobserver.js', // fontColor: '#F5F7FA', // fontFamily: 'monospace', // fontSource: null, // fontSize: 30, // zoom: 0.5, column: 55, row: 22, fontFamily: 'Nanum Gothic Coding', fontSource: 'https://fonts.googleapis.com/css?family=Nanum+Gothic+Coding', }; var debugSetting = { // devMode: false, // outputDomId: 'tm-debug-output', devMode: true, };
가로 칸수를 55로, 세로 칸수를 22로 하고, 외부폰트를 가져옵니다. 외부 폰트의 위치는 https://fonts.googleapis.com/css?family=Nanum+Gothic+Coding 이며 폰트의 이름은 Nanum Gothic Coding입니다. 참고로 폰트는 monospace 계열(각 글자의 가로길이가 모두 같은 폰트계열)이 보기에 좋고, 특히 coding용 폰트가 좋습니다.
var TMS = new TM.ScreenManager(screenSetting), TMI = new TM.InputManager(screenSetting.canvasId,debugSetting.devMode), TMD = new TM.DebugManager(debugSetting);
TMS, TMI, TMD를 생성해 줍니다. Game Tutorial 1에는 TMS만 사용하고, 나머지는 나중의 튜토리얼에서 사용됩니다.
TM.ScreenManager의 인스턴스를 생성하면 스크린이 생성됩니다.
TMS.cursor.hide();
TMS.cursor.hide
함수는 깜박이는 커서를 안보이게 해줍니다.
var frame = { x: 5, y: 2, width: 44, height: 18, score: 0, };
frame 이라는 이름으로 변수를 선언하고 게임의 테두리를 그릴때 필요한 데이터들을 담았습니다.
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라는 이름으로 함수를 만들고 화면을 그리는 코드를 작성하였습니다. 먼저 TMS.clearScreen()
함수로 스크린을 전부 지운 후에 TMS.insertTextAt
함수와 TMS.insertText
함수를 사용하여 점수와 게임 테두리를 그립니다.
draw();
draw 함수를 호출합니다.
게임의 테두리가 표시됩니다.
다음 강의로 넘어가기 전에 스크린의 기본 설정을 바꾸어보고 TMS.insertTextAt
함수와 TMS.insertText
함수를 사용하여 텍스트를 입력하는 연습을 해봅시다.
댓글
이 글에 댓글을 다시려면 SNS 계정으로 로그인하세요. 자세히 알아보기