javascript - 为浏览器游戏实现/渲染 2d 平铺 map 的好方法是什么?

标签 javascript canvas

<分区>

我制作了这个我在学习时玩过的 rpg ruby​​ 小游戏,现在我想把它制作成网页游戏。我已经设置了 Sinatra 框架来为其提供服务,所以我首先要寻找的是一种在浏览器中表示游戏 map 的方法(位置属性存储在数据库中)。

当您滚动 map 时, map 不需要刷新或动态获取(至少在这个开发阶段是这样),但是,将来允许我这样做的技术将是选择它的一个很好的理由。

我想到的事情:html 表格,html5 Canvas ,一些专门为此目的设计的 js 框架(我不知道 = 请指教)。

是的,我知道 gamequery-js 框架,但我从未使用过它,而且我不知道在我添加新功能(滚动、ajax)时它是否会减慢一切以致无法使用。

我真的不知道有任何其他选择..也许有更轻松的方法?更简单或更简约的方法?更有针对性的 js 框架是适合这项工作的工具?也许只是一些 html Canvas 代码,甚至是简单的图像映射,或者具有绝对定位的图像就足够了吗?

事情是我想从简单开始,然后逐渐变得更好,所以,正如我之前所说,我更喜欢能给我改进空间或朝着新的网络趋势前进但会也给我一开始的一点欣慰:)

所以..需要建议!并表示赞赏! :) 谢谢

附注Flash 被排除在外,因为我不喜欢它。

编辑:添加更多技术细节以更好地描述 map ,因为 charlietfl 评论它太模糊而无法给出一个好的答案:

在游戏开始时,每个新游戏的代码都会随机生成一张新 map 。 现在忘记 db,假设一个 map (比如 100x100“正方形”)存储为三维数组。 (x,y, ...) 数组的最后一个“维度”存储该 map 单元格中的人物和内容:玩家、建筑物等。 所以我所要做的就是将这些“正方形”或数组单元格渲染为浏览器中的二维平铺 map 。 希望能更好地解释它!

最佳答案

根据您的地形看起来,最简单的可能只是绝对定位的图像。如果您的 map 具有标准的平铺背景,则此方法特别有效。您可以只使用纯 CSS 渲染背景,然后在必要的地方放置地形元素。

如果您想要花哨一些,您还可以通过使用沿 y 轴移动 x 坐标的函数将您的世界坐标转换为 HTML 坐标来模拟等距投影。实际上,对于巧妙的 sprite 和 map 设计来说,这甚至不是真正必要的。

关于javascript - 为浏览器游戏实现/渲染 2d 平铺 map 的好方法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13188506/

相关文章:

javascript - 3D Engine 在旋转时拉伸(stretch)物体

javascript - 在 Canvas 中绘制图像会删除填充背景

javascript - 由于 json 中的字体样式对象,fabric js 粗体斜体不起作用

javascript - 在 Javascript 中从 JSON 数据创建饼图

javascript - 将元素 append 到 QueryList Angular

javascript - Angular force 在 url 中出现不需要的感叹号

javascript - 为什么这些圆圈会出现在我的 Canvas 上?

javascript - 将应用程序部署到 Heroku,ENV 变量不起作用

javascript - 替换 contenteditable div 中的 innerHTML

javascript - 如何使javascript Canvas 绘制更快?