javascript - 在移动设备上可玩的简单 HTML5 游戏使用什么

Question

关闭。这个问题是opinion-based .它目前不接受答案。












想改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它.

7年前关闭。




Improve this question




在工作中，我正在开发这款“神秘”型(2D)游戏，用户在房间/位置周围，点击对象(对象/项目/人)并获得某种形式的反馈，如消息、聊天(想想 RPG 聊天) 或找到一些项目。

目前使用的技术

目前它使用纯 HTML/CSS 开发，其中一切都是 div。动画根据适用性使用 CSS3 动画或 jQuery 动画。使用简单按钮实现的聊天(点击时，根据回复做某事)。涉及游戏阶段的平移 - 可视区域小于实际游戏阶段。因此，用户将通过点击和拖动来拖动舞台。

问题

此处的详细信息并不重要……如果您愿意，您可能只想浏览此部分

最有问题的部分是 性能 .在移动设备上，像这样的简单 2D 游戏非常生涩。点击不是真正响应，有时需要更多点击才能注册。我们已经尝试过尽可能使用 CSS 动画和变换。

第二个问题是调试 .由于该游戏是在客户端的应用程序上玩的，该应用程序将自己的游戏嵌入到应用程序浏览器/ WebView 中。调试变得更加复杂(没有 Chrome usb/远程调试，目前我们使用 Firebug Lite - 这很痛苦并且缺乏功能......)。性能也进一步受到影响。似乎还有一些奇怪的错误，例如在错误时间运行的 jQuery 动画回调。 View 意外滚动。有时对象的点击区域偏离实际对象 - 当用户平移舞台时，图形按预期移动，但点击区域偏离对象 - 例如。点击对象的右侧会触发它，但不会点击对象(这发生在特定品牌的某些设备上)

有什么建议吗？

对于这种类型的游戏，是否适合游戏引擎？哪一个？我看到的大多数更多是针对更复杂的游戏，并且可能包含过度杀伤力。

使用 HTML5 Canvas 可以解决我的图形性能问题吗？另一个游戏是使用 ImpactJS 开发的，它的类型不同，性能还可以。但是有了这个基于聊天和点击(交互)的游戏，我想知道是否真的需要这么大的框架。

Answer 1

轻敲的问题在于手机处理的点击与触摸不同:每次点击都有一个延迟(如果我没记错的话，是 300 毫秒)，在此期间它等待查看用户是否执行了双击。这通常是移动设备上大部分迟缓的来源。

您从未描述过究竟是哪个部分导致游戏表现不佳。如果屏幕上有大量元素，每个元素都有自己的 CSS(尤其是阴影、动画等 CSS)，它可能会减慢您的游戏速度。

在这里使用 Canvas (并放弃 jQuery 以从应用程序中获得最大性能)可能是一个好主意。没有任何庞大的框架/引擎。使用 Canvas 还可以帮助您解决您在调试中描述的问题 - 虽然您将无法检查 Canvas 上的每个元素，但像移位的对象/点击区域这样的事情不会像所有事情一样发生(除了聊天 - 我强烈建议您不要在 Canvas 上渲染文本，因为它非常慢)位于单个元素中，所有分层都将发生在 Canvas 本身上，而不是 CSS。

但不要忘记:虽然设计良好的 Canvas 应用程序可能肯定会胜过您目前拥有的应用程序，但如果做得不好，它的性能也会更差。