Puzzle OnSite

1. File list

sample.html(the sample page)
puzzlex.js(the control script)
puzzlex.html(the game script)
readme.html(this file)
puzzle image and thumbnail files

2. How does it work

Puzzle OnSite needs two windows to play the game: the control window and the game window.

The control window is the browser window that loads the "sample.html", which includes the control script to define the images for the puzzles.

The game window is the browser window that pops up when you click on an image thumbnail in the control window. It loads the game script, gets the image information from the control window, builds the puzzle and interacts with you.

3. How to use your own images

You need to modify both the "sample.html" and the "puzzlex.js" to supply your own images to the puzzle game.

In "sample.html", you need to include the "puzzlex.js" inside the <head></head> section, like this:

<head>
<title>You page title here</title>
<script language="javascript" src="puzzlex.js"<>/script>
</head>

... add the functoin call onload="setupImages()" in the <body> tag, like this:

<body ... onload="setupImages()">

... and use the following syntax to define a thumbnail link:

<a href="#puzzlexN"><img src="your_thumbnail_image" width="..." height="..." border="..."></a>


where N starts from 0, and should match the puzzle image index mentioned below.

In "puzzlex.js", look at the "defineImages()" function at the top of the file:

function defineImages() {
  picPool[0] = new picPara("laputa1.jpg",540,420,5,4,10,"image from Laputa, 540x420, 5x4, 24kb");
  picPool[1] = new picPara("laputa2.jpg",360,450,4,5,10,"image from Laputa, 360x450, 4x5, 26kb");
  picPool[2] = new picPara("laputa3.jpg",640,480,5,4,10,"image from Laputa, 640x480, 5x4, 45kb");
  picPool[3] = new picPara("laputa4.jpg",450,350,6,5,10,"image from Laputa, 450x350, 6x5, 20kb");
}

The "defineImages()" function is where you define your images. All you need to do with "puzzlex.js" is to change this function and define your images with the following syntax:

  picPool[n] = new picPara("your_puzzle_image", imageWidth, imageHeight, puzzleColumns, puzzleRows, puzzleMargin, "image description to be shown at browser status bar");


  where n is the puzzle image index which starts from 0

You must make sure that the presenting order of the thumbnail links in "sample.html" matches the puzzle image index in the "defineImages()" function in "puzzlex.js". For example, the first thumbnail link in "sample.html" will launch the puzzle game with the first puzzle image(indexed 0) defined in the "defineImages()" function in "puzzlex.js".

4. Images for the puzzles

An image is good for the puzzle game if you can "slice" it exactly. Usually people like to have the puzzle tiles in square shapes, so, for example, an image with the size of 640x480 is good for puzzles of 4x3, 5x4, 8x6, 10x8 and 16x12, etc.