I need to store data to represent this:
Water + Fire = Steam
Water + Earth = Mud
Mud + Fire = Rock
The goal is the following: I have draggable HTML divs, and when <div id="Fire"> and <div id="Mud"> overlap, I add <div id="Rock"> to the screen. Ever played Alchemy on iPhone or Android? Same stuff
Right now, the way I'm doing this is a JS object :
var stuff = {
'Steam' : { needs: [ 'Water', 'Fire'] },
'Mud' : { needs: [ 'Water', 'Earth'] },
'Rock' : { needs: [ 'Mud', 'Fire'] },
// etc...
};
and every time a div overlaps with another one, I traverse the object keys and check the 'needs' array.
I can deal with that structure but I was wondering if I could do any better?
Edit: I should add that I also need to store a few other things, like a short description or an icon name. So typicall I have Steam: { needs: [ array ], desc: "short desc", icon:"steam.png"},
