javascript - Quelle est l'idée d'implémenter une voiture mobile JS?

Question

Mon idée personnelle est d'obtenir les coordonnées de la souris et les coordonnées de la voiture en cliquant, de calculer l'angle tan entre la droite formée par ces deux points et l'axe X, et d'utiliser setInterval() pour augmenter le X- direction de l'axe de la voiture de 1 px et de l'axe Y toutes les millisecondes. (1*tan)px ;
Mais il y a un problème avec l'implémentation du code et la valeur de bronzage calculée ne cesse de changer.
Je suis très confus. Je ne sais pas si c'est un problème de réflexion ou un problème avec le code. Je supplie tous les experts de m'aider à le comprendre. J'espère qu'il existe des codes de référence correspondants. Je l'ai cherché sur Google mais je n'ai pas trouvé de solution. Le instructeur m'a demandé de le remettre demain matin (code, je ne sais vraiment pas quoi en faire)
.

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

Answer 1

Questions

Mon idée personnelle est d'obtenir les coordonnées de la souris et les coordonnées de la voiture en cliquant, de calculer l'angle tan entre la droite formée par ces deux points et l'axe X, et d'utiliser setInterval() pour augmenter le X -direction de l'axe de la voiture de 1 px et axe Y toutes les millisecondes. Ajoutez (1*tan)px ;
Mais il y a un problème avec l'implémentation du code et la valeur de bronzage calculée ne cesse de changer.
Je suis très confus. Je ne sais pas si c'est un problème de réflexion ou un problème avec le code. Je supplie tous les experts de m'aider à le comprendre. J'espère qu'il existe des codes de référence correspondants. Je l'ai cherché sur Google, mais je n'ai pas trouvé de solution. Le moniteur m'a demandé de le remettre demain matin (Code, je ne sais vraiment pas quoi en faire)

.

Code réalisable

<code class="js">$(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'
    });
}
</code>

Answer 2

Positionnez d'abord la voiture, puis obtenez la position clienX sous le point de la souris, utilisez ce clientX pour soustraire le $('#car')offset().left de la voiture, déterminez la direction en fonction des valeurs positives et négatives, déterminez la distance en fonction de la valeur absolue, puis modifiez-la. Seul le côté gauche de la voiture fera l'affaire

Answer 3

Il n'est pas nécessaire d'utiliser des formules aussi sophistiquées. Pour un mouvement uniforme, multipliez la vitesse par le temps pour déplacer la distance à chaque fois
Actuel x,y
Cible x',y'#🎜 🎜#Vitesse v
Temps pour cibler t= (x'-x)/v
intervalle intervalle de temps dT
position suivante suivante x" = x + dT*v, y"=.. # 🎜🎜#Déplacez simplement la position vers x", y" dans l'intervalle

Answer 4

La logique semble correcte, mais si vous voulez calculer la tangente de l'angle entre la direction et l'axe X, elle devrait être

<code class="javascript">var tan = (mY - airY) / (mX - airX);</code>

C'est vrai, tu l'as écrit à l'envers...