X hits on this document

Word document

JavaScript Tutorial: bouncing ball - page 3 / 7





3 / 7

The black dots represent the origin or nominal position of each ball.  The positioning within the window is of that point.  The rest of the object gets carried along with it.  So if the ball on the left (with the origin in the center) is positioned at 0, 0, some of the ball will not be visible.  In contrast, if the ball on the right is located at 0, 0, all of the ball will be visible.  The objects that you will create for HTML and JavaScript will probably resemble the object on the right.  The nominal position will be the upper left corner.  This will not be the case in Flash, where you can easily create graphics with origin at other positions.

The way to get comfortable with moving objects in display space is to do the exercise indicated below: write the minimal HTML indicated and change the position of the div object.  Do this many times.  Try to predict where the object will be.   This also will help you understand the scale of the pixel unit.

The previous comments have just been on positioning of objects. How do we do motion?  The first part of the answer is that you simulate motion by re-positioning elements over and over again.  This works in the same way that our eyes believe we see motion when we see movies or TV.  What we see are still shots shown in rapid succession.  Our eye and brain interpret the changing display as continuous motion if the time units are short enough and the displacements not too large.  The rest of the answer is that you know how to implement functions repeated over time in JavaScript: you use the setInterval function to set up a call to another function.

Dynamic HTML

The original HTML was intended for sharing information and not for fancy layout.  Cascading Style Sheets is a technology invented to improve the formatting of HTML pages. We will use CSS for positioning elements on the display. This is called Dynamic HTML. One problem is that the different browsers implemented CSS in slightly different ways.  More formally, the Document Object Model defining parts of the HTML document are not the same in different browsers.

CSS introduces a new tag called div to define for your own use. The div tag does not have any special meaning, like <b> or <table>.   You can give it a name or id and you can put things inside the div element, that is, after the <div> tag and before the </div> tag.  The div can be referenced in a style definition, to be demonstrated next.  For this example, we will use div to define what will be the bouncing ball.  The code in the body of the HTML document is

<div id="ball">

<img src="ball.gif">


Document info
Document views23
Page views23
Page last viewedTue Jan 17 06:20:26 UTC 2017