Javascript HTML5帆布纸牌游戏

我正在用HTML5画布制作一个实时纸牌游戏。后端服务器是node.js。设计卡片表让我很难，因为我不想把所有的东西都画在画布上

这是我想为卡片表实现的目标

我现在有一个选择，就是把这个图像作为画布的背景，并在上面制作我的卡片的动画。从性能的角度来看，这对是有好处的，但是我可能无法捕捉到在特定区域移动的卡之类的事件

解决这种情况的最好办法是什么？我应该把它设为 画布背景，还是使用css在画布上创建

---

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

我是kineticjs的忠实粉丝，我喜欢kineticjs的图层，您可能会感兴趣。
每个层都是自己的画布/SVG，这意味着更新一个层不会导致其他层被重新绘制。

---

因此，你可以在棋盘的背景中有一层，而在游戏机制中有其他层

您可以确定鼠标在哪个单元格上，如下所示：

• 监听在拖动卡时触发的

  dragmove

  事件

• 在dragmove处理程序中，获取鼠标位置

• 用数学方法计算鼠标在哪个单元格上

演示：

下面是它在代码中的外观：

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();
});


});

---

你有没有想过在画布上使用点击事件？或者，这不适用于kineticJS？@Sam kineticJS有单击事件。kineticJS有单击、拖动和许多其他事件。我想说的是，如果我在桌子的背景图像上制作卡片动画，我怎么知道卡片是否进入了一个特定的区域，比如“Crystal Deck”？所以我会使用背景作为图像，然后单击事件，如onmousedown/onmouseup/onmousemove，以确定用户在何处/何时执行哪些操作。问题是：你不能回避数学和一些“如果有的话”的混乱。我很清楚层次。我的观点实际上是，我需要知道一张卡是否从一个单元格遍历到另一个单元格（发生这种情况时需要生成一个事件）。以背景图像为例，我不会成为拍摄这些事件的最佳人选。这是我的观点。如果我错了，请纠正我。在整个画布上浮动div并监听onmouseout/onmouseover事件如何？这会与画布事件发生冲突吗？如果是这样，您能手动将事件传递到画布吗？我必须说这是最好的答案：）