Shop and Inventory System

Question

I'm creating a JavaScript game, and I'm getting stuck. When the player obtains X amount of gold, a middle column appears (you've unlocked the shop, yay!), and when you obtain more gold than an item costs, it will appear (except special conditions where it requires more than just gold of course).

Right now, I'm stuck on the base foundation of the system, and I would like to hear some suggestions before I move on.

function _shop() {
    this.items = [
        {
            effect : function() { engine.player.revive(true); },
            "price" : 100,
            "name" : "Heal"
        }
    ];
}

The shop holds an array of item objects, some will be holdable, some will be instant use (currently working on instant use).

Now, here's how the item is called:

in my elements.js file --

addShopItem : function(gold) {
    console.log(engine.shop.items.length);
    for (var i = 0; i < engine.shop.items.length; i++) {
        if (engine.shop.items[i]["price"] <= gold) {
            document.getElementById("items").innerHTML += "<br />"+engine.shop.items[i].name;
        }
    }
},

Which is called by going raiding (irrelevant, won't post that code, it's going to change to the engine's trigger function with flags based on the item object.

Now my question is:

1. Is this a good way to handle an dynamic shop system?
2. What's the best way to link this to a player object? (My initial guess is an object inventory inside the parent?

Answer 1

I would recommend you to look into Entity Component System architecture. This is exactly use case where it will shine. There is nice article here and very good implementation by Richard Lord called Ash Framework. It's mainly written for ActionScript (Flash), but there are already ports to other languages, Javascript included.

In the short, it would allow you to have entity for each item type and attach components on entity depending on what properties such items has. You can combine those components freely. It allows you to extend it easily later when you need something else for that item to do. Than you have system for shopping, system for fighting, system for reviving and so on. Each system is interested only in limited set of components on entities and is working with those.

I am not sure how far in development you are, if just beginning, it's really good idea go this way. Otherwise just learn and do it for the next game.

I would post links for that framework, but my reputation is rather low, so just google Ash Framework

Answer 2

Since I don't know how you're creating everything else, I came up with the following. Note that the shop() allows for overloading the parameters with the arguments object. The 'item' objects are encapsulated within an array which you can access as shown below.

  function shop() {
shopObj.shopType = arguments[0];
  if (arguments.length > 1)
// if you have more conditions, such as charisma, special quest item
  /*    switch (arguments.length) {
    case 1:
      ...etc...       
    break;
    default:
  */        

}

var shopObj = [
    {
        shopType: "Healer",
        shopAction : function() { engine.player.money -= itemCost; engine.player.revive(true); },
        itemCost : 100,
        itemName : "Heal"
    },      
    {
        shopType : "Armory",
        shopAction : function() { engine.player.money -= itemCost; engine.player.inventory += itemName;},
        itemCost : 50,
        itemName : 'Dirk'
    }
]       

for (i =0 ; i < shopObj.length; i++)
for (property in shopObj[i]) 
    alert( 'shop ' + i + " 's property is " + property +  " and it's value is " + shopObj[i][property])

Hope this helps Vinny