HTML5 card game [closed]

Question

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.

Closed 9 years ago.

I created a card game in silverlight a year or so ago in order to learn a bit about Silverlight.

I am now wanting to make a HTML5 version of the game in an effort to learn a little bit more about that.

I am thinking I'd like to take advantage of stuff like Knockout.js and WebSockets and the canvas element.

Now what I'm confused about is how to lay out the cards on the screen.

With Silverlight I was able to make a "Hand" control, which was made up of two sub controls - the cards the player has in their hand and the ones they have on the table. And they in turn were made up of Card controls.

Now I don't believe there is the concept on a User Control in javascript. So I am possibly thinking about this in entirely the wrong way.

So my question is - how could I lay out some cards on the table and perhaps make reuse of something for each player?

I have a client side JSON object called game, which contains an array of players. Each player has a hand which is made up of an array of in-hand cards and on-table cards. Ideally I would like to bind these to something using Knockout.js - but I don't know what I could bind to.

Would I simply position images (of cards) on a canvas? Is there a way to make some kind of Hand object that each player could have and that I could bind to?

Any advice? Or sample code you've seen elsewhere?

Answer 1

There is no view construct such as XAML or DOM in the canvas. With canvas you are literally drawing lines, fills, images, and such with really basic functionality. You will need a canvas library to find, or more probably build, the types of controls you mention. See Processing.js for a possible canvas library candidate.

Answer 2

Instead of using a single canvas for rendering the game I would probably use a canvas per card and then layout them using CSS.

If you decide to choose this route you'll need to figure out how to sort out selections, possible dragging etc. This should be easy compared to doing all that on a single canvas though since in this case you can rely on vanilla JS and CSS.

If you can provide some kind of visual mockup I can probably give you some more specific pointers.