Game Tutorial 5


  • Print debug data.
  • Also some of you may notice these issues:

1. Player's size and the frame block are not exactly fit.

2. 'Loading...' showing with default font at the start of program.

Let's fix them.


**View source code: game-tutorial5.js

I will only explain the code that is new or updated from the previous tutorial.

var charGroups = {
  wall: {
    chars: '■',
    isFullwidth: true,
    sizeAdj: 1.2,
    xAdj: -0.05,
    yAdj: 0.03,

charGroup is setting object that can adjust specific character group. wall is the name of the group so you can change to different name.

  • chars contains characters of the group. put them here without empty space. There is only ■ now. This can be '■□' if you want to add □. You can also add Unicode like \u25A0(■), \u25A1(□) instead of putting them directly.
  • isFullwidth indicates if they are taking 2 blocks or not.
  • sizeAdj adjusts the size of characters in the group. 1 = 100%
  • xAdj and yAdj adjusts the positions by pixels.
var mainInterval;
  mainInterval = window.setInterval(function(){

TMS.onReady function calls the inside function when the Screen loading is done if there is loading. There is loading for the external font so the inside code will be executed when it's loaded.

TMD.print function print debug data on the browser. I added x, y of player.

Run Example

The 2 issues is solved and debug data is showing.


Add Comment

Login with SNS account to write comments. see details