Making a css animate class be triggered by Javascript

Question

So I was trying to make this code for a Dino game (chrome game) and I'm trying to make it jump using an onclick function and I saw a tutorial that said you can link css animations to a Javascript onclick function if you know how to fix this or an alternative solution please help
https://code.sololearn.com/W69d5UN45p2Q/?ref=app

Answer 1

well...
if it is for a game, you must have more control on the css animation than by defining it with css: you should use web animation, the JS API to define and control more precisely css animations ;)

here are two useful links to read and dive into:

https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API

https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API

that's a lot of informations, with a lot of links to explore ;P

so, I made a basic example, wich handle the jump on click wich you requested, plus a collision detection, a scoring system, and a game over handling:

https://code.sololearn.com/W7mBS2k0G9t1/?ref=app

I've cleaned/tidy a bit your html/css codes, made some modification/additions, commenting old ones... and wrote all the js (keeping your commented attempt wich lacks of closing curly braces ^^): explore/study it as well as mdn doc linked above, and feel free to ask for specific questions :)

hold tight and keep coding!

Answer 2

It's simple,
Detect the target element's click event then add a class which contains an animation, in this case:
const element = document.querySelector("targetElement")
element.addEventListener("click", () => {
element.classList.add("my-animation")
});

Cheers✌

Answer 3

Thanks visph and Isaac Fernandes