javascript - JQuery中的战斗系统

Question

我想用 JQuery 为浏览器游戏创建一个非常简单的战斗系统。我的想法是我有战斗统计数据(我已经有了)，我想以一种很好的图形方式将它们呈现给用户。

如果你玩过 shakes and fidget 游戏，你就会明白我在问什么。如果不是，则认为两方在打架，观想两个图像。第一方攻击，然后第二方，然后第一方再次攻击……

理想情况下，每次一方攻击时，我应该显示造成的伤害(可能就像在与该方相关的图像上方闪烁伤害)。然后健康表下降(我实际上有那个酒吧，所以这不是问题)。

我的主要问题是如何以一种看起来像是战斗故事解开的方式来做到这一点。它应该有点像计时器吗？然后，我如何真正以一种很好的方式呈现闪烁的值？

任何有关该主题的相关教程或资源将不胜感激:)

请注意，我正在寻找代码帮助，更好的示例，这将帮助我实际编写代码。

Answer 1

你好像在说FF7之类的东西，攻守交替。

界面

---

您可能想从 WoW/Rift 类型的 MMORPG 中记下笔记:

• 动画:数字命中/防御点以完全不透明的方式显示，然后在大约 2 秒的时间内向下滚动并淡出(作为一个流畅的动画)
• 一种颜色的攻击，另一种颜色的防御
• 一些具有统计意义的东西(罕见/好的命中)以更大的字体和可能不同的颜色出现
• 位于视觉/Angular 色附近、屏幕中心附近或 Angular 色上方

编程语言

---

虽然它是可行的，但带有这么多动画的东西在 JavaScript 中可能会非常麻烦(不是代码，而是处理)。因为您想要流动性，所以 Flash/Java 之类的东西可能是 Web 界面的最佳选择。然而，如果你想用纯 JavaScript 来做，jQuery/jQueryUI 有一堆事件/缓动。

快速示例

---

为了说明我的观点，这里有一个 jFiddle (和 updated jsFiddle )。

注意:这仅演示了使用不透明度淡出和使用顶部定位的动画，摆弄topStop、speed 和计时器持续时间将帮助您满足您的特定需求。

编辑

---

这个答案是旧的(2011 年)，现在是 2015 年。随着 HTML5 Canvas、WebGL 和 ASM-JS 等技术的出现和进步，您可以在浏览器中进行更强大的游戏创建/管理。例如，看看 EPIC-games 正在做什么。不再需要依赖 Java、Flash 或 Silverlight 之类的东西。也就是说，构建任何足够健壮和高性能的东西都需要一些时间。