Your Very Own Dressup Games
This tutorial will teach you how to create your own dress-up games (example).
A dressup game is a kind of web-games where you "dress-up" your character.
But the term can also mean decorating a room, creating a scenery, building a house, etc.
Before we continue, please make sure that you have the required skills:
Ready?
Now, create your components (those small images that you drag-n-drop) and save them as transparent GIFs.
Create the background (the background can be PNG, JPG, or GIF).
If you are artistically challenged, I recommend that you don't continue.
The result will be horrible and it will scare the children.
Upload the images to Photobucket.
Component1: http://i185.photobucket.com/albums/x277/maschail/sea/bubbles.gif
Component2: http://i185.photobucket.com/albums/x277/maschail/sea/seaweeds.gif
(and so on..)
Copy this HTML code and paste it to Notepad/Wordpad/your HTML editor.
(you have to copy the whole thing!)
In the HTML code, you should see some weird codes like:
background_url, area_width, area_height, default_link_text, img_list
You customize your dressup game by replacing their values with your own:
background_url : the URL of the background image.
area_width : the width of the scene, in pixel. usually this is the same as background width.
area_width : the height of the scene, in pixel. usually this is the same as background height.
default_link_text : the default text for the link to share the scene.
img_list : the URLs of the components.
This is a snippet of the code:
var img_list = new Array( '9! http://i185.photobucket.com/albums/x277/maschail/sea/bubbles.gif', '9! http://i185.photobucket.com/albums/x277/maschail/sea/bubbles.gif', '0! http://i185.photobucket.com/albums/x277/maschail/sea/seaweeds.gif', '1! http://i185.photobucket.com/albums/x277/maschail/sea/crab.gif', '2! http://i185.photobucket.com/albums/x277/maschail/sea/fish1.gif',
As you see, you can repeat the same component (bubbles.gif).
They will be displayed twice.
Once you publish your game, you must not change the order of the components.
For the above code, the current order is bubbles, bubbles, seaweeds, crab, fish1.
If you want to upgrade the components, you may insert the new components AFTER the last component.
But you may not delete any of the existing components or insert a new component between the old ones.
For example, the following order is allowed if you want to upgrade:
bubbles, bubbles, seaweeds, crab, fish1, fish2
bubbles, bubbles, seaweeds, crab, fish1, fish2, fish3, fish4
But these are NOT allowed:
bubbles, bubbles, bubbles, seaweeds, crab, fish1 (insertion at the wrong place)
fish2, bubbles, bubbles, seaweeds, crab, fish1 (insertion at the wrong place)
bubbles, seaweeds, crab, fish1 (removal of an existing component)
var img_list = new Array( '9! http://i185.photobucket.com/albums/x277/maschail/sea/bubbles.gif', '9! http://i185.photobucket.com/albums/x277/maschail/sea/bubbles.gif', '0! http://i185.photobucket.com/albums/x277/maschail/sea/seaweeds.gif', '1! http://i185.photobucket.com/albums/x277/maschail/sea/crab.gif', '2! http://i185.photobucket.com/albums/x277/maschail/sea/fish1.gif',
9, 9, 0, 1, 2 is the z-index of the component.
Component with z-index 1 will appear at the front of component with z-index 0.
Component with z-index 2 will appear at the front of component with z-index 1.
Get the idea?
Congratulations, you have just finished with the HTML code!
Copy the whole thing and create a page at ArisCool.
Your dressup game is ready. Tell your friends!
A note of caution: Do not modify other parts of the HTML. You might break the code if you do so.
This tutorial was created by Yohanes Aristianto