HTML 5 Games with Lime JS, Part 2: Defining the Layer

The core game being created is a letter game.  The concept is to generate an 8 x 8 table of letters.  To begin, we start by creating an array of letters.  Here is a snapshot of what the array looks like, with only 3 letters (instead of 26).

var letters = [

  { letter: ‘A’, mod: 1 },
  { letter: ‘B’, mod: 1 },
  { letter: ‘C’, mod: 1 },
  .
  .
}
On startup, the board of 8 x 8 is generated iteratively.  On each cell index, a random letter is chosen.  Each letter is represented by a label (lime.Label class).  The label is styled by setting the font size, object dimensions, coordinates, color, etc.  Take a look at the example below.

var pieces = [];
var size = 8;

for (var r = 0; r < size; r++) {
  for (var c = 0; c < size; c++) {
    var i = Math.floor(Math.random() * 26);
    var l = letters[i];

    var lbl = new lime.Label()
    .setText(l.letter)
    .setSize(40,40)
    .setFontSize(30)
    .setPosition(50 * r, 50 * c)
    .setFontColor(“black”)
    .setFontWeight(“normal”);

    target.appendChild(lbl);
    pieces.push(lbl);
  }
}
Each label is appended to the layer.  It’s positioned using the setPosition method, to appear at a specific spot relative to the layer itself.  Since each object is given a width of 40, the element is positioned at a wider level to give it some space in between.  Note: these settings are temporary to get the positioning down.  It’s best to use variables to store these, as they are easily changed.

The sample game so far is the following:

Sample Lime JS Game

The next feature we’ll talk about is listening to a click of the label, and changing its color.  Using the closure library, we can attach to events using the goog.events object.  The listen method takes an object (the lime.Label), the event or array of events to listen to, and the event handler.

goog.events.listen(lbl, [‘click’,’touchstart’], function() {
  for (var p = 0; p < pieces.length; p++) {
    pieces[p].setFontColor(“black”).setFontWeight(“normal”);
  }

  this.setFontColor(“blue”).setFontWeight(“bold”)
});

The event handler loops through the array of built labels in the pieces array (shown in the previous code sample), and resets their color, then highlighting the clicked item.

Advertisements

3 thoughts on “HTML 5 Games with Lime JS, Part 2: Defining the Layer

  1. If I want the first three letter should it be like this?
    letter has to be defined?

    var letters = [
    { letter: ‘A’, mod: 1 },
    { letter: ‘B’, mod: 1 },
    { letter: ‘C’, mod: 1 }
    ];

    Like

  2. i had to cast letters[i] to and Object here, to be able to use letter as an object :
    var l = Object(letters[i]);

    l.letter work after that !

    Thanks for your tutorials !

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s