Game Development Reference
In-Depth Information
appended to the document
this.getElement = function() {
return container;
};
// Increase the player's energy level and
update the DOM element
// that represents it on screen. To decrease
the energy level, simply
// pass a negative number to this function
this.addEnergy = function(amount) {
energy += amount;
bar.style.width = energy + "%";
};
// Set the energy level directly, instead of
just adding to
// or removing from it
this.setEnergy = function(amount) {
energy = amount;
bar.style.width = energy + "%";
};
};
When an
EnergyBar
widget is instantiated, it creates its own DOM element that
represents the widget, adding any CSS classes and IDs associated with it. The mem-
ber attribute energy represents the amount of energy that an entity has and the width
of one of the DOM elements created by the widget matches to the percentage of en-
ergy it contains. After a widget's element has been added to the document, we can
simply communicate with the widget class through its public interface and the DOM
elements displayed on the document get updated accordingly.
Canvas.js
With the exception of the
EnergyBar
widget, everything else rendered to the screen
in this game is rendered through a canvas, using the 2D rendering context. In order
to keep things together and make the code more organized, we create a very simple
abstraction over the canvas API. Instead of keeping track of a canvas variable ref-
