HTML and CSS Reference
In-Depth Information
DisplayList is a JavaScript object that will hold a list of items we are displaying on the can-
vas. It will send mouse click events to the items in the list when a user clicks on them on the
canvas. It will function as our “retained mode” for this application.
DisplayList has two properties:
objectList (array)
A list of the items to display.
Reference to the Canvas context. We need this so that we can find the proper mouse x and
y coordinates when a user clicks on an item in the display list.
The addChild() functionof DisplayList addsanobjecttothe objectList arraybypushing
itintothearray.Alltheitemsin objectList willhavetheir draw() functionscalledwhenthe
displayList draw() function is called:
this . addChild = function
function ( child ) {
this . objectList . push ( child );
The removeChild() function finds the first instance of the object in the display list passed as
a parameter and then removes it from objectList . We do this using the array.indexOf()
method, which finds the first instance of an object in an array and removes it:
this . removeChild = function
function ( child ) {
var removeIndex = null
null ;
removeIndex = this
this . objectList . indexOf ( child , 0 );
iif ( removeIndex != null
null ) {
this . objectList . splice ( removeIndex , 1 );
The draw() function of DisplayList loops through all the objects in objectList and calls
their draw() functions:
this . draw = function
function () {
for ( var
var i = 0 ; i < this
this . objectList . length ; i ++ ) {
tempObject = this
this . objectList [ i ];
tempObject . draw ();
Search WWH ::

Custom Search