Setting Up The HTML

This week, we will be mostly covering...

...setting up the moving parts of your game.
More than likely, you will want to have some moving parts in your game. This page will show you how to add these.
NOTE! From now on, I will use the following structure: blue boxes contain HTML code, and pink boxes contain JavaScript code.

The code within your game.htm template file will look like this before you change it:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html><head>
<script src="spri.js"></script>
<script src="eHan.js"></script>
<script src="myCode.js"></script>
<title>My Title</title>
</head>
<body onMousemove="eHandle();" onMousedown="eHandle();" onMouseup="eHandle('mouseup');" onMousewheel="eHandle();" onKeydown="eHandle();" onKeyup="eHandle('keyup');" onLoad="setup();">>

Insert Custom HTML Here!

<div onClick="setup();" id="instructions" style="position:absolute; top:0px; left:0px; width:640px; height:512px; border:#0000ff 2px solid; background-color:#00ff00; z-index:11;">
<center><b><u><font size="6">Game Title</font><br />By Team Members</u></b></center>

Instructions

<center><b>Click to continue.</b></center>
</div>
<div id="game_over" style="position:absolute; top:0px; left:0px; width:640px; height:512px; border:#0000ff 2px solid; background-color:#00ff00; z-index:11; visibility:hidden;">
<center><b><u><font size="6">Game Over!</font><br />
Press F5 to play again or close the window.
</u></b></center>

Game Over Message

</div>
</body></html>

It is this file in which you should enter the references for your moving parts, as well as the instructions to the people who will play the game.
As an introduction to HTML, we will first enter the details of how your game works, and if you are inventive, a short story line explaining the characters in your game.

If you right click on the file game.htm, you will be able to select the "Open With >" option. To the right of this, you will see a selection of programs. Choose Dreamweaver if it is available. If it is not available, choose Notepad.

Depending on the option you have selected, choose the corresponding tab below:
Dreamweaver
Notepad