HTML 5 Canvas纸牌游戏

-2

我正在HTML 5画布上制作实时纸牌游戏。后端服务器是node.js。设计牌桌给我很难，因为我只是不想在画布上绘制所有东西。HTML 5 Canvas纸牌游戏

这是我想要实现的卡表。 enter image description here

我现在拥有的一个选项是将此图像作为画布的背景并在其上生成动画。这对于性能观点有好处，但后来我可能无法捕获在特定区域中移动的诸如卡之类的事件。

解决这种情况的最佳方法是什么？我应该将它设置为canvas的背景，还是使用css在canvas上创建它？

仅供参考：我使用kineticjs作为开发此游戏的前端框架。

来源

2014-04-06 Talha Masood

你有没有想过使用在画布上点击事件？或者这不与kineticJS一起工作？ – Sam

@Sam KineticJS有点击事件。 –

KineticJS确实有点击，拖动和许多其他事件。我的观点是，我如何知道一张卡片是否进入了某个特定区域，如果我正在通过桌面背景图像进行动画制作，那么它就像“水晶卡座”一样？ –

您可以确定鼠标在这样的哪个单元：

倾听其火，当卡被拖动dragmove事件。
里面的dragmove处理程序，获取鼠标位置，
数学计算鼠标是细胞在

演示：http://jsfiddle.net/m1erickson/DN5hA/

下面是它可能看起来在代码：

card1.on("dragmove",function(){ 
    var mouse=stage.getPointerPosition(); 
    var cellX=parseInt((mouse.x-borderOffsetX)/cellWidth); 
    var cellY=parseInt((mouse.y-borderOffsetY)/cellHeight); 
    highlight.position({ 
     x:borderOffsetX+cellX*cellWidth, 
     y:borderOffsetY+cellY*cellHeight 
    }); 
    layer.draw(); 
}); 


});

来源

2014-04-06 14:42:21 markE

我必须说这是最好的回答:) –

我是KineticJS的忠实粉丝，我喜欢它的图层，这可能会对您感兴趣。
每一层都是它自己的画布/ SVG，这意味着更新一个图层不会导致其他图层重新绘制。
因此，您可以在背景中为电路板设置一个图层，同时为游戏机制设置其他图层。

来源

2014-04-06 08:28:34

我很清楚这些图层。我的观点实际上是我需要知道一张卡是否从一个单元移动到另一个单元（发生这种情况时需要生成一个事件）。对于背景图片，我不会被捕获这些事件。这是我的观点。纠正我，如果我错了。 –

浮动div在整个画布上以及监听onmouseout/onmouseover事件如何？这会与画布事件发生冲突吗？如果是这样，你可以手动将事件传递给画布吗？ – Sam

HTML 5 Canvas纸牌游戏

回答

相关问题