javascript - JS移動的小車實現思路是怎麼樣的

Question

#我個人的思路是取得點擊時滑鼠的座標以及小車的座標，計算這兩點構成的直線與X軸的夾角tan,用setInterval()對小車每毫秒X軸方向增加1px,Y軸增加(1*tan)px;
但是程式碼實作上出了問題，計算出來的tan值在不停的變化。
很懵，不知道是思路出來問題，還是代碼上有問題，跪求各路大神解個惑，希望有相應參考的代碼~
(Google過了，木有找到解決辦法，導師讓明天早上交代碼，實在不知道腫麼辦了)

$(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);

才對呀，你寫反了…