Animate div towards mouse coordinates using JavaScript on click

Question

I am trying to get the ball element to both move and shrink towards the goals on mouse click. I have created a function that grabs the coordinates of the mouse click in the goals, however I have been struggling with the ball animation.

I thought about using keyframes, but I don't know how to use keyframes in JavaScript. I also tried doing a transform - which I know wouldn't work, but tried as you can see in the move() function.

This is my javascript/html file

 function goal(){ var score = getScore(); increaseDifficulty(score) document.getElementById("score").innerHTML = score + 1 ; var b = getShotCordinates(); move(b[0],b[1]); } function save(){ resetScore(); } function resetScore(){ document.getElementById("score").innerHTML = 0; } function getScore(){ return parseInt(document.getElementById("score").innerHTML); } function move(x,y){ const fxMove = `translate(${x}px, ${y}px);`; const fxAnim = `transition: transform 0.5s; transform: translate(0, 0);`; document.getElementById("ball").style.transform = translate(x,y); } function getShotCordinates(){ var e = window.event; var Cordinates = [e.clientX, e.clientY]; console.log(Cordinates[0] + " - " + Cordinates[1]) return Cordinates; }

 <BODY> <div id="canvas" class="field"> <div id="goals" class="goals" onclick="goal()"> </div> <div id="goalkeeper" onclick="save()"> </div> <div id="kick-off"> <div id="ball" class="ball"> </div> </div> <div id="score-container"> <div id="counter"> <h1 class="counter-text">Score</h1> <h1 class="counter-score" id="score">0</h1> </div> </div> </div> <script src='js/script.js'></script> </BODY>

Just in case, this is my canvas/UI

Inside of the move() function, it might not be working because in its last line, you are not defining transform with a property inside quotation marks. Line 24 — alejo742
– alejo742, Commented Dec 27, 2022 at 14:16
Yeah, I originally was using this, but I think I removed them during edit, but sadly this doesnt give the result I want — GrahamNorton
– GrahamNorton, Commented Dec 27, 2022 at 14:18

Omar Atri · Accepted Answer · 2022-12-27 14:27:19Z

If you are looking for something like this:

const div = document.querySelector("div"); document.addEventListener("click", (e)=>{ console.log(e) div.style.top = e.clientY + "px"; div.style.left = e.clientX + "px"; })

div{ width:50px; height:50px; background:red; border-radius:50%; position:absolute; transition:.3s; transform:translate(-50%, -50%); }

<div></div>

Just give the ball position absolute, and on every click event change the top and the left of the ball with javascript.

Collectives™ on Stack Overflow

Animate div towards mouse coordinates using JavaScript on click

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related