创建一个动态足球场

Question

我需要创建一个足球场，并设计下拉菜单以选择阵型（例如4-4-2，4-5-1等），并在该场地上移动我的球员（更像是带有编号/名称的圆圈）以实现所需的阵型。

你有什么建议应该从哪里开始吗？

- moonbas3

---

从草图开始，然后尝试将其完善，如果遇到任何问题，可以在这里询问。 - Daan

我不是在寻找直接的答案，只需要一些起点。我正在考虑创建一个div（我的足球场，带有背景等），然后以某种方式在其上方添加11个div（猜测我将使用绝对定位）。但是如何使用Js / Jquery移动它们呢？我应该一直更改left / top属性吗？还是有更好的做法？ - moonbas3

这是一个不错的开始。继续努力，如果遇到问题请告诉我们。顺便说一句，你不需要使用PHP，也可以使用JavaScript创建内容。 - Paul

我需要使用PHP来处理后端部分（获取玩家等），将使用AJAX和Jquery。无论如何，谢谢，我决定采用这种方案。 - moonbas3

使用jQuery UI中的可拖动和可放置功能，我认为它们可以帮助你:D - cfv1000

首先，让我们在纸上画出来，在桌子上你想看到什么，如果是4-4-2、4-5-1等阵型，怎么办...然后试着在球场左侧实现它。如果一切都做好了，考虑一个方法，如何将其镜像到右侧。当所有这些都完成时，可以添加弹出窗口来显示球员统计数据等内容，然后可以自定义你的球员等等... - vaso123

Answer 1

像cfv1000所说，你应该研究jQuery UI中的draggable和droppable。

---

这是我为你做的一个开端，它还不完整。

使用您元素的标识符，只需像这样调用draggable()：

$("#GKRedTeam").draggable();
$("#GKBlueTeam").draggable();

..并且在许多即将到来的添加中 - 为其设置适当的HTML和CSS属性。

JsFiddle演示

- urbz

---

假设我要使用可拖拽/可放置功能。我该如何存储由拖放功能生成的这些位置以供日后使用？因此，当我编辑某些内容时，我希望其他人在进入我的页面时看到相同的内容。 - moonbas3

你需要使用cookie或其他相关方法进行存储。为了使可拖放元素的动画自动播放，你应该查看animate()、offset()、css()和append()。请参考此链接。或者，你可以简化操作。只需创建一个下拉菜单，并在菜单中选择形状时更改静态图像。我为你制作了类似于FIDDLE的东西。 - urbz

不，我不能只使用图像，那没什么用。我想我会将坐标（左/上）存储在我的数据库中，并仅使用预定义的形状。 - moonbas3

你已经有大胆的想法了！首先集中精力在前端上，制作一个高保真原型，然后再转向后端，这是我的建议。祝你好运！:) - urbz

我非常喜欢这个，我打算给你的另一个答案点赞！这应该被接受！！ - gsamaras

感谢@gsamaras的赞美之词。 - urbz

Answer 2

使用http://kineticjs.com/，你可以将图像导出为PNG或保存到服务器（我认为），如果想要在之后重复使用所有内容，你需要用PHP创建具有相同属性的对象并将其保存在一个数据库中，或者另一种选择是发送JavaScript对象并在不进行任何修改的情况下保存它（小心注入代码），当你需要修改图像时，从服务器加载对象/信息。

另一种选择是如果始终使用相同的浏览器，则可以使用localStorage。

查看示例http://www.html5canvastutorials.com/labs/html5-canvas-shape-tango-with-kineticjs/（单击图像以进行拖动）。

- nicearma

---

这太多了，我不是在开发游戏。感谢回答。 - moonbas3

主要的例子是游戏，但不仅限于此。对于带有数字/名称的圆形，非常容易操作，并且可拖动部分是其中一个选项，因此您可以将其用于任何想要的内容。相信我，它比jquerUI+canvas+其他工具更易于使用。 - nicearma

是的，但我需要学习它，而且我不认为我会在不久的将来用它做什么。另一方面，带有可拖动/可放置功能的jQuery UI适用于许多事情，尽管我从未研究过它，但它看起来像是我将来也可以使用的东西 :). - moonbas3

好的，我明白了，您想知道如何自己做这件事 :) - nicearma

Answer 3

请查看此代码库 jquery-matchcenter

一个交互式足球场的 JQuery 实现

- iMezied