javascript - 复杂的 Div/Canvas 放置

Question

简介:

我一直在通过阅读互联网上的资料独自学习 Javascript/CSS/HTML，我很难从更广阔的视角了解如何完成我想通过这种方式学习的内容。我正在尝试制作网络浏览器游戏。

最终目标:

创建 Angular 色装备界面(布局如下图)和 Angular 色包界面。我希望能够单击包中的一个元素并将其拖放到 Angular 色设备屏幕上它所属的插槽中(不必拖放但会很好。)包有 10 个不同的插槽，每个包含一个不同的元素，我只想一次移动一个元素。

我尝试过的:

为包创建四个 div。一个包含其他三个，一个包含在顶部绘制文本“包”的 Canvas ，两个包含 5 个 Canvas 元素(对于包中的每个槽)。我这样做是为了实现一个“onclick”，以便我可以在包中抓取单个元素。

Angular 色装备画面似乎太复杂了，无法使用 div 进行排列。设备槽的行列排列方式不合理。我希望每个设备插槽(看起来像正方形的东西)都能够被单独点击。我试过 float 元素并以不同方式使用边距，但效果不佳。我可以使用一个 Canvas 绘制整个 Angular 色装备屏幕，但是当用户点击屏幕时，我如何知道 Canvas 的哪个部分被选中？

评论:

有什么方法可以确定用户在点击时点击了元素的哪一部分？有没有比我错过的 div 更好的东西？如果有可能使 div 中的 child 不能强制父 div 超过我指定的宽度或高度(有时 child 会增加 parent 的大小，有时则不会)，这也可能会有所帮助。)当我将子项添加到 div 他们似乎总是添加到最后一个元素的右侧，而不是最后一个元素的下方，即使使用 float 也是如此。

下图中的 Angular 色屏幕是从单个 Canvas 绘制的。我想在一个 div 中以相同的方式(或其他方式)安排多个小 Canvas (每个设备插槽一个)**编辑

Answer 1

我相信我可以使用绝对定位在设备屏幕内实现设备槽 Canvas 的正确定位，我以前没有想到过。