A JAVASCRIP BOUNCING BALL A JAVASCRIP BOUNCING BALL ANIMATION - NIFTY ANIMATION - NIFTY

ASSIGNMENTASSIGNMENT

Jamil SaquerJamil SaquerComputer Science DepartmentComputer Science Department

Missouri State UniversityMissouri State UniversitySpringfield, MOSpringfield, MO

22

OutlineOutline

IntroductionIntroduction Assignment descriptionAssignment description SolutionSolution Possible modificationsPossible modifications Questions Questions

33

IntroductionIntroduction

Assignment given in a Web programming Assignment given in a Web programming coursecourse

Course goal: introduce students to different Course goal: introduce students to different languages for Web programminglanguages for Web programming

Course prerequisite: being able to program Course prerequisite: being able to program Topics covered in the course: XHTML, Topics covered in the course: XHTML,

CSS, XML, PHP, JavaScript (including CSS, XML, PHP, JavaScript (including DOM and DHTML)DOM and DHTML)

Assignment GoalsAssignment Goals

To be fun and enjoyableTo be fun and enjoyable Have students practice working with Have students practice working with

different topics covered in the course different topics covered in the course Assignment requires using XHTML, CSS, Assignment requires using XHTML, CSS,

JavaScript and DHTMLJavaScript and DHTML

44

ASSIGNMENT DESCRIPTIONASSIGNMENT DESCRIPTION Write an XHTML document that uses Write an XHTML document that uses

JavaScript to animate a bouncing ballJavaScript to animate a bouncing ball When ball hits an edge, it bouncesWhen ball hits an edge, it bounces

Angle of reflection = angle of incidence Angle of reflection = angle of incidence Document has two buttons to stop and Document has two buttons to stop and

start/resume animationstart/resume animation May use a textfield to try different speedsMay use a textfield to try different speeds Use an image for the ballUse an image for the ball

55

SolutionSolution

See code

66

Possible ModificationsPossible Modifications

Assignment is easy to modifyAssignment is easy to modify A vertically bouncing ballA vertically bouncing ball Considering the effect of air resistance Considering the effect of air resistance Simulating an indoor one person racquetball Simulating an indoor one person racquetball

or paddleball game or paddleball game A ping pong game that is played against the A ping pong game that is played against the

computer computer

77

88

QuestionsQuestions