//INIT: Creating objects using object constructors

<New code>

//INIT: — define an object with a method

// exampleObj
// 		properties:
//			exampleObj.exampleProperty1
//			exampleObj.exampleProperty2
// 		methods:
//			exampleObj.exampleMethod()
//
var exampleObj = {
	exampleProperty1:	exampleValue1,
	exampleProperty2:	exampleValue2,
	
	// a method is an object property that contains a function definition
	
	exampleMethod:		function () {
		// function instructions go here
		return this.exampleProperty1 + this.exampleProperty2;
	}
};

Multiple objects built quickly

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

The code for that looked like this:


	var animationObject = {	// this approach is great for SINGLE objects, but not multiple objects
		id:		"animateID",
		src:		"MsPacMan.png",
		width:		"100px",

		outputImage: function() {
			document.getElementById(this.id).src			=this.src;	// image src file
			document.getElementById(this.id).style.width		=this.width;	// image width in px
			document.getElementById(this.id).style.position		="fixed"; 	// CSS to allow animation movement
			},
			
		animateUp: function() {		// PROCESS: method to animate up
			$("#"+this.id).animate({ top: '-=24px'}, {duration: 100});
			},
			
		animateDown: function() {		// PROCESS: method to animate down
			$("#"+this.id).animate({ top: '+=24px'}, {duration: 100});
			},
			
		animateLeft: function() {		// PROCESS: method to animate left
			$("#"+this.id).animate({ left: '-=24px'}, {duration: 100});
			},
			
		animateRight: function() {	// PROCESS: method to animate right
			$("#"+this.id).animate({ left: '+=24px'}, {duration: 100});
			}
	};
			

Just to review quickly:

What is animationObject.id? click for answer...
What is animationObject.src? click for answer...
What does animationObject.animateLeft() do? click for answer...
What does the special object this. do? click for answer...

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:

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.

<head>
</head>
<body>
	<img id="msPacID">
	<img id="blinkyID">
	<img id="pinkyID">
	<script>
            //  Global variables (just so that they can be seen by the buttons...
		//  Create three objects quickly that can be animated
		var msPacMan    =new AnimatedObject("msPacID", "img/MsPacMan.png", "40px"); // create the msPacMan object
		var blinky      =new AnimatedObject("blinkyID", "img/Blinky.png", "40px");  // create the blinky (red ghost) object
		var pinky       =new AnimatedObject("pinkyID", "img/Pinky.png", "40px");    // create the blinky (red ghost) object
		
		// Note that object constructors start with UPPER CASE by the rules of good style
		function AnimatedObject (idInfo, srcInfo, widthInfo) {  // object constructors pass variables into the function definition as usual
			this.id     =idInfo;
			this.src    =srcInfo;
			this.width  =widthInfo;     // Notice also that it is "width=" instead of "width:"
			
			this.outputImage    =function() {
				console.log('in AnimatedObject.outputImage this.id'+this.id);
				document.getElementById(this.id).src                =this.src;      // image src file
				document.getElementById(this.id).style.width        =this.width;    // image width
				document.getElementById(this.id).style.position     ="fixed";    // CSS to allow animation movement
				};
				
			this.animateUp  =function() {       // PROCESS: method to animate up
				$("#"+this.id).animate({ top: '-=24px'}, {duration: 100});
				};
				
			this.animateDown    =function() {       // PROCESS: method to animate down
				$("#"+this.id).animate({ top: '+=24px'}, {duration: 100});
				};
				
			this.animateLeft    =function() {       // PROCESS: method to animate left
				$("#"+this.id).animate({ left: '-=24px'}, {duration: 100});
				};
				
			this.animateRight   =function() {   // PROCESS: method to animate right
				$("#"+this.id).animate({ left: '+=24px'}, {duration: 100});
				}
			// even though object constructors use function(), they do NOT need return
		};                  
	</script>
</body>

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!




Let's see what you have observed

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

1. Object constructors are a way to create multiple objects easily
 
click for answer...
2. Object constructors always use lower case in their names,
eg: var Yuri =new student();
 
click for answer...
3. Object constructors use "=" like a function instead of ":" like an object definition
 
click for answer...
4. Object constructors can only create a maximum of three objects click for answer...

Learn more

Using object constructors to create more than one moveable object