|
About the template
This is an HTML template for the picture browser BreezeBrowser. With this template you are able to generate a Javascript Memory game which can be played within a web browser. You need to install BreezeBrowser first in order to use the template. You don´t need to buy the product, the trial version is fully functional but limited by the number of images it can handle. My HTML template "Memory" is free of charge. Since the Javascript code is based on a script by irt.org, their terms of license apply. However if you want to honor my efforts a donation is welcome. :-)
|
|
Download
|
You can install the "Memory" template by downloading the file memory.zip and extracting it to your default template directory (which is usually located at C:\Program Files\BreezeSys\BreezeBrowser\templates). You should end up with a directory called "memory" underneath the template folder.
|
|
How to use
HTML generation
You should be familiar with BreezeBrowser´s HTML generation feature. If not, please read the online help pages first.
Before you start make sure that all images (up to 32) have the same orientation (portrait OR landscape, not mixed!) and also the same width/length ratio. Otherwise the browser will resize them to the size of the last image, which may look ugly. You can either select 12, 18, 25, or 30 portrait orientated images or 12, 18, 24, or 32 landscape orientated images. It doesn´t matter if you select any other number but then some images won´t get used in the memory game. The number of images defines the amount of available difficulty levels (max. 4).
Table 1: Number of images and grid layout
|
portrait
orientation |
landscape
orientation |
|---|
| Level 1 "easy" | 12 (8 x 3) | 12 (6 x 4) |
|---|
| Level 2 "medium" | 18 (9 x 4) | 18 (6 x 6) |
|---|
| Level 3 "hard" | 25 (10 x 5) | 24 (6 x 8) |
|---|
| Level 4 "very hard" | 30 (12 x 5) | 32 (8 x 8) |
|---|
The size of the tiles in the game is defined by the thumbnail size you set in the HTML dialogue. With the default thumbnail settings (120x120 pixels) and a 3:2 width/length ratio you can view level 1 & 2 on a 800x600 screen and level 3 & 4 on a 1024x768 screen without scrolling. In order to play all 4 levels on a 800x600 monitor you have to set a thumbnail size of 90x90 pixels.
Table 2: Table sizes in pixels (with standard HTML settings)
|
portrait
orientation |
landscape
orientation |
minimum
screen size |
|---|
| Level 1 "easy" | 640 x 360 | 720 x 320 | 800x600 |
|---|
| Level 2 "medium" | 720 x 480 | 720 x 480 | 800x600 |
|---|
| Level 3 "hard" | 800 x 600 | 720 x 640 | 1024x768 |
|---|
| Level 4 "very hard" | 960 x 600 | 960 x 640 | 1024x768 |
|---|
How to play
Is there anyone who never played "Memory" before? Good, next topic...
Upload
Of course you can upload the generated memory game to your homepage so that visitors or clients can play it over the internet. But before you upload the whole folder I recommend to delete all fullsize images to save web space. You can easily delete them by sorting the folder content by file size or you can also specify a separate folder for the fullsize images (see BreezeBrowser properties). Attention: that applies only for the standard setting - if you decided to use the fullsize images as bigger tiles (see below) then DO NOT delete the fullsize images...
|
|
Customization
In the following paragraphs I´ll explain some variables for customization. You will find them in the file "settings.js". To set a new value you have to open this file in a text editor.
use_std = 1 (bigger tiles)
It is possible to set an alternative (bigger) tile size using the fullsize images if you set the variable use_std to 1. Then your fullsize images will be used as tiles as well (make sure that you set a size which is slightly larger than your thumbnails).
delay = 500 (reveal delay)
A value of 500 means that a pair will be revealed for 500 milliseconds, which is half a second. You could set the delay variable to a higher value (2000 = 2 sec.) if you play with little kids for example.
tile_back = new String("tile_back_60x90.jpg")
With this variable you can define your own image for the tile backsides. Note that the size should match the thumbnail size you defined in the HTML dialogue. I.e. if you set the thumbnail size to 90x90 with portrait orientated images with a 2:3 ratio then you will end up with a tile size of 60x90 pixels. That is the preferred size of your tile backside image. If no images are specified a blank backside will be shown. If you have set the variable use_std to 1 (use fullsize images as bigger tiles) then you should also set the variable tile_back_std.
background_1 = new String("background_image_1.jpg")
With this set of 8 variables you can define big background images which will be slowly revealed the more matching pairs you find. The variables background_1 to background_4 are for the four difficulty levels in thumbnail size. The variables background_1_std to background_3_std are used if you set the variable use_std to 1. Refer to table 1 on this page to calculate your board sizes. If no images are specified the background will be transparent.
You can also download and explore my Red Sea Memory example which uses all of these variables.
|
|
Example
Click on the image to see an example memory game. I used 24 landscape orientated images which results in 3 levels of difficulty (see table 1). I defined a special tile background image with the same dimensions as the thumbnails and one background image for all levels. Here is the content of the file "settings.js":
var delay = 500
var use_std = 0
var tile_back = new String("tile_back_90x67.jpg")
var tile_back_std = new String("")
var background_1 = new String("background_540x268b.jpg")
var background_2 = new String("background_540x268b.jpg")
var background_3 = new String("background_540x268b.jpg")
var background_4 = new String("")
var background_1_std = new String("")
var background_2_std = new String("")
var background_3_std = new String("")
var background_4_std = new String("")
You can also download a zip file of the Red Sea Memory example which makes use of different tile sizes and background images for each level. The images below show the screen with level 1 and with level 4 using bigger tiles plus the HTML generation dialogue (click on it).
Table 3: Board size in pixels for the example above
|
Grid layout |
Tile size 1
90x67 |
Tile size 2
128x96 |
|---|
| Level 1 "easy" | 6 x 4 | 540x268 | 768x384 |
|---|
| Level 2 "medium" | 6 x 6 | 540x402 | 768x576 |
|---|
| Level 3 "hard" | 6 x 8 | 540x536 | 768x768 |
|---|
| Level 4 "very hard" | 8 x 8 | 720x536 | 1024x768 |
|---|
|
|
|
