HTML5纸牌游戏
大约一年前，我在 silverlight 中创建了一款纸牌游戏，以便了解一些有关 Silverlight 的知识。
我现在想要制作该游戏的 HTML5 版本，以便更多地了解这一点。
我想我想利用 Knockout.js 和 WebSockets 以及 canvas 元素之类的东西。
现在我很困惑的是如何在屏幕上布置卡片。
通过 Silverlight，我能够制作一个“手”控件，它由两个子控件组成 - 玩家手中的牌和桌上的牌。它们又由卡片控件组成。
现在我不相信javascript中存在用户控件的概念。所以我可能以完全错误的方式思考这个问题。
所以我的问题是 - 我怎样才能在桌子上放置一些牌，并为每个玩家重复使用一些东西？
我有一个名为 game 的客户端 JSON 对象，其中包含玩家数组。每个玩家都有一手牌，由一系列手中的牌和桌上的牌组成。理想情况下，我想使用 Knockout.js 将它们绑定到某些东西 - 但我不知道我可以绑定到什么。
我可以简单地将（卡片的）图像放置在画布上吗？有没有办法制作某种类型的 Hand 对象，每个玩家都可以拥有并且我可以绑定到该对象？
有什么建议吗？或者您在其他地方看到过的示例代码？
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?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我可能会为每张卡使用一个画布，然后使用 CSS 进行布局，而不是使用单个画布来渲染游戏。
如果您决定选择这条路线，您将需要弄清楚如何对选择进行排序，可能的拖动等。与在单个画布上完成所有这些操作相比，这应该很容易，因为在这种情况下您可以依赖普通的 JS 和 CSS 。
如果您可以提供某种视觉模型，我可能会给您一些更具体的指导。
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.
画布中没有 XAML 或 DOM 等视图构造。使用画布，您实际上可以使用非常基本的功能来绘制线条、填充、图像等。您将需要一个画布库来查找或更可能构建您提到的控件类型。请参阅 Processing.js 了解可能的候选画布库。
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.