HTML5纸牌游戏
一年前，我在Silverlight制作了一个纸牌游戏，以了解Silverlight的一些情况。我现在想做一个HTML5版本的游戏，以努力了解更多关于这一点。我想我想利用一些东西，比如Knockout.js和WebSockets以及画布元素。
现在我困惑的是如何在屏幕上布置卡片。使用Silverlight，我可以做一个“手”控制，它是由两个子控件组成的:玩家手中的牌和桌上的牌。它们是由卡片控制器组成的。
我不相信在JavaScript中有关于用户控件的概念，所以我可能用完全错误的方式来考虑这个问题。
我有一个客户端JSON对象，名为game，它包含一个玩家数组；每个玩家都有一只手，它是由一组在手卡和桌上卡片组成的。理想情况下，我希望使用Knockout.js将这些绑定到某个东西，但我不知道可以绑定到什么。
我怎么能在桌子上放一些卡片，或者为每个玩家重复使用一些东西呢？我会简单地在画布上定位(卡片的)图像吗？是否有一种方法可以让每个玩家都有这样的手感，我也可以绑定到其中呢？
回答 1
Software Engineering用户
发布于 2011-09-03 14:08:19
你不需要用画布击倒。就像平时一样做你的设计吧。
就我个人而言，我用绘图方法创建对象，这些都是可绘制的。
实例化。
然后，您有其他容器对象，它们具有对可绘制对象的引用。
可提取卡的示例。
(使用pd)
var Card = {
draw: function _draw() {
ctx.strokeRect(this.x, this.y, 30, 50);
ctx.strokeText(this._value, this.x+10, this.y+25);
},
setPosition: function _position(x, y) {
this.x = x;
this.y = y;
}
};一种容器手，它有可抽卡的引用。
var Hand = {
draw: function _draw() {
this.cards.forEach(function (c, i) {
c.draw();
});
},
generateCards: function _generateCards(n) {
for (var i = 0; i < n; i++) {
this.cards.push(Object.create(Card, pd({ _value: i })));
}
},
setPosition: function _setPosition(x, y) {
this.x = x;
this.y = y;
this.cards.forEach(function _each(c, i) {
c.setPosition(x + i*40, y);
});
}
};还有一些引导代码来画一些东西。
var h = Object.create(Hand, pd({ cards: [] }));
h.generateCards(3);
h.setPosition(10, 10);
h.draw();https://softwareengineering.stackexchange.com/questions/105621
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号