A JAVASCRIP BOUNCING BALL ANIMATION - NIFTY ASSIGNMENT Jamil Saquer Computer Science Department Missouri State University Springfield, MO

2 Outline  Introduction  Assignment description  Solution  Possible modifications  Questions

3 Introduction  Assignment given in a Web programming course  Course goal: introduce students to different languages for Web programming  Course prerequisite: being able to program  Topics covered in the course: XHTML, CSS, XML, PHP, JavaScript (including DOM and DHTML)

Assignment Goals  To be fun and enjoyable  Have students practice working with different topics covered in the course Assignment requires using XHTML, CSS, JavaScript and DHTML Assignment requires using XHTML, CSS, JavaScript and DHTML 4

ASSIGNMENT DESCRIPTION  Write an XHTML document that uses JavaScript to animate a bouncing ball  When 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 start/resume animation  May use a textfield to try different speeds  Use an image for the ball 5

Solution  See code See code See code 6

Possible Modifications  Assignment is easy to modify A vertically bouncing ball A vertically bouncing ball Considering the effect of air resistance Considering the effect of air resistance Simulating an indoor one person racquetball or paddleball game Simulating an indoor one person racquetball or paddleball game A ping pong game that is played against the computer A ping pong game that is played against the computer 7

8 Questions