javascript - JS移动的小车实现思路是怎样的

问题描述

问 题

我个人的思路是获取单击时鼠标的坐标以及小车的坐标，计算这两点构成的直线与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 });
}

解决方案

疑问

我个人的思路是获取单击时鼠标的坐标以及小车的坐标，计算这两点构成的直线与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'
    });
}

这篇关于javascript - JS移动的小车实现思路是怎样的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！