javascript - Apakah idea untuk melaksanakan kereta bergerak JS?

Question

Idea peribadi saya adalah untuk mendapatkan koordinat tetikus dan koordinat kereta apabila mengklik, hitung sudut tan antara garis lurus yang dibentuk oleh dua titik ini dan paksi X, dan gunakan setInterval() untuk meningkatkan X- arah paksi kereta sebanyak 1px dan paksi-Y setiap milisaat (1*tan)px;
Tetapi terdapat masalah dengan pelaksanaan kod, dan nilai tan yang dikira terus berubah.
Saya sangat keliru. Saya tidak tahu sama ada ia masalah dengan pemikiran saya atau masalah dengan kod saya memohon semua pakar untuk membantu saya memikirkannya. Saya harap ada kod rujukan yang sepadan. Saya telah mencarinya di Google tetapi tidak dapat mencari penyelesaian. Pengajar meminta saya menyerahkannya pada pagi esok, saya benar-benar tidak tahu apa yang perlu dilakukan dengannya)

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

Soalan

Idea peribadi saya adalah untuk mendapatkan koordinat tetikus dan koordinat kereta apabila mengklik, hitung sudut tan antara garis lurus yang dibentuk oleh dua titik ini dan paksi X, dan gunakan setInterval() untuk meningkatkan X -arah paksi kereta sebanyak 1px dan paksi-Y setiap milisaat Tambah (1*tan)px;
Tetapi terdapat masalah dengan pelaksanaan kod, dan nilai tan yang dikira terus berubah.
Saya sangat keliru. Saya tidak tahu sama ada ia masalah dengan pemikiran saya atau masalah dengan kod saya memohon semua pakar untuk membantu saya memikirkannya. Saya harap ada kod rujukan yang sepadan. Saya mencarinya di Google, tetapi saya tidak dapat mencari penyelesaian. Pengajar meminta saya menyerahkan Kod pagi esok, saya benar-benar tidak tahu apa yang perlu dilakukan dengannya)

Kod boleh guna

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

Letakkan kereta dahulu, kemudian dapatkan kedudukan clienX di bawah titik tetikus, gunakan clientX ini untuk menolak $('#car')offset().kiri kereta, tentukan arah berdasarkan nilai positif dan negatif, tentukan jarak berdasarkan nilai mutlak, dan kemudian ubah suai Hanya sebelah kiri kereta akan lakukan

Answer 3

Tidak perlu menggunakan formula mewah sedemikian Untuk gerakan seragam, darabkan kelajuan dengan masa untuk mendapatkan jarak setiap pergerakan
Semasa x, y
Sasaran x', y'
Kelajuan v
Masa untuk menyasarkan t=. (x'- x)/v
selang masa selang dT
kedudukan seterusnya x" = x + dT*v, y"=..
Hanya alihkan kedudukan ke x", y" dalam selang

Answer 4

Logiknya nampak okay, tetapi jika anda ingin mengira tan sudut antara arah dan paksi X, ia sepatutnya

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

Betul, anda menulisnya ke belakang...