no-animation puzzle game with inventory and rooms

[IceWendigo]

Hi there,

I did a few basic tutorials etc, but I dont know if Im even on the right track

I would like to make an image or "image button" based puzzle game, handling images and text but no animation, where you go to different Rooms to pick up pieces of the puzzle and put them in your inventory, or drop pieces of the puzzle from your inventory to the location you are in to achieve the puzzle objective.


In a Nutshell:
Display a grid of image buttons [2 x 3], pressing a button changes which buttons are displayed.
The basic idea is to have buttons represent different places, where you can pickup or drop an item, and if you drop the right objects in the right place you win.


Example:

2 top buttons [2 x 1] represent your inventory of 2 items (or empty slots), the 4 bottom buttons represent a 2x2 "map" with 4 "locations" buttons (to emulate locations on a map).

You press a specific "location" and the 4 bottom buttons are replaced:
the middle row is a "map" button to return to the map (with the 4 location buttons) and a "?" button to have a full screen text with info on the current location(which items to bring there) and an exit button to return.
the bottom row are 2 items found in that location, and

The 2 bottom items can be picked up, these items were randomly placed upon setup of the game, or dropped there by you, if you click on an item button at the bottom it highlights and you must click on a slot in your inventory at the top where the item (or nothingness) goes to replace what was there (item or empty slot). If you select an empty slot button at the bottom of a location and switch it with an item in your top inventory you effectively drop the item from your inventory to that specific location.


Can this be done with javascript? Is it better to use HTML5?


I would appreciate any help, advice, relevant tutorial link, or code snippet you can throw my way

many thanks

Ice

[Old Pedant]

Ummm...you couldn't do it in HTML5 without using JavaScript.

Yes, it's not even hard to do. It would work in browsers are far back as MSIE 4 and Netscape 4, though you'd have to put in crap code to go that far back.

Fairly trivial to do in any modern browser, even MSIE 7.

The hard part is setting up all the data.

The descriptions of all the items. The descriptions of all the rooms. The way in which rooms are connected.

You could do all that just using JavaScript arrays and/or objects.

I find your description of the map navigation confusing. What do the 4 location buttons represent? North, East, South, West? Then why aren't they arranged in that fashion? If they are in a square, they would be Northwest, Northeast, Southeast, Southwest. So how would you get to a location due West of the current one? Or would you?

[IceWendigo]

THanks Old Pedant

sorry for the confusion

I wanted to make it as easy as possible so you can just go to the map (or main hall) from any room and can go to anny room from the map (or the main hall). THe rooms cound be living room, bedroom, kitchen, library, or if the map is an island locaitns could be docks, village, temple, lighthouse. I might have a map where you click on the lighthouse, to go there, but to start a simple button with a lighthouse image will do.


I would like to eventually play it on a latest safari browser from an ipod or a recent browser, so backwards compatibility is not an issue.