Object storage for HTML5 game - what to use?

Question

I'm a fairly well versed programmer, so learning new technologies shouldn't be that big of an issue. That being said I'm currently attempting to make a card game in HTML5 using canvas/javascript etc.

The current question that I have is what to use to store instances of the cards. I was thinking about using XML to store the card data, but I'd like to limit the amount of work the browser has to do so the game runs more smoothly, I've heard JSON is a good alternative, but I'm just looking for suggestions. Thanks!

What do you mean, instances of these cards? Those would be straight JavaScript objects, yes? — Brad, Sep 26 '12 at 23:47
hp? What kind of card game is this? Not a standard 52 pack I take it? — Brad, Sep 27 '12 at 00:01
Right, well if you can't answer what it is you are doing, I'm not going to waste time guessing. Fill in the details if you want a solid answer. — Brad, Sep 27 '12 at 01:26
I don't see how those specifics affect the question being asked. The question is a bit broader than that. — DA., Sep 27 '12 at 01:33
Depends on the kind of data, you might want to use a database. While you can use XML and JSON for data persistence, they are more commonly used for data exchange. — Felix Kling, Sep 27 '12 at 01:43

Eugene Naydenov · Accepted Answer · 2012-09-27T00:13:13.597

JSON is better in my opinion.
You can serialize objects to JSON at server side and send JSON string to client (browser), then your client will be able to parse JSON string into regular JavaScript object using JSON.parse. In this way you'll not need to walk through XML to find particular nodes, but will just work with data in more convenient way using native JavaScript objects/arrays. Also in most cases JSON will be more compact than XML so this can save bandwidth and speed-up data loading.
Also the data types stuff may be important here - JSON represents datatypes correctly (integers, booleans, floats, strings) and XML is storing them as strings so you'll need some additional attributes to set datatype during serialization and determine it during deserialization.

score 0 · Answer 2 · edited May 23 '17 at 12:04

I am not sure how to do this without a framework, but what I would do is use Backbone.JS and create a model of what an instance would look like. Eg:{CardNumber:'2', CardColor: 'red', CardClass: 'hearts'}. Now I would create a collection to hold all these models, see backbone collections.

So I would store all this data client side, and possibly provide the user with an option to save the game, to persist this data to a database. This stores it as JSON and then when you persist it to the database, you can serialize it to get the individual components.

If you dont want to save to the db and do not want to use a framework. Try stack/queue implementations in Javascript. See:How do you implement a Stack and a Queue in JavaScript?

I hope that answers your question.

score 0 · Answer 3 · answered Sep 27 '12 at 00:34

Stick to JSON because JSON is just a string representation of plain JS objects, and browsers are very comfortable with it. JS have no good XML handling and that will be too expensive.
Use HTML5 localStorage for keeping data until you really need to sync with the server. Frequent server operations will cause your game to suffer. Use bulk data transfers instead of many small server connections (for example at the start and the end).
Consider using a game library if the canvas graphics are intense. I have used http://jawsjs.com sometime back, but there should be better libs available out there. Selectively render only the dynamic objects, not everything on canvas.

score 0 · Answer 4 · answered Sep 27 '12 at 22:15

0

JSON in conjunction with localStorage is a great way to go.

There are libraries available to serialize and deserialize Javascript objects and allow you tp store and retrieve it from localStorage. Simple Github search is a good way to start

answered Sep 27 '12 at 22:15

Jay

3,471
4
35
49

Object storage for HTML5 game - what to use?

4 Answers4