寻找设计/建筑建议，为一个简单的HTML游戏

Question

试想一下，HTML页面是一个游戏表面（见图片）。
用户可以有ň他的页面上板（蓝色的div）号。每块电路板都可以移动，重新调整大小，重新标记，创建并移除。

每个板子里面有m数字（紫色divs）。这些用户中的每一个都可以在板内或另一块板上移动，重新调整大小，更改颜色和标签，删除，添加新的。
游戏的目标并不重要，但让我们说这是重新排列数据以某种方式让他们消失。

但目标程序员是保存整场比赛表面数据库的网站的所有用户，并当他返回到加载它以后。

所以，我怎么去了解客户端和数据库之间的数据交换？

以下是我认为它可以，但也许有更好的方法。
在数据库中，我想创建表用户，板和数字。

然后我可以选择所有属于一个用户，并创建自己的HTML页面（面）。

但随后，用户将能够改变这一切，我不知道如何来跟踪这些变化以及如何将它们保存回数据库板和数字，的这些属性。这是应该使用JSON的情况吗？

Answer 1

我假设这是主要与JavaScript在玩时，他们正在玩，你已经知道如何做到这一点。那么，各图中有propertes，像这样： -board（它在一个） -id -label -width -height -color -x位置（相对于板） -y位置（相对于板）

所以这些属性中的每一个都将在播放时保存在一个javascript变量或数组中。同样，主板还具有性能： -id -label -width -height -color -x位置（相对于页） -y位置（相对于页） 所以，你会认为这些在JavaScript变量以及。

当你保存你只需要将所有这些变量传递给服务器。所以用你的JSON字符串来制作你的XHR。一旦你的服务器收到请求，你可以将JSON转换回变量，你可以保存在数据库中。您计划数据库的方式听起来很合适。

要恢复，您只需为该用户选择合适的信息（使用普通页面加载或XHR）并使用JavaScript来移动所有内容以创建和定位需要去的对象。

Answer 2

是的，如果Javascript是一个选项，那么基本上你应该生成一个文档（xml或json或纯文本，并不重要，尽管json可能是最简单的，如果你使用javascript）序列化的电路板状态。

然后，您可以跟踪一个JavaScript对象的所有更改的客户端，并具备JavaScript的序列化作为一个字符串，然后你使用XHR传输到服务器。

我会说，在这种情况下，你最好每个对象都是某种类型的DOM元素（div，span，whatever），因为浏览器可以为你做所有的工作找出立场等，只是绝对定位，并从那里工作。