i would like to create a pretty simple combat system in JQuery, for a browser game. The idea is that i have combat statistics ( i already have that ), and i want to represent them back to the user in a nice graphical manner.

If you have played the game shakes and fidget, you can already see what i'm asking. If not, think that two parties are fighting, visualize two 开发者_JAVA百科images. The first party attacks, then the second, then the first again and so on..

Ideally, each time a party attacks, i should show the damage done (probably like flashing the damage right on top of the image associated with that party). Then the health meter goes down (i actually have that bar, so it's not a problem).

My main problem, is how to do that in like a manner that seems like the story of the battle unravels. Should it be sort of like a timer ? And then, how do i actually present flashing values in a nice manner ?

Any related tutorials or resources on that topic would be greatly appreciated :)

NOTE that i'm looking for code help, samples even better, that would help me in actually coding that.

---

It seems like you're talking about something like FF7, alternating offense/defense.

Interface

---

You might want to take a note from WoW/Rift-type MMORPGs:

• animation: numeric hit/defense points appear in full opacity and then it scrolls down and fades out (as one fluid animation) over a period of something like 2 seconds
• attacks in one color, defense in another color
• something of statistical significance (rare/good hits) appear in larger font and possibly different color
• positioned right near the visual/character, near the center of the screen, or above the character

Programming Language

---

Though it is doable, something with that much animation is probably going to be very cumbersome in JavaScript (not the code, but the processing). Because you want fluidity, something like Flash/Java would probably be the best for a web interface. However, if you want to do it in purely JavaScript, jQuery/jQueryUI has a bunch of events/easings.

Quick Example

---

To illustrate my point here's a jFiddle (and updated jsFiddle).

Note: this only demonstrates fading out using opacity and animation using top positioning, fiddling with the topStop,speed, and timer duration will help you cater it to your specific needs.

Edit

---

This answer is old (2011) it is now 2015. With the advent and progress of technologies like HTML5 Canvas, WebGL, and ASM-JS, you can do much more powerful game creation/management in the browser. For example, look at what EPIC-games is doing. The need to depend on something like Java, Flash or Silverlight is no longer necessary. That said, it would take some time to build anything robust and performant enough.