Enhancing JavaScript Using Application Programming Interfaces (APIs)

Goals By the end of this unit you should understand … How to create re-usable objects Why we use APIs How to create & use sprites How to use sprite methods How to animate using sprites

OOP Design Principles To address the industry needs of cost overruns and delays, the OOP model was built upon 3 key principles: inheritance, encapsulation, and polymorphism Although inheritance and encapsulation are supported, at least in part, by JavaScript, polymorphism is not supported.

Inheritance Inheritance says this: the developers of an OOP language create a library of known objects, organized into groups called packages and classes These pre-defined objects already know how to perform many methods, and come with a framework for accompanying attributes For example, in Java there is a button class, which has an attribute of a label, and can perform certain tasks when clicked

Inheritance What this means is that writing code from scratch should be minimized You start with the existing libraries, and just add only what you need Specifically, you can start with a specific object, and modify it ever so slightly to get an added benefit The principle of inheritance says that if you create an object as a “child” of another object, the new child INHERITS all the properties and knowledge of its parent… you only add the custom content So, you get a lot of your programming solution for free, by artfully using inheritance to take advantage of existing code

Encapsulation Encapsulation, also referred to as data hiding, traces its history to subroutines and functions It says this: I will create code, and place a software fence around it, to create a divide and conquer effect If one object passes a message to another, asking that a method be performed, the calling object doesn’t need to know the gory details of how the task was performed… it simply needs a final result back from the called object The called object is using encapsulation… its method detail and attribute values can remain hidden from view – and thereby protected.

Encapsulation Encapsulation adds some built in quality control to programming… It accomplishes this by restricting access to variables and blocks of code, and by forcing programmers to think in terms of small, focused subsections of code

Polymorphism – Not Supported By JavaScript The principle of polymorphism, like inheritance, addressed the marketing needs of creating reusable code portable to other applications It says this – I have already created an object, or written a method, or created a class that performs a similar tasks…with slight modifications, I can use it here

Polymorphism – Not Supported By JavaScript A polymorphic design is one written in general enough terms that it supports application in other ways For example, imagine writing a close method for a door object. If you were thoughtful enough in the design, the same method could be utilized by a window object, or maybe even a mouth object!

“Object-Oriented” JavaScript More like “Object-Inspired” JavaScript We can create new, custom, re- usable objects in JavaScript that include their own methods, properties and events. Consider the following problem: “I want to record the color, brand, horsepower and price of several cars”

Solution without Objects Use parallel arrays Can be confusing Difficult to keep track of which car has which color, brand, etc. Example:

Solution with Objects Calls to an API that contains the custom car object Much cleaner code Re-usable object

What is an API? API stands for Application Programming Interface Allows programmers to extend the current language to included customized components Most modern languages incorporate APIs For our demonstrations, we’ll use an API known as GameLib

Downloading & Installing GameLib Click the following link to download GameLib: Create a sibling directory of your “n341” directory called “gameLib” Copy all *.js files from the GameLib library to your gameLib directory Example of program using GameLib:

Game Programming: Sprites Sprites are graphic objects used in game programming Sprites can react to user events by changing location, changing shape, size, etc. JavaScript does not support sprites directly; however, we can create an object that works and acts like a sprite via GameLib (or write our own!)

Using GameLib to Create a Sprite Examine the following script: Notice the way we import the GameLib libraries in the script: </script>

Creating the Sprite Object var ball; function init(){ ball = new Sp_Sprite(); ball = new Sp_Sprite(); ball.setImage("redball.gif", 20, 20, 1, 1); ball.setImage("redball.gif", 20, 20, 1, 1); ball.moveTo(100,100); ball.moveTo(100,100); ball.setXlimits(0, 500); ball.setXlimits(0, 500); ball.setYlimits(0, 300); ball.setYlimits(0, 300); ball.setFrame(0); ball.setFrame(0); ball.switchOn(); ball.switchOn(); } // end init </script> What’s Going On? In this line, we create a variable called “ball.” We’ll specify exactly what type of object ball is later. What’s Going On? In this line, we create a variable called “ball.” We’ll specify exactly what type of object ball is later.

Creating the Sprite Object var ball; function init(){ ball = new Sp_Sprite(); ball = new Sp_Sprite(); ball.setImage("redball.gif", 20, 20, 1, 1); ball.setImage("redball.gif", 20, 20, 1, 1); ball.moveTo(100,100); ball.moveTo(100,100); ball.setXlimits(0, 500); ball.setXlimits(0, 500); ball.setYlimits(0, 300); ball.setYlimits(0, 300); ball.setFrame(0); ball.setFrame(0); ball.switchOn(); ball.switchOn(); } // end init </script> What’s Going On? In this line, we create a function called init() that will initialize the ball variable as a sprite object. init() will be called later by the onLoad event in the tag. What’s Going On? In this line, we create a function called init() that will initialize the ball variable as a sprite object. init() will be called later by the onLoad event in the tag.

Creating the Sprite Object var ball; function init(){ ball = new Sp_Sprite(); ball = new Sp_Sprite(); ball.setImage("redball.gif", 20, 20, 1, 1); ball.setImage("redball.gif", 20, 20, 1, 1); ball.moveTo(100,100); ball.moveTo(100,100); ball.setXlimits(0, 500); ball.setXlimits(0, 500); ball.setYlimits(0, 300); ball.setYlimits(0, 300); ball.setFrame(0); ball.setFrame(0); ball.switchOn(); ball.switchOn(); } // end init </script> What’s Going On? In this line, we create “ball” as a sprite object using the constructor called “Sp_Sprite().” The constructor creates an instance of the sprite object and copies all methods & properties of the sprite to the variable ball. What’s Going On? In this line, we create “ball” as a sprite object using the constructor called “Sp_Sprite().” The constructor creates an instance of the sprite object and copies all methods & properties of the sprite to the variable ball.

