寻找简单的HTML游戏的设计/架构建议

Question

想象一下，HTML页面是一个游戏 surface （见图片） 用户可以在其页面上拥有 n 个主板（蓝色div）。每个板都可以移动，重新调整大小，重新标记，创建新的和删除。

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

但程序员的目标 为网站的每个用户保存数据库中的整个游戏界面，加载以后他回来时。

那么，我该如何进行客户端和数据库之间的数据交换呢？

这就是我认为可能的方式，但也许有更好的方法 在数据库中，我想到创建表用户，板和数字。

然后我可以选择属于用户的所有内容并创建他的HTML页面（表面）。

但是，用户将能够更改电路板和数字的所有属性以及我不知道如何跟踪这些更改以及如何将它们保存回数据库。这是应该使用JSON的情况吗？

Answer 1

是的，如果Javascript是一个选项，那么基本上你应该生成一个文档（xml或json或纯文本，真的不重要，虽然json可能是最简单的，如果你使用javascript）描述序列化董事会的状态。

然后，您可以在javascript对象中跟踪客户端的所有更改，并将javascript序列化为字符串，然后使用XHR将其传输到服务器。

我会说，通常情况下，在这种情况下，你最好将每个对象作为某种DOM元素（div，span，等等），因为这样浏览器可以为你完成所有的工作在这些位置等等，只要绝对定位并从那里开始工作。

Answer 2

我认为这主要是在他们玩游戏时使用javascript并且你已经知道如何做到这一点。好吧，每个人都有财产，如下： -board（它所在的那个） -ID -标签 -宽度 -高度 -颜色 -x位置（相对于板） -y位置（相对于董事会）

因此，每个属性都将在播放时保存在javascript变量或数组中。同样，董事会也有财产： -ID -标签 -宽度 -高度 -颜色 -x位置（相对于页面） -y位置（相对于页面） 所以你也会在javascript变量中保存它们。

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

要恢复，您只需为该用户选择适当的信息，并（使用正常的页面加载或XHR）并使用您的javascript移动所有内容来创建和定位他们需要去的对象。