X hits on this document

Word document

JavaScript Tutorial: bouncing ball - page 1 / 7





1 / 7

JavaScript Tutorial: bouncing ball


This tutorial explains a HTML/JavaScript application simulating a bouncing ball, specifically, movement in 2D of an object colliding and bouncing off of walls.  The page will display two links: one to start the ball moving and the other to stop it.  The ball will start off moving at an angle down and to the left.  When it 'hits' one of 4 walls, it reverses direction and keeps moving.  It is important to appreciate why I put 'hits' in quotation marks.  Nothing hits anything!  The position of the ball is changed incrementally in both the horizontal and vertical dimensions.  The code does a calculation to determine if the virtual position of the ball is at or past one of the walls.  If this is true, the value of either the horizontal incremental amount or the vertical incremental amount is changed in sign. That is, if the amount is 50, it becomes -50. This simulates the bouncing.  Clicking on the stop link causes motion to stop AND both incremental amounts to change in sign.

This application will make use of the following JavaScript and HTML features:

script tag



div, a feature of cascading stylesheets (CSS)

coding to work for different browsers

if statement

Key Design Issues

Task: Produce animated motion

Logic:  We want an image to change position on the display screen to simulate movement.  This will be done by moving the object incrementally when a timing event occurs.

Solution:  Timing events were used for the slide show.  The code will use the setInterval function to call a function that re-positions an image.

Task: Produce incremental motion: make an image move a certain amount horizontally and a certain amount vertically.

Document info
Document views22
Page views22
Page last viewedTue Jan 10 04:19:08 UTC 2017