var field = document.getElementById('field'); var player = document.getElementById('player'); field.oncontextmenu = (e) => { var xposition = (e.clientX - player.offsetLeft - player.offsetWidth/2); var yposition = (e.clientY - player.offsetTop - player.offsetHeight/2); player.style.transform = "translate("+ xposition + "px," + yposition + "px)"; e.preventDefault(); } #field{ width: 500px; height: 500px; background-color: #999; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #player{ background-color: #f30f4f; width: 50px; height: 50px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; transform-origin: 25px 25px; transition: all 0.3s linear; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="layout.css"> <title>TESTING</title> </head> <body> <p> Right click in the grey box </p> <div id="field"></div> <div id="player"></div> <script src="layout.js"></script> </body> </html> En lugar de transition: all 0.3s linear; ¿Hay alguna manera de hacer que se mueva fe 2px por 0.3s? En este momento, si el jugador se mueve una distancia más larga, se mueve más rápido que si se mueve una distancia corta (ya que tiene que moverse más en 0.3 s): me gustaría que fuera la misma velocidad constante.
Debe calcular la distancia entre las posiciones actual y objetivo y dividirla por la velocidad deseada para obtener la duración del movimiento:
var field = document.getElementById('field'); var player = document.getElementById('player'); var position_current = {x: -25, y: -25}; // current position var speed = 200; // pixels per second field.oncontextmenu = (e) => { var position_new = { x: (e.clientX - player.offsetLeft - player.offsetWidth/2), y: (e.clientY - player.offsetTop - player.offsetHeight/2) } var distance = Math.hypot( position_new.x - position_current.x, position_new.y - position_current.y, ); player.style.transitionDuration = (distance/speed) + 's'; player.style.transform = "translate("+ position_new.x + "px," + position_new.y + "px)"; position_current = position_new; e.preventDefault(); }