Play online
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.
—EDIT—
6 Likes
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
Thanks!
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.
2 Likes
Seems failed to use ecsy 
, 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 
.
https://raw.githack.com/gonnavis/annihilate/MutantModel/index.html
1 Like
If no XState, I definitely can’t write such a complicated logic.
And it would still be very easy to extend. 
https://raw.githack.com/gonnavis/annihilate/MutantModel/index.html
1 Like
Add paladin model with shield.
Demo: Annihilate - js action game
Video: https://twitter.com/gonnavis/status/1461371351197880325
1 Like
Add Maria model.
Demo: Annihilate - js action game
Demo: Maria vs Paladin: Annihilate - js action game
Video: https://twitter.com/gonnavis/status/1462649045298532356
Add WhirlWind attack & SwordBlaster.
Demo: Annihilate - js action game
Video: https://twitter.com/gonnavis/status/1463220288468905987
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
Great! I really like it!
1 Like
