Annihilate - js action game

Play online


Maria and Paladin

use mixamo Mutant model

use mixamo Paladin model

use mixamo Maria model

use self rig-and-animated naive model

repo: GitHub - gonnavis/annihilate: js action game

An action game prototype made in 2018.

Now open-sourced and try to optimize it with ecsy.js.




hello , it is very hard to test with w,s,a,d key on azerty keyboard . up/down/left/right key should be more convenient .

i like it

1 Like

Cool. I remember considering ecsy for a project a while back. Never got around to it though. Would you say it made the dev process any easier or the code any clearer?

Thanks! Sorry for not considering this situation.

I recalled that @felixmariotto has solution for it, I’ll try to copy the logic.

1 Like


I have been looking for good programming theory. At that time, I thought StateMachine was very good. But for me personally, I can only design a good StateMachine when there are few states. Once there are more states, it is difficult to deal with clear ideas. The logic of this game prototype is already very messy and hard to add new feature, this is why I didn’t open it at that time.

Until a while ago, I saw that a PR used ECS, and Mr.doob recommended ECSY. Through searching, I learned that this is a commonly used programming method in games, not only the logic is clearer and more flexible, but the performance is also better. After viewing the source code of examples, I also think it is true.

Would you say it made the dev process any easier or the code any clearer?

Still trying, but I think and hope it will.

1 Like

Very interesting. I might have to look into it again then. Thanks for sharing!

1 Like

Used event.code instead of event.key for physically based key positions.
And added a second key group up down left right num4 num5.


Seems failed to use ecsy :disappointed_relieved:, currently I can’t make good use of it.

But successfully switched from state-machine.js to XState. I feel it’s more powerful, flexible.

And has wonderful state diagram plotter:

state diagram of role: annihilate - role | XState Visualizer

state diagram of enemy: annihilate - enemy | XState Visualizer

It should be easier to add new features afterwards.

demo: Annihilate - js action game

Doing: Use mixamo mutant model: Annihilate - js action game

1 Like

Preliminary completion of using the model of mixamo mutant as a role.
Super fluent than my self rig-and-animated naive model :wink:.

1 Like

If no XState, I definitely can’t write such a complicated logic.
And it would still be very easy to extend. :v:

1 Like

Add paladin model with shield.
Demo: Annihilate - js action game

1 Like

Add Maria model.
Demo: Annihilate - js action game
Demo: Maria vs Paladin: Annihilate - js action game

Add WhirlWind attack & SwordBlaster.
Demo: Annihilate - js action game

Add Hadouken, Shoryuken, etc. Demo, Video.

Current full key map:

J = Attack
J + J + J = Combo
J hold charge1 + J + J = Fast Combo
J hold charge2 + J + J = Sword Blaster
J & K & L = Pop
K = Jump
K + K = Double Jump
K + J = Jump Attack
K + J hold = Earthquake
L hold = Block
L hold + S + D + J = Hadouken
L hold + D + S + D + J = Shoryuken.
L hold + S + A + K = Tatsumaki Senpukyaku.
U hold = Whirlwind
I = Dash
I + J = Dash Attack
O = Launch

Add Rebound. Demo, Video.

Great! I really like it!

1 Like

Add some preliminary Cloud & BirdFlock decorations. Demo, Video.

1 Like

Added Boss. Demo, Video.

1 Like