Using Javascript, I successfully translated a circle from the center of the canvas to the upper left. Now, my aim is to create a function that randomly selects coordinates within the canvas and translates the object accordingly. However, I'm encountering issues with this process.
I am starting to suspect whether only one translation can be called on an element within CSS. Although I have not found any documentation stating such restrictions, it seems like this might be the case based on my observations.
The core problem lies in:
function change_level() {
var level = document.getElementById("level");
level.parentNode.removeChild(level);
var ball = document.getElementById("init_pos");
ball.style.backgroundColor = "orange";
ball.style.borderRadius = "25px";
ball.style.transform = "translate(-600%, -647%)";
setTimeout(ball_movement(ball), 3000);
ball.style.transition = "background-color 2s ease-in, transform 3s ease";
}
function ball_movement(ball) {
var movements = 5;
var x;
var y;
for (var i = 0; i < movements; i++) {
x = getRandomArbitrary(-800, 800);
y = getRandomArbitrary(-800, 800);
ball.style.transform = "translate("+x+", "+y+")";
ball.style.transition = "transform 3s ease";
console.log(x);
}
}
I have shared the code on jsfiddle, but due to the canvas size differences, the calculations are not functioning as expected.