I am creating my first HTML5 game using JavaScript and Phaser framework. I have a class (or more accurately a prototype) called MajorPoint
that represents the starting point and the end point of the game. I initially put those two together, as they only differed from each other by the visible frame. Now as the game is more fleshed out though, the endpoint has got a few more rules that aren't needed by the starting point.
Should I now split this into two? I'm not sure what to do with it, because if I split this into two (StartPoint
and EndPoint
), those two prototypes would have a lot (relatively speaking) of identical code between each other. On the other hand, now there is almost as much code that is only needed by half of the objects.
The objects will not change their state during the game, so they stay as they are created the whole time they exist.
var MajorPoint = function(game, x, y, state, callback, callbackContext) {
Phaser.Sprite.call(this, game, x, y, 'start-end', 0);
this.state = state;
this.anchor.setTo(0.5, 0.7);
this.scale.setTo(0.5, 0.5);
//If state is 'end' but end is not reachable, hides this object.
//If state is 'end' and end is reachable, enables input for this object.
if (state === 'end') {
this.frame = 1;
if (!game.data.isEndReachable()) {
this.visible = false;
} else {
this.inputEnabled = true;
if (callback !== undefined) {
this.events.onInputDown.add(callback, callbackContext);
}
}
}
};
MajorPoint.prototype = Object.create(Phaser.Sprite.prototype);
MajorPoint.prototype.constructor = MajorPoint;
MajorPoint
that denotes a point of importance on the map and have event handlers on there. Then, at the creation of the endMajorPoint
, attach handlers specifically for that point to that instance. Not posting as an answer because I don't fully understand your problem space and this might be impossible. \$\endgroup\$