javascript - 隐藏 SVG 中的关键数据

Question

我有一张为我正在开发的游戏生成的 SVG map 。我对开源游戏没有任何问题，它使用开放网络技术，如 HTML 和 SVG。那里没有问题。

但与此同时，我希望玩家无法看到或反向工程整个世界的 map (以保留真正的探索)。现在我使用 secret 且不受版本控制的种子生成 map 。因此，即使该算法是众所周知的，好奇的玩家也可以使用开源代码来生成“类游戏世界”，但不是那个确切的世界。这解决了“全局”问题。

但由于 SVG 在页面上呈现为单个 Voronoi 图，所以所有数据(我不介意点的坐标)都是可提取的。可以从 SVG 中获取资源、土地类型、生物群落、气候等数据，以便在寻找合适的定居点位置方面占上风。

知道如何防止这种情况发生吗？玩家的视野有限，所以我想到了:

• 根本不渲染整个 Voronoi 图(只是可见部分)，但这可能会很棘手(也许，还没有研究过)，
• 将资源/地 block 数据插入 SVG 图中，仅在可见位置

我可以看到这两种方法的好处，如果做得正确，它甚至可以提高性能(不渲染整个事物/用更少的数据渲染)并在不影响性能的情况下带来更大的世界。

还有其他想法/编程/架构方法可以帮助解决这个问题吗？

(我正在使用 Vue.js、d3.js、svg-pan-zoom 和 Laravel 后端，以防万一。)

Answer 1

您提出的想法是完美的，但是要实现它们，您需要努力工作，并花费很多时间。

我有一个建议。适用于大多数用户。也许有些用户会“破解”它。但我相信它在 95% 的情况下都有效。

您可以创建一个非常大的矩形，从左上角点 0,0 到右下角点。该矩形将是白色的，并且会覆盖所有其他形状。

这样，如果有人下载 SVG，我们将什么也看不到。只是一个大的白色矩形。

在你的游戏 HTML 中，你可以添加一个 CSS 选择器来隐藏这个矩形。

如果按照这种方法，大多数用户(没有照片编辑软件的用户)将无法看到 map 。

知道如何检查 HTML 中的元素的用户可能会看到 map 。但我相信大多数看到白框的人都不会相信后面有东西。

我认为这是一种简单的临时方法，您可以在采取其他更具防御性的方法之前使用。