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。

如果你可以提供某種視覺模型，我可以給你一些更具體的指針。