Learn Programming by Creating Games with JavaScript

Lesson 6 - Set up Game Page and Position Elements

SUMMARY

In this lesson you will set up the game page and position the elements. You will use the style positioning properties to place the space ship, the score, and the start button on the screen.

DISCUSSION

In lesson 3 we used style to format a web page. In that lesson, we added style "inline" with the tag. Another approach for formatting an element using style is to give the element an ID and then define the style for the ID in <style> tags in the <head> section. Elements on a page can be given an ID. Because the ID is used to idenfity the element, each ID must be unique. In other words, there can only be one element with any given ID. It is analogous to social security numbers. Each of us has our own unique social security number.

Referring to the example below, the <div> element on line 12 has been given the ID "divScore". We could use almost any name we want as long as it is unique.

Lines 3 and 9 define a <style> section. Style properties are defined for ID's in the <style> section. The <style> section is nested between the opening and closing <head> tags. Lines 4 to 8 define the style properties for the element with the ID "divScore". Notice the # sign before the word "divScore". This # sign indicates that divScore is an ID. Between the opening bracket { on line 4 and the closing bracket } on line 8 we define the style properties for the ID. Notice that the format for defining properties is the same as when we defined them inline in lesson 3. The property is listed, followed by a colon, the value of the property, and the semi-colon to separate multiple properties.

property: value;

Notice that properties can be on either the same or different lines. Line 6 shows that more than one property can be on one line.

On lines 5 and 6, three new style properties are introduced: position, top, and left. When we want to position an element at a specific location on a page we need to assign a value of "absolute" to the position property. Then we can use the top and left properties to define the location of the top and left side of the element measured from the top and left of the screen. In the example, divScore is positioned 10 pixels from the top of the screen and 150 pixels from the left of the screen.

EXAMPLE - ID's and Positioning

Font Size: 8pt 10pt View Large Version
Ctrl-C to Copy

1
2
3
4
5
6
7
8
9
10
11
12
13
14

PRACTICE

Experiment with the top and left properties to move divScore around the page. Try setting each value to 0 and see where divScore is. Then set the values so that divScore appears at the bottom right corner.
Are the units of "px" needed on line 6? Try the code without the "px".
Add a style property so that the color of the text in divScore is red.
Add another element, assign it an ID and then add the style properties to position the element in the approximate center of the screen.

GAME DEVELOPMENT

Modify your game page (game.htm) that you created in Lesson 5 so that it looks similar to the page shown below. Make sure that you use style properties to position the score, the spaceship, and the button. You should use your own image for the spaceship and the background image. Your page should meet the following requirments:

The score should be approximately centered horizontally near the top of the screen.
The spaceship should be approximately centered on the page.
The page should have a background.
The Start Game button should be approximately centered horizontally at the bottom of the page.

References

Internal Style