Enhancing JavaScript Using Application Programming Interfaces (APIs)

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 polymorphismAlthough 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 minimizedYou start with the existing libraries, and just add only what you needSpecifically, you can start with a specific object, and modify it ever so slightly to get an added benefitThe 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 contentSo, 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 functionsIt says this: I will create code, and place a software fence around it, to create a divide and conquer effectIf 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 objectThe 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 arraysCan be confusing

Difficult to keep track of which car has which color, brand, etc.

Example:

http://www.cs.iupui.edu/~rmolnar/n341/examples/oop/carExample1.html

Solution with Objects

Calls to an API that contains the custom car object

Much cleaner code

Re-usable object

http://www.cs.iupui.edu/~rmolnar/n341/examples/oop/carExample2.html

What is an API?

API stands for Application Programming InterfaceAllows programmers to extend the current language to included customized componentsMost modern languages incorporate APIsFor 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 directoryExample of program using GameLib:http://wally.cs.iupui.edu/n341-client/jsab09/carStart.html

http://www.javascript-games.org/gamelib/gamelib.zip?2.08

Game Programming: Sprites

Sprites are graphic objects used in game programmingSprites 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:http://wally.cs.iupui.edu/n341-client/jsab09/sprite.html

Notice the way we import the GameLib libraries in the script:<script language="Javascript“<script language="Javascript“ src="../gamelib20/gamelib/gamelib_core.js“> src="../gamelib20/gamelib/gamelib_core.js“></script></script>

<script language="Javascript“<script language="Javascript“ src="../gamelib20/gamelib/gamelib_sprites.js"> src="../gamelib20/gamelib/gamelib_sprites.js"></script></script>

Creating the Sprite Object

<script language = “Javascript”><script language = “Javascript”>var ball;var ball;

function init(){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} // end init

</script></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.




</script></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 <body> 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 <body> tag.




</script></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.




</script></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!




</script></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.




</script></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.




</script></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.We add the following to modify the bounces property of the sprite object to enable “bouncing”:ball.bounces = true;ball.bounces = true;Next, we add the following to init():G1_start();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 …

http://wally.cs.iupui.edu/n341-client/jsab09/moveSprite.html

Moving Sprite Example

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

<td><td> <input type = "button“ <input type = "button“ value = "W “ value = "W “ onClick = "moveBall(270)"> onClick = "moveBall(270)"></td></td>

Moving Sprite Example

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

<td><td> <input type = "button“ <input type = "button“ value = "W “ value = "W “ onClick = " onClick = "moveBall(270)moveBall(270)">"></td></td>

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(function moveBall(direcdirec){){ if (direc == 999){ if (direc == 999){ ball.setSpeed(0); ball.setSpeed(0); } else{ } else{ ball.setSpeed(10); ball.setSpeed(10); ball.setXYdegs(direc); ball.setXYdegs(direc); } // end if } // end if} // end moveBall} // end moveBall

Next Time …

Using frame animation in sprites

Detecting collision of sprites

Working with a timer

Questions?

Enhancing JavaScript Using Application Programming Interfaces (APIs)

Documents

Transcript of Enhancing JavaScript Using Application Programming Interfaces (APIs)