我目前正在构建一个小型回合制迷宫游戏。迷宫是 2D 的，由瓷砖组成 - 非常类似于 Zelda 地图游戏。
我至少有 256 种不同的瓷砖可供选择，我将在不同的区域重复使用它们，例如建筑物、树木、墙壁、草、水等。
我的计划是在不使用 jQuery 以外的任何其他框架进行 Ajax 和 DOM 操作的情况下让它尽可能流畅地运行。
游戏引擎是服务器端的，所以客户端浏览器不执行任何人工智能逻辑等。它只是请求游戏的“当前状态”，然后接收对象/敌人等。但它已经下载了关卡图从头开始。关卡可能是 256x256 块，每个块可以是 32x32 像素……还没有决定块的大小，但我认为这是最优化的。不过可能更大。
玩家视口可能会占用大约 9x9 块或 15x15 块。然后您将滚动查看动作并四处走动。
由于它是回合制的，所以不用担心“屏幕闪烁 60 fps”在这里和那里一次闪烁是可以的，但并非一直如此。
我的问题是：在客户端生成地图的最佳方式是什么？
- 1）我是否应该将地图作为“数据”（json或类似的）传输，然后使用CSS生成DIV以在客户端构建tilemap。这将最大限度地减少带宽，但我担心当我滚动地图时客户端中的 DOM 会很辛苦？
或者
- 2）我是否应该预先渲染完整的瓷砖地图或地图的较大部分（正方形），以便浏览器处理更少的 DIV。这将扼杀地图的可重用性，因为它们几乎没有图案化，所以它只是“纯图形下载”+游戏碰撞所需的瓷砖地图信息等。它应该更快地滚动浏览器。
我无法弄清楚使用第二种方法下载后是否会占用更多或更少的资源，因为客户端/浏览器将不得不为所有较大的“预渲染”块分配内存。但是，如果它是来自 1) 的“数据最优”解决方案，它还将生成许多带有类的 DIV，并以某种方式在浏览器 DOM 中呈现这些。
SVG 和画布目前不是一个选项，除非有人可以为我提供一种将 alpha 透明 PNG 转换为画布的快速方法，并且仍然能够使用视口滚动（尽管有尽可能多的 FPS，也就是超过 15 fps )