Условие if работает только с предупреждением, и позиция сбрасывается?

Question

Код состоит в том, что игрок идет туда, куда нажимает пользователь, но теперь я хочу, чтобы персонаж посмотрел на ось X, куда он идет. Проблема в том, что он работает только тогда, когда у вас есть предупреждение, но только если предупреждение выдает ошибку, потому что, если предупреждение не выдает ошибку, оно не работает. Другая проблема заключается в том, что transform translate3d удаляется, после чего игрок возвращается в ту же позицию, хотя изменяется scaleX.

Я новичок в jquery и понятия не имею.

$(document).on("click mousedown", "#Park", function(e) {
    var x = e.clientX;
    var y = e.clientY;
    var newposX = x - 60;
    var newposY = y - 60;
    var n = $(".circle").offset()
    if (newposX < n.left) {
        $(".circle").css("transform", "scaleX(-1)");
        alert(ok)
    }
    $(".circle").css("transform", "translate3d(" + newposX + "px," + newposY + "px,0px)");

    setTimeout(function() {
        $(".circle3").css("display", "none");
        $(".circle2").css("display", "block");
    }, 2000);
    $(".circle2").css("display", "none");
    $(".circle3").css("display", "block");
});

Answer 1

Сразу после условного выражения вы перезаписываете transform новым значением, что означает, что scaleX() немедленно перезаписывается, если ваш код не обрывается на alert().

Вместо этого напишите вашусловно так, чтобы scaleX() не перезаписывался при установке translate3d():

if (newposX < n.left) {
    $(".circle").css("transform", "scaleX(-1) translate3d(" + newposX + "px," + newposY + "px,0px)");
} else {
    $(".circle").css("transform", "translate3d(" + newposX + "px," + newposY + "px,0px)");
}

В качестве альтернативы, вы можете написать это так, что, на мой взгляд, легче читать:

let transform = `translate3d(${newposX}px, ${newposY}px, 0px)`;
if (newposX < n.left) {
    transform = 'scaleX(-1) ' + transform;
}
$('.circle').css('transform', transform);