javascript - Was ist die Idee, ein JS-Fahrauto zu implementieren?

Question

Meine persönliche Idee besteht darin, beim Klicken die Koordinaten der Maus und die Koordinaten des Autos zu ermitteln, den Winkel tan zwischen der durch diese beiden Punkte gebildeten Geraden und der X-Achse zu berechnen und mit setInterval () den X- zu erhöhen. Achsenrichtung des Autos um 1 Pixel pro Millisekunde und die Y-Achse erhöht sich um (1*tan)px;
Aber es gibt ein Problem mit der Code-Implementierung und der berechnete Tan-Wert ändert sich ständig.
Ich weiß nicht, ob es ein Problem mit meinem Denken oder mit dem Code ist. Ich flehe alle Experten an, mir dabei zu helfen, es herauszufinden~
( Ich habe es gegoogelt, konnte aber keine Lösung finden. Der Lehrer hat mich gebeten, es morgen früh einzureichen. Ich weiß wirklich nicht, was ich damit machen soll

$(document).ready(function() {
    // 获取鼠标坐标
    $(document).mousemove(function(e) {
        mouse.X = e.clientX;
        mouse.Y = e.clientY;
    });
    $(document).click(function() {
        // 获取点击时鼠标垫的位置
        var mX = mouse.X;
        var mY = mouse.Y;
        // 获取飞机之前的位置
        var airX = $("#air").css("left");
        var airY = $("#air").css("top");
        // 处理字符串中的px并转换为数字
        airX = airX.substring(0, airX.length - 2);
        airY = airY.substring(0, airY.length - 2);
        airX = Number(airX);
        airY = Number(airY);
        // 计算飞机与鼠标连线与X轴构成的夹角
        var tan = (mX - airX) / (mY - airY);
        console.log(tan)
        setInterval(function() {
            main(mX, mY,tan);
        }, 1)
    })
});

// 创建鼠标对象
var mouse = {
    X: 0,
    Y: 0
}

function main(mX, mY,tan) {

    // 计算每毫秒小飞机前进的距离
    // 设定X轴前进1px,Y轴前进1*tan px
    var mX = mX + 1;
    var mY = mY + tan;
    ff(mX + "px", mY + "px");
}

function ff(X, Y) {
    $("#air").css({ "top": X });
    $("#air").css({ "left": Y });
}

Answer 1

疑问

我个人的思路是获取单击时鼠标的坐标以及小车的坐标，计算这两点构成的直线与X轴的夹角tan,用setInterval()对小车每毫秒X轴方向增加1px,Y轴增加(1*tan)px;
但是代码实现上出了问题，计算出来的tan值在不停的变化。
很懵，不知道是思路出来问题，还是代码上有问题，跪求各路大神解个惑，希望有相应参考的代码~
(Google过了，木有找到解决办法，导师让明天早上交代码，实在不知道肿么办了)

可行的代码

$(document).ready(function() {
    var timer; 
    // 在点击的时候获取鼠标坐标
    $(document).click(function(event) {
        // 获取点击时鼠标垫的位置
        var mX = event.clientX; 
        var mY = event.clientY; 
        // 获取飞机之前的位置
        console.log(event); 
        var airX = $("#air").css("left");
        var airY = $("#air").css("top");
        // 处理字符串中的px并转换为数字 可以简化成 
        airX = parseFloat(airX); 
        airY = parseFloat(airY); 
        
        
        var Xi = (mX - airX) / 50; 
        var Yi = (mY - airY) / 50; 

        clearInterval(timer); // 把上次的清掉 
        timer = setInterval(function() { 
            renderInc(Xi, Yi);
        }, 16) // 16 
    })
});

// 增量渲染 
function renderInc(Xi, Yi) {
    $air = $("#air"); 
    var x = parseFloat($air.css('left'))
    var y = parseFloat($air.css('top'))

    $("#air").css({
        top: y + Yi + 'px', 
        left: x + Xi + 'px'
    });
}

Answer 2

先给小车定位，然后获取鼠标点下的位置clienX,用这个clientX 减去 小车的$('#car')offset().left，根据正负值决定方向，根据绝对值决定距离，然后修改小车的left就行了

Answer 3

用不着搞那么高大上的公式，匀速运动用速度乘时间就得到每次移动的距离
现在的 x,y
目标　x',y'
速度　v
到目标的时间　t= (x'-x)/v
interval 时间间隔　dT
下一次位置　next x" = x + dT*v, y"=..
在interval中把位置移到　x",y"　就行了

Answer 4

逻辑看起来没问题，不过，如果你要算方向与 X 轴的夹角的 tan 的话，应该是

var tan = (mY - airY) / (mX - airX);

才对呀，你写反了……