**View source code: 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, };
This piece of code sets the number of column to 55, the number of row to 22.
It also sets an external font - Nanum Gothic Coding from https://fonts.googleapis.com/css?family=Nanum+Gothic+Coding
It's better use monospace fonts(a fonts that has the same width for each character), coding fonts are a good choice.
var TMS = new TM.ScreenManager(screenSetting), TMI = new TM.InputManager(screenSetting.canvasId,debugSetting.devMode), TMD = new TM.DebugManager(debugSetting);
TMS, TMI and TMD are created. Only TMS will be used in this poster, other will be used in later tutorial.
Screen is created when TMS is created.
TMS.cursor.hide();
TMS.cursor.hide function hide the blanking cursor on Screen.
var frame = { x: 5, y: 2, width: 44, height: 18, score: 0, };
frame object has the data for drawing the game 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 function is created. It deletes everything on Screen using TMS.clearScreen function, then draw the game frame and game score using TMS.insertTextAt and TMS.insertText functions.
draw();
draw has been called.
The game frame is on Screen.
Before you move to the next chapter, practice changing settings of Screen and print texts on it.
Comments
Login with SNS account to write comments. see details