X hits on this document

Word document

JavaScript Tutorial: bouncing ball - page 2 / 7





2 / 7

Logic: We can keep track of the horizontal and vertical positions of an object.  Moving it involves re-positioning an image horizontally and vertically.

Solution:  The div element in cascading style sheets can be used to position objects on the screen.  One challenge is that there is browser dependent code required to identify specific elements in the HTML document.

Task: Make the ball bounce

Logic:  We can keep track of the horizontal and vertical position of an object. To make the object bounce, we produce code that compares the horizontal position to numbers representing the positions of the left wall and right wall and the vertical position to numbers representing the top and bottom walls. If the ball has hit a wall according to these calculations, we change the direction the ball will take on the next move.

Solution: We move the ball by moving it incrementally horizontally and vertically by quantities held in two variables.  When the code determines that a wall has been hit, we change the sign (if the variable is xa, we change it to be –xa).


This section introduces the general topic of simulation of motion on a computer screen, describing concepts that apply to most computer programming systems.  We then go into how motion can be simulated using HTML and JavaScript.  

Geometry on the computer screen

In most computer systems, positions on a computer screen are calculated in terms of the distance from the left hand side of the screen and the distance from the top of the screen.   Actually, let us modify this to say the domain of movement is the window, not the screen.  A way of stating this is that the origin is the upper left corner, and not the lower left corner that you may remember from high school analytical geometry.  Placing the origin in the upper left corner fits the mechanics of the display. One possible unit for measuring distance is the pixel, standing for picture element, with 72 pixels to the inch.  In some systems, other units are possible, so you will need to check which unit is applicable.  The operating system keeps track of positions in terms of windows.  

To locate an image at the top, left corner, you give it (where it is not quite defined yet) a position of 0, 0.  To locate it in the middle depends on the width and height of the window. If the window is 600 by 400, meaning 600 pixels wide and 400 pixels high, then 300, 200 would be in the middle. To move this object over to the right, keeping it at the same vertical position, you could re-position it to 350, 200.  To move the object to the bottom of the window, you could keep the horizontal number at 300, and make the vertical number be around 400.  Why do I say "around"?  Because I have not specified something very important about the thing being moved around, namely where its own origin or positioning point is.  Consider the following two balls.

Document info
Document views24
Page views24
Page last viewedTue Jan 17 19:42:34 UTC 2017