My experience with JavaScript's prototyping is still quite new, although I am familiar with object-oriented programming in general. EaselJS is also a new territory for me. That being said, I have been struggling to get an object variable triggered by a click event and I have yet to find a satisfactory solution.
I am attempting to create a clickable 2D "board" using the following test code:
(function() { //"Class"
Brick = function() {
this.initialize();
};
var p = Brick.prototype = new createjs.Container();
p.Container_initialize = p.initialize;
p.initialize = function() {
this.Container_initialize();
};
p.create = function(row, column) {
this.row = row;
this.column = column;
//Shape
this.square = new createjs.Shape();
this.square.graphics.beginFill("green").drawRect(0, 0, brickSize, brickSize);
this.x = (brickSize * column) + (Game.padding * column); // Add some padding
this.y = (brickSize * row) + (Game.padding * row); // Add some padding
this.addChild(this.square);
this.addEventListener("click", function(event) { console.log(this.row)})
};
})();
After this, I proceed to create a few Bricks by cycling through a multidimensional array cycle and add them to the stage. The board displays perfectly, but I keep encountering "undefined" when clicking. On the other hand, console.log(event.currentTarget.row) does work, although I am unsure if it's the correct approach.
Thank you!