enter image description here

I am going to reference this image of what I want to accomplish in JavaScript.

This is the Diablo buffer system. This question may be a bit advanced (or possibly not even allowed). But I was wondering how you might go about implementing this type of system in a JavaScript game. Currently to implement such a system in JavaScript escapes me, and I am turning to SO to get some suggestions, ideas, and hopefully some insight in how I could accomplish this without being to costly on the CPU.

Some thoughts of mine for implementing such a system would be to:

  • Create DIVS within a DIV that hold each position of the inventory
  • Go through each item you own in a container and see which DIV it belongs to
  • Make said item images the DIVs image

This type of system might possibly work if ALL items were 1x1, but for this example its not going to work out.

I am at a complete lost of ideas how to even accomplish this. Although, maybe rendering directly to the canvas and checking mouse cords could work, there would more than likely be A HUGE annoyance when checking if other items are overlapping each other (meaning you cant place the item down, and possibly switching item with the cursor item ).

That said, what am I left with? Do I need to makeshift my own hack system with messy code, or is there some source out there (that I don't know about) that has replicated this type of system in their own game.

I would be very grateful to get some replies on how you might go about doing this, and will accept answers that can logically explain how you might implement such a system (code is not required).

P.S. Id like to use pure JavaScript, and nothing else (even though it might be "reinventing the wheel", I also like to learn).

  • \$\begingroup\$ You can do one layer of divs for each slot, and use that for drag and drop. And use another layer for images of items. So when you drop something of size (2,2) on [1,1] you will create new div on position [1,1] * tileSize and set divs [1,1] [1,2] [2,1] [2,2] to full, probably with some link to that item \$\endgroup\$
    – Kikaimaru
    Commented Sep 18, 2012 at 15:12

3 Answers 3


Only talking about the lower part of your image, since that seems to be what your question is about.

You should separate your model from its view.

One suggestion for the model would see each InventoryItem have an inventory-X,Y-coordinate. In that case you only need to check if there are collisions when you add an Item to the inventory (creating an InventoryItem which references the Item), or when you move an InventoryItem around. An Inventory-object representing your inventory would contain a list of InventoryItems, and could expose an interface similar to this:

  • addItem(Item, x, y)
  • getItemAt(x, y) -> InventoryItem
  • moveItemTo(InventoryItem, x, y)
  • removeItem(InventoryItem).

The view can be anything you want, but like MarkR I'd suggest you use the canvas if you're using that anyway. It's arguably more "pure JavaScript" than using HTML (<div>s) with JS (a.k.a. DHTML).


You can certainly implement an interface such as this using Javascript. You could use the DOM and Drag & Drop events, but that has a lot of problems with browser-compatibility (particularly MSIE).

However, I would imagine that most games programmers would simply use canvas and use the same canvas for the inventory screen as for the rest of the game. This is certainly what Diabolo does (Of course, for DirectX software rendering on Windows, originally).

There are a lot of libraries which might help you with the UI.

I would imagine that you have a multi-dimensional array to store the inventory items' position. You can then store the dimensions of individual items to check for (and prohibit) overlapping items in the inventory.

Likewise, you'd need some game logic to determine which items can be equipped in which locations, as such games normally implement a complex system of rules about what can be equipped where. For example, you can't have someone putting a glove on their head, right?


My solution is based on div manipulation, not canvas or anything new and fancy.

I would start with defining the data structure for stuff like "storage" and "items". Every item and the storage should be separate matrix or two dimensional array if you prefer. so lets say you have a storage which is 20x20 squares big, you just create an array or object containing 400 empty positions.

Then when defining items you have to decide how many squares is going to occupy each item, so you cut the image in smaller images each of them should fit a single square and you define another matrix for each item containing these images and their position relative to each other. ex: sword taking 5 spots [0][0] => "img1.png", [0][1] => "img2.png", [0][2] => "img3.png", [0][3] => "null", [0][4] => "null"

After doing this you basically need to drag-drop an item on specific spot, check if the spot is empty, check if the item could fit in nearby squares and if so you read each image from the item`s image array and put it in the storage array (and in the matrix of divs of course). You will have to mark each image with some kind of identifier which should tell you that "these" group of images are from one item and "these" are parts from another item.

When you drag an object from the storage you can immediately remove the object (or hide it) on mousedown and attach to the mouse cursor div containing the "assembled" image of the item.

It is kind of hacky but i think this is the easiest way to accomplish what you need.

  • \$\begingroup\$ Hmmm, that does sound hacky, but certainly does get the job done. It is the best answer so far in terms of logical implementation. \$\endgroup\$
    – User
    Commented Sep 18, 2012 at 11:20
  • \$\begingroup\$ This is hardly a logical implementation. It's a pure hack implementation that doesn't even serve to solve several important problems, like how you drag-n-drop an item visually that's been split into so many pieces. Drawing the inventory items is trivial with each item as its own single img/div. your problem is figuring out if an item fits in a certain location. That is solved with a simple matrix of "occupied" flags and a simple set of loops to see if an itrm's dimensions overlap any occupied cells. \$\endgroup\$ Commented Sep 18, 2012 at 23:25

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .