Add animation when ball explodes

[ketanhwr]

Currently there are no animations when a ball explodes. It will be a really nice enhancement!

[dxr27kejj]

Hello! I want to help with this issue. I am new to github, do you mind give me some hints about what kind of animation you would like?

[ketanhwr]

@dxr27kejj, you can take a look here

I only want the animation where when the ball explodes, you can see all the balls going in their respective directions.

[dxr27kejj]

@ketanhwr , could you please give me some direction? I can only add animation with code like "transition: left 0.5s ease-out 0s;" and it requires that there is reference linked to the object. However in this project, it seems that the web is repaint each grid depending on how many circles in the counterMatrix array. In other words, the states are separate. And how can I achieve animation under this circumstance?

[ketanhwr]

transition: left 0.5s ease-out 0s; these animations are part of CSS, but the game is written in Javascript. So in order to animate them, you probably need to tweak around with the initialise() function in script.js. The immediate solution that I can think up of, is adding a function showAnimation() which then, obviously, would have time interval lesser than the updateMatrix() function.

[dxr27kejj]

@ketanhwr I have thought about it for a day, but all my solution are too complicated like using an array memorizing the current and final location of each arc and move towards the final location 15% of the distance(if the time interval is 20ms). I am still new to javascript, maybe I need more practice to tackle a problem like this.

[ketanhwr]

@dxr27kejj, that'll work for now! Give it a try 🙂

[lizardscruff]

I'll fix this if it wasn't resolved. Can I work on this?

[ketanhwr]

@lizardscruff yeah you can work on it

[lizardscruff]

Ok, so you want an animation every time a ball explodes. I am unfamiliar with this game, so by ball exploding you mean you want all balls that changed from red to green to explode(animation like boom! fireball!) and vice versa? Or do you want them to blast out and orbit each other just like in the video?

[ketanhwr]

@lizardscruff blast out.

[GnsP]

I have made a PR implementing the explode animation using requestAnimationFrame. A demo of the same can be checked at gnsp.in/chain-reaction.