Javascript HTML5画布-移动对象的最佳实践

我正在使用Java和JavaScript创建一个游戏。游戏将涉及玩家在地牢中导航。我的问题是，对墙、门等对象进行编码的最佳方式是什么？我被困在两个明显的选择之间

在画布上绘制每个对象，并根据玩家的移动方式移动对象

将所有对象预先绘制到背景图像上，然后根据玩家的移动方式移动背景图像

我认为选项2会更简单，但我仍然需要检测物体的位置，这样玩家就不能只是走过一堵墙

---

基本上，我想知道是否有人能从经验中说出设计游戏的最佳方法，以及在这方面是否有任何资源？

角色扮演游戏的性能要求低于例如街机游戏

在他们的新位置上重新绘制所有内容可能就可以了

但即便如此，您也可以通过将背景（不经常移动）放置在与经常移动的角色不同的图层上来获得性能

一个层可以像背景img元素一样简单，由CSS移动，也可以是一个独立的背景画布，在顶级玩家画布下分层

好消息是，您可以从一个层开始，然后在性能出现问题时相当容易地更改为多个层

没有“设计游戏的最佳方法”，但这里有一些建议：

• 很快在项目中运行一个小型工作原型
• 对原型进行增量更改
• 测试，测试，测试

---

免责声明：我不设计游戏，但我设计的质量控制应用程序使用了许多与游戏中使用的相同的交互技术。

如果你对制作游戏更感兴趣，而不是制作引擎，可以考虑使用现有的框架，或者我相信这两个都使用相机的概念来移动对象。如果您对不使用框架/引擎感兴趣，您仍然可以了解其他人是如何实现摄影机的，这样您就可以在世界中定位所有对象，并在世界中移动摄影机。是的，#2更简单，性能也更好。您需要对“基于瓷砖的碰撞检测”进行一些研究，以帮助您检测墙和对象。。。但这里有一些基本内容：1）墙/对象位于二维地图阵列中。2） 使用自定义getIndex（）函数将精灵的xy屏幕坐标转换为地图数组索引号。3） 如果精灵在阵列中的位置与墙或对象相同，则会发生碰撞。