Creating the Sprite Object var ball; function init(){ ball = new Sp_Sprite(); ball = new Sp_Sprite(); ball.setImage("redball.gif", 20, 20, 1, 1); ball.setImage("redball.gif", 20, 20, 1, 1); ball.moveTo(100,100); ball.moveTo(100,100); ball.setXlimits(0, 500); ball.setXlimits(0, 500); ball.setYlimits(0, 300); ball.setYlimits(0, 300); ball.setFrame(0); ball.setFrame(0); ball.switchOn(); ball.switchOn(); } // end init </script> What’s Going On? In this line, give some real dimension to our sprite. We specify the source of the object (“redball.gif”), the length and width (20, 20) and the frame and animation levels of the object (1, 1). We’ll learn about those last two later! What’s Going On? In this line, give some real dimension to our sprite. We specify the source of the object (“redball.gif”), the length and width (20, 20) and the frame and animation levels of the object (1, 1). We’ll learn about those last two later!

Creating the Sprite Object var ball; function init(){ ball = new Sp_Sprite(); ball = new Sp_Sprite(); ball.setImage("redball.gif", 20, 20, 1, 1); ball.setImage("redball.gif", 20, 20, 1, 1); ball.moveTo(100,100); ball.moveTo(100,100); ball.setXlimits(0, 500); ball.setXlimits(0, 500); ball.setYlimits(0, 300); ball.setYlimits(0, 300); ball.setFrame(0); ball.setFrame(0); ball.switchOn(); ball.switchOn(); } // end init </script> What’s Going On? In this line, we specify the initial location of the sprite on the page. Specifically, we specify the location of the upper-left corner of the sprite. What’s Going On? In this line, we specify the initial location of the sprite on the page. Specifically, we specify the location of the upper-left corner of the sprite.

Creating the Sprite Object var ball; function init(){ ball = new Sp_Sprite(); ball = new Sp_Sprite(); ball.setImage("redball.gif", 20, 20, 1, 1); ball.setImage("redball.gif", 20, 20, 1, 1); ball.moveTo(100,100); ball.moveTo(100,100); ball.setXlimits(0, 500); ball.setXlimits(0, 500); ball.setYlimits(0, 300); ball.setYlimits(0, 300); ball.setFrame(0); ball.setFrame(0); ball.switchOn(); ball.switchOn(); } // end init </script> What’s Going On? In these lines, we specify the horizontal boundary (setXlimits(…)) and vertical boundary (setYlimits(…)) of the sprite. It can’t be moved beyond these boundaries. What’s Going On? In these lines, we specify the horizontal boundary (setXlimits(…)) and vertical boundary (setYlimits(…)) of the sprite. It can’t be moved beyond these boundaries.

Creating the Sprite Object var ball; function init(){ ball = new Sp_Sprite(); ball = new Sp_Sprite(); ball.setImage("redball.gif", 20, 20, 1, 1); ball.setImage("redball.gif", 20, 20, 1, 1); ball.moveTo(100,100); ball.moveTo(100,100); ball.setXlimits(0, 500); ball.setXlimits(0, 500); ball.setYlimits(0, 300); ball.setYlimits(0, 300); ball.setFrame(0); ball.setFrame(0); ball.switchOn(); ball.switchOn(); } // end init </script> What’s Going On? These lines represent “housekeeping” methods. setFrame(0) sets the initial frame to zero for animation and switchOn() makes the sprite visible. What’s Going On? These lines represent “housekeeping” methods. setFrame(0) sets the initial frame to zero for animation and switchOn() makes the sprite visible.

Understanding Directions Using GameLib, to understand directions for sprite movement, we need to revisit the angles represented by a compass: N – 0º NE – 45º E – 90º SE – 135º S – 180º SW – 225º W – 270º NW – 315º

Moving the Sprite – init() Changes The first thing that we need to do is to modify our init() method to prepare for moving. ball.bounces = true; We add the following to modify the bounces property of the sprite object to enable “bouncing”: ball.bounces = true; G1_start(); Next, we add the following to init(): G1_start();

G1_start() G1_start() seems a simple method, but is very powerful. It begins the gameLib engine, which enables movement (and other functions). It also is responsible for staring a repeating timer that activates motion (the time repeats 20x/sec.)

Moving the Sprite - Example See the following for an example of moving the sprite object: See the next slide for explanations of the example …

Moving Sprite Example In the script, you see several buttons, created in HTML, that react to the onClick event:

Moving Sprite Example When onClick is activated, the moveBall() function is called and an integer-type parameter is sent to the function.

Moving the Sprite Example Looking at the moveBall() function, we can see that the value passed to the direc argument represents the angle at which the ball moves: function moveBall(direc){ if (direc == 999){ ball.setSpeed(0); } else{ ball.setSpeed(10); ball.setXYdegs(direc); } // end if } // end moveBall

Moving the Sprite Example function moveBall(direc){ if (direc == 999){ ball.setSpeed(0); } else{ ball.setSpeed(10); ball.setXYdegs(direc); } // end if } // end moveBall An argument of 999 passed to the function will use the sprite object’s setSpeed() method (from GameLib) to stop sprite movement.

Moving the Sprite Example function moveBall(direc){ if (direc == 999){ ball.setSpeed(0); } else{ ball.setSpeed(10); ball.setXYdegs(direc); } // end if } // end moveBall An argument other than 999 passed to the function will use the sprite object’s setSpeed() method to set sprite movement at 10 AND will use the argument to set the direction of sprite movement (according to compass angle) using the setXYdegs() method.

Next Time … Using frame animation in sprites Detecting collision of sprites Working with a timer

Questions?