Thursday 27 November 2008

HTML and Javascript Framework


When the user starts up the game, he is calling up an HTML page like the one here. It consists of two frames, one of which you can see, the other is "hidden". We'll come back to the hidden frame in a moment.

The frame you can see has a rectangle where the Java applet resides. The applet is doing most of the work here, but we need to initiate it and communicate with it.


There are also four buttons on a Javascript form which communicate with the Java applet.

Here is the HTML for the outer framework.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>China 11</TITLE>
</HEAD>
<FRAMESET rows="90%, 1%">
<FRAME SRC="./page3js.htm" name="mainframe">
<FRAME SRC="./hush.htm" name="soundframe">
</FRAMESET>
</HTML>

The almost invisible frame "soundframe" enables the game to play midi tunes. The initial page that goes in that frame is hush.htm, which does nothing:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>hush</TITLE>
</HEAD>
<BODY>
Bridge hush
</BODY>
</HTML>

For debugging purposes, I can open up the frame and see what page is "playing".

A different page that has a tune on it can be loaded by Javascript at run-time. This is the page for one of the songs.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>ara</TITLE>
<BGSOUND src="./sounds/arabian.mid" loop = "-1">
</HEAD>
<BODY>
<BGSOUND src="./sounds/arabian.mid" loop = "-1">
<EMBED name = "ara" SRC = "./sounds/arabian.mid" autostart="true"
loop="true" hidden="true" mastersound></embed>
Bridge ara
</BODY>
</HTML>

Note that it uses BGSOUND as well as EMBED. This was to cover old Internet Explorer versions. The idea is that it plays in a loop until the game ends or a new song is put in place. There are a number of problems with this system - not every browser gets the right sound or any sound at all. There's a horrible crunch when the song is changed on Firefox, whereas it all works rather well on IE.

I don't want to dwell too much on this, because I intend to change the mechanism in due course.

Tomorrow I'll start on the main page that sits in the "mainframe" frame and communicates with the applet.

No comments: