HTML5 Card Game

Question

I created a silverlight card game a year ago to learn a little about Silverlight.

Now I want to make an HTML5 version of the game to learn a little about it.

I think I would like to use things like Knockout.js and WebSockets, and the canvas element.

Now I'm confused about how to put cards on the screen.

With Silverlight, I was able to make "Hand", which consisted of two subcontrollers - cards that the player has in his hand, and those that they have on the table. And they, in turn, consisted of map controls.

Now I do not believe that there is a concept in User Control in javascript. Therefore, I probably think about it completely wrong.

So my question is: how can I put a few cards on the table and possibly reuse something for each player?

I have a client JSON object called a game that contains an array of players. Each player has a hand consisting of an array of pocket cards and cards on the table. Ideally, I would like to bind them to something using Knockout.js, but I don't know what I could bind to.

Would I just position images (on maps) on canvas? Is there a way to make some kind of Hand object that every player can have, and which I could link?

Any tips? Or an example of code that you saw elsewhere?

Answer 1

There is no presentation construct in the canvas, such as XAML or DOM. With a canvas, you literally draw lines, fills, images, etc. With truly basic functionality. You will need a canvas library to find, or rather create, the types of controls you mentioned. See Processing.js for a possible candidate for the canvas library.

Answer 2

Instead of using one canvas to render the game, I would probably use the canvas on a map and then place them using CSS.

If you decide to choose this route, you need to figure out how to sort the selection, drag and drop, etc. This should be easy compared to what you can do on one canvas, although in this case you can rely on JS and CSS vanilla.

If you can provide some kind of visual layout, I can probably give you some specific pointers.