HTML5纸牌游戏

Question

为了学习一些关于Silverlight的知识，我在大约一年前的Silverlight中创建了一个纸牌游戏。

我现在想制作一个HTML5版本的游戏以努力学习更多一点。

我想我想利用像Knockout.js和WebSockets和canvas元素的东西。

现在我感到困惑的是如何在屏幕上布置卡片。

使用Silverlight，我能够制作一个“手形”控件，它由两个子控件组成 - 玩家拥有的手牌和桌子上的手牌。而他们又是由卡片控制组成的。

现在我不相信JavaScript中的用户控件的概念。所以我可能完全用错误的方式来思考这个问题。

所以我的问题是 - 我怎么能在桌子上放置一些牌，并且可能为每个玩家重新使用一些东西？

我有一个叫做游戏的客户端JSON对象，它包含一个玩家数组。每个玩家都有一只手，它由一系列手中牌和桌上牌组成。理想情况下，我想将这些绑定到使用Knockout.js的东西上 - 但我不知道我能绑定什么。

我只是简单地将图像（卡片）放在画布上？有没有办法让每个玩家都可以拥有并且可以绑定的某种Hand对象？

有什么建议吗？或者你在其他地方见过的示例代码？

Answer 1

画布中没有视图构造，例如XAML或DOM。使用画布，您可以绘制线条，填充图案等，并且具有真正的基本功能。您需要一个画布库来查找或更可能地构建您提到的控件类型。请参阅Processing.js以获取可能的画布库候选项。

Answer 2

而不是使用单个画布来渲染游戏我可能会使用每张卡的画布然后使用CSS来布局它们。

如果你决定选择这条路线，你需要弄清楚如何挑选选择，拖动等等。与在单个画布上做所有事情相比，这应该很容易，尽管在这种情况下你可以依靠香草JS和CSS。

如果你可以提供某种视觉模型，我可以给你一些更具体的指针。