HTML5卡牌游戏

Question

大约一年前，我创建了一个银光卡牌游戏，以便更好地了解银光技术。

现在，我想做一个HTML5版本的游戏，以便学习更多相关知识。我希望能够利用诸如 Knockout.js 和 WebSockets 以及 canvas 元素等新技术。

目前我比较困惑的是如何在屏幕上安排纸牌的布局。

使用 Silverlight，我可以制作一个“手”控件，由两个子控件组成——玩家手中的牌和桌面上的牌，而它们又由卡片控件组成。

现在，我不认为在 JavaScript 中会有用户控件的概念。所以，我可能完全错误地考虑了这个问题。

我的问题是——我该如何在桌面上放置一些纸牌，并尝试为每个玩家重复使用一些东西？

我有一个名为 game 的客户端 JSON 对象，其中包含一个玩家数组。每个玩家都有一手牌，由手中的牌和桌面上的牌组成。理想情况下，我希望能够使用 Knockout.js 绑定到某个东西上——但我不知道该绑定什么。

我是否应该在画布上仅仅定位纸牌的图片？有没有一种方法可以创建某种“手”对象，玩家可以拥有并且可以进行绑定？

有什么建议吗？或者您看过的其他样例代码？

- ChrisCa

---

我觉得你的问题表述过于针对你特定的问题。如果你能够稍微概括一下，并提供一些示例代码，那么它会更适合在SO上发布。 - zzzzBov

很好的问题，但是没有样本代码很难回答。你能在http://www.jsfiddle.net上发布一下你目前所做的吗？ - Naftali

我猜这相当含糊不清——但那是因为我对HTML5一无所知！到目前为止，我只有一些获取JSON数据的代码。我只是在尝试弄清楚如何显示这些数据。我不是真的在寻找人来纠正我的代码——更多的是获得一些关于HTML5在这方面提供什么的想法。 - ChrisCa

JavaScript中没有用户控件的概念，但是您可以创建构造函数的实例并获取这些实例的适当数据。因此，您可以创建一个“Card”构造函数，其实例表示卡片，以及一个“Hand”构造函数，其实例表示用户。 - pimvdb

Answer 1

与其使用单个画布来渲染游戏，我可能会使用每张牌一个画布，然后使用CSS进行布局。

如果您决定选择这条路线，您需要解决如何排序选择，可能的拖动等问题。与在单个画布上完成所有操作相比，这应该很容易，因为在这种情况下，您可以依赖于普通的JS和CSS。

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

- Juho Vepsäläinen

---

或者只需使用图像（或更有可能是具有背景图像的div和制作CSS精灵）。我真的看不出为什么你想使用画布。 - Chris Morgan

这绝对是真的。我猜画布可能会派上用场，以防他按程序生成卡片图像。即使在那种情况下，也可能有意义以其他方式完成。 - Juho Vepsäläinen

Answer 2

在画布中没有像XAML或DOM这样的视图构造。使用画布，您实际上是用非常基本的功能绘制线条、填充、图像等等。您需要找到一个画布库，或者更可能是构建它，以获取您提到的控件类型。请参见Processing.js，了解可能的画布库候选。

- JoshNaro