<New code>

//INIT: — define an object with a method

// ExampleObj object constructor
//      properties:
//          exampleObj.exampleProperty1
//          exampleObj.exampleProperty2
//      methods:
//          exampleObj.exampleMethod()
//
var ExampleObj = function ( exampleValue1, exampleValue2 ) {
    this.exampleProperty1   = exampleValue1;
    this.exampleProperty2   = exampleValue2;
};

// Use .prototype to add methods (functions) to your object constructor
    
ExampleObj.prototype.exampleMethod = function () {
        // function instructions go here
        return this.exampleProperty1 + this.exampleProperty2;
};

// Use new to construct a new version of this object:
var thisObj = new ExampleObj( "Parameter #1", "Parameter #2" );

Multiple objects built quickly

In Object-oriented programming we learned how to create objects with both properties (variable-like data storage) and methods (function-like actions). We used these to animate Ms. Pacman again.

The code for that looked like this:

// animationObj - displays and animates an image
//
// properties:  
//      .id
//      .src
//      .width
//
// methods:
//      .outputImage()
//      .animateUp()

var animationObj = {
    id:         "animateId",
    src:        "MsPacMan.png",
    width:      "100px",
    DISTANCE:   24,
    DURATION:   100
};

//OUTPUT: method to display the image and prepare for animation
animationObj.outputImage = function() {
    console.log( 'in animationObj.outputImage...' );
    
    document.querySelector( "#" + this.id ).src             = this.src;
        
    document.querySelector( "#" + this.id ).style.width     = this.width;
        
    document.querySelector( "#" + this.id ).style.position  = "relative"; 
};
    
//OUTPUT: method to animate up
animationObj.animateUp = function() {
    console.log( 'in animationObj.animateUp...' );
    
    $( "#" + this.id ).animate(
        { top:      '-=' + this.DISTANCE + 'px' }, 
        { duration: this.DURATION }
    );
};

Just to review quickly:

Now say we want to make a game where multiple things can be moving at the same time.

It would be handy to just reuse the same object definition because:

• It saves typing and drugery
• When you want to change the object code, you don't have to change it in your code for each separate object.
• It allows you to abstract your code more easily so that it can be used in several different places to do similar things.
• It allows you to code more elegantly...

Object constructors

Let's say that we want to use a similar definition for a number of objects. That sounds like it could be handy, except that there would be a lot of repetitive typing. I suppose we could you cut and paste, but if we wanted to make changes to our code, we would have to make those changes in many different places.

There has to be a better way.

Instead of the code above, imagine it was changed so that we could create as many objects as we liked, based on a kind of template. This is called using an object constructor.

        <img id="msPacId">
        <img id="blinkyId">
        <img id="pinkyId">
        
        <script>
            // Note that object constructors start with UPPER CASE by the rules of good style
            // object constructors pass variables into the function definition as usual
            // AnimatedObj's constructor requires an id, image source, and width
            var AnimatedObj = function  ( idInfo, srcInfo, widthInfo ) {    
                this.id         = idInfo;
                this.selector   = "#" + this.id;
                this.src        = srcInfo;
                this.width      = widthInfo;
                this.DURATION   = 100;
                this.DISTANCE   = 24;
                
                // Notice also that it is "this.id=" instead of "this.id:"
                // Also, even though object constructors are functions, they do NOT use return  
            }

            //AnimatedObj methods:
            //      .outputImage()
            //      .animateUp()
            //      .animateDown()
            //      .animateLeft()
            //      .animateRight()
            //
            //OUTPUT: method to display the image
            AnimatedObj.prototype.outputImage   =function() {
                //console.log('in AnimatedObj.outputImage this.selector=' + this.selector );
                
                document.querySelector( this.selector ).src                 = this.src;
                document.querySelector( this.selector ).style.width         = this.width;
                document.querySelector( this.selector ).style.position      = "relative";
            };
                
            //OUTPUT: method to animate up
            AnimatedObj.prototype.animateUp     = function() {      
                //console.log( 'in AnimatedObj.animateUp. this.selector=' + this.selector );
                
                $( this.selector ).animate( 
                    { top:      '-=' + this.DISTANCE + 'px' }, 
                    { duration: this.DURATION }
                );
            };
            
            //OUTPUT: method to animate down
            AnimatedObj.prototype.animateDown   = function() {      
                //console.log( 'in AnimatedObj.animateDown. this.selector=' + this.selector );
                
                $( this.selector ).animate(
                    { top: '+=' + this.DISTANCE + 'px' }, 
                    { duration: this.DURATION }
                );
            };
            
            //OUTPUT: method to animate left
            AnimatedObj.prototype.animateLeft   = function() {      
                //console.log( 'in AnimatedObj.animateLeft. this.selector=' + this.selector );
                
                $( this.selector ).animate(
                    { left: '-=' + this.DISTANCE + 'px' }, 
                    { duration: this.DURATION }
                );
            };
                
            //OUTPUT: method to animate right
            AnimatedObj.prototype.animateRight  = function() {  
                //console.log( 'in AnimatedObj.animateRight. this.selector=' + this.selector );
                
                $( this.selector ).animate(
                    { left: '+=' + this.DISTANCE + 'px' }, 
                    { duration: this.DURATION }
                );
            }
            
            //  Global variables (just so that they can be seen by the buttons...
            //  Create three objects quickly that can be animated
            
            //INIT: the msPacMan object
            var msPacMan    = new AnimatedObj( 
                "msPacId", "http://drapak.ca/cpg/img/MsPacMan.png", "40px"
            ); 
            
            //INIT: the blinky (red ghost) object
            var blinky      = new AnimatedObj( 
                "blinkyId", "http://drapak.ca/cpg/img/pacman/pacmanBlinkyLeft1.png", "40px"
            );  
            
            //INIT: the pinky (pink ghost) object
            var pinky       = new AnimatedObj( 
                "pinkyId", "http://drapak.ca/cpg/img/pacman/pacmanPinkyRight1.png", "40px"
            );      
        </script>

Object constructors make a lot of sense, and the elegance with which you can create new similar objects is a key part of object-oriented programming.

Show the example!

trigger msPacMan.outputImage(); trigger msPacMan.animateUp();
trigger blinky.outputImage(); trigger blinky.animateUp();
trigger pinky.outputImage(); trigger pinky.animateUp();

Let's see what you have observed

So let's check your understanding about object constructors. TRUE or FALSE?

Learn more

• w3school.com's JavaScript Objects
• w3school.com's JavaScript Object Prototypes

Using object constructors to create more than one moveable object