Javascript 可拖动到网格的三维立方体

我正在为学校做一个HTML5 en CSS3项目。 该项目的目标是教幼儿如何计算简单的方程式。 学习这一点的第一步是教他们识别不同形状的数字

第一项工作是： 显示一个随机数，让孩子选择一个三维立方体并将其拖动到网格内。 网格中立方体的数量当然应该与给定的数量相对应。 举例如下：

我不知道从哪里开始。我知道HTML5中的画布，但我对它不是很熟悉

当立方体靠近时，我如何将它们捕捉到位？ 我如何在HTML5中绘制3D立方体？ 如何检查屏幕上绘制了多少个立方体？ 我能画一些比立方体更能让孩子们看的东西，但仍然有3D效果吗

最重要的是，它能在iPad上运行吗？ 一个专用的应用程序是不可能的，因为它也应该能够在桌面上运行

希望你们中的一些人能有一个好的解决方案

---

谢谢

制作genuin 3D立方体的唯一方法是 您可以将此多维数据集（图形表示）放入当前元素中，该元素将以逻辑方式表示多维数据集，并使用标准浏览器方式管理

拖放

，由于这是基于DOM的实现，因此可以使用css设置样式。您可以添加颜色过渡、动画延迟甚至变形，它的性能比js动画要好得多。而且它更容易实现。

---

这里（，）是沃尔特·迪斯尼工作室提供的非常酷的动画指南，可以帮助您使其在视觉上更具吸引力。

我不会使用3d，这样一个简单的应用程序，不需要它。如果ipad有合适的浏览器，该应用程序将在ipad上运行。（我是一个安卓系统的人，所以我不想使用3D，但客户希望使用3D。图中只是一个简化版本。最终版本会更加流畅。如果你想使用3D，请使用这个库。（这会救你的命。）如果你想测试它是否能在iPad上工作，请检查这个例子：3d是真的吗？如果这只是3d的幻觉，那么你仍然可以使用平面图形，使其看起来像3d。如果不需要旋转3d对象或视点等，则通常可以以2d方式实现3d。要在javascript中对鼠标事件进行拖放查看。。。基本上，mousedown设置一个“拖动”标志，然后mouseup清除该标志并进行计算以“捕捉”网格等。在拖动过程中，您可以使用setInterval运行一个函数，将图形移动到鼠标位置。这是它的基本概述。你应该看看它是如何制作的，因为他们制作的正是你所描述的。