|
|
Setting Up The HTML...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:
In the Dreamweaver program, select the View tab at the top of the screen and choose the Code and Design view.
The main pane which displays your project should now be split in two - the top displays your raw HTML code, the lower section shows the output of this code as you might see it in a web browser. Look for the line of code which reads Instructions. Type your instructions under here. To see the results of your changes, click on the lower section at any time. To start a new line, type the HTML code, <br /> which means "Line Break". Don't forget to tell your players which keys/mouse functions control which aspects of your game. You can further personalise the template by replacing the text between the <title> and </title> tags with the name of your game. Also, replace the words Game Title with the name of your game, and replace the words Team Members wih the names of your team members. Once you are finished here, it is time to move on to your game elements. By now, you should have decided how large you want everything to be. If you have planned this well, you will have a list of your game elements written or typed on a piece of paper, each with their widths and heights. We will begin with the basic declaration, <div id="UniqueName" style="position:absolute; overflow:hidden; top:0px; left:0px; width:10px; height:10px; background-color:#ff0000;"></div> Which should create a small red square, like this: You can modify the width and height of your DIV by changing the width and height values. Just make sure that the numbers end with the characters "px". If you create more than one red block, you can change their positions by changing the values of top and left - just remember that the higher the number entered for the top value, the lower it appears on the screen, and the higher the number entered for the left value, the closer to the right it appears on the screen. Next you must give each DIV a unique ID value - this can be a word, or a jumble of letters, or anything as long as:
If you want to change the colour of your block, you can alter the digits in the background-colour attribute. CAUTION! These are hexadecimal numbers, so insted of each digit being 0-9, they go from 0-f! (That is, 0123456789abcdef). Some quick colour examples are: #000000: Black #ff0000: Red #ffff00: Yellow #00ff00: Green #00ffff: Cyan #0000ff: Blue #ff00ff: Magenta #ffffff: White If you go back to Week 1 and select "Hexadecimal" from the menu on the left, you can find out more on how this works. Once you have finished resizing and colouring your blocks, we will be ready to start programming your game. Click on Programming in the menu to the left to continue. Don't worry that your game will only be blocks - as soon as we have the game program working, we will be able to substitute these coloured blocks for better graphics! In the Notepad program, all you will have is a Code view.
To see what your code is doing, you will have to open the game.htm file in a web browser, such as Internet Explorer. Leave it open, and each time you go back to it, press the F5 key to see your changes in action. Look for the line of code which reads Instructions. Type your instructions under here. To see the results of your changes, click on the lower section at any time. To start a new line, type the HTML code, <br /> which means "Line Break". Don't forget to tell your players which keys/mouse functions control which aspects of your game. You can further personalise the template by replacing the text between the <title> and </title> tags with the name of your game. Also, replace the words Game Title with the name of your game, and replace the words Team Members wih the names of your team members. Once you are finished here, it is time to move on to your game elements. By now, you should have decided how large you want everything to be. If you have planned this well, you will have a list of your game elements written or typed on a piece of paper, each with their widths and heights. We will begin with the basic declaration, <div id="UniqueName" style="position:absolute; overflow:hidden; top:0px; left:0px; width:10px; height:10px; background-color:#ff0000;"></div> Which should create a small red square, like this: You can modify the width and height of your DIV by changing the width and height values. Just make sure that the numbers end with the characters "px". If you create more than one red block, you can change their positions by changing the values of top and left - just remember that the higher the number entered for the top value, the lower it appears on the screen, and the higher the number entered for the left value, the closer to the right it appears on the screen. Next you must give each DIV a unique ID value - this can be a word, or a jumble of letters, or anything as long as:
If you want to change the colour of your block, you can alter the digits in the background-colour attribute. CAUTION! These are hexadecimal numbers, so insted of each digit being 0-9, they go from 0-f! (That is, 0123456789abcdef). Some quick colour examples are: #000000: Black #ff0000: Red #ffff00: Yellow #00ff00: Green #00ffff: Cyan #0000ff: Blue #ff00ff: Magenta #ffffff: White If you go back to Week 1 and select "Hexadecimal" from the menu on the left, you can find out more on how this works. Once you have finished resizing and colouring your blocks, we will be ready to start programming your game. Click on Programming in the menu to the left to continue. Don't worry that your game will only be blocks - as soon as we have the game program working, we will be able to substitute these coloured blocks for better graphics! |