javascript - JS移動的小車實現思路是怎麼樣的
仅有的幸福
仅有的幸福 2017-05-19 10:17:49
0
4
674

#我個人的思路是取得點擊時滑鼠的座標以及小車的座標,計算這兩點構成的直線與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 });
}
仅有的幸福
仅有的幸福

全部回覆(4)
phpcn_u1582

疑問

我個人的思路是取得點擊時滑鼠的座標以及小車的座標,計算這兩點構成的直線與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'
    });
}
phpcn_u1582

先給小車定位,然後取得滑鼠點下的位置clienX,用這個clientX 減去小車的$('#car')offset().left,根據正負值決定方向,根據絕對值決定距離,然後修改小車的left就行了

phpcn_u1582

用不著搞那麼高大上的公式,勻速運動用速度乘時間就得到每次移動的距離
現在的x,y
目標x',y'
速度v
到目標的時間t= (x'- x)/v
interval 時間間隔dT
下一次位置next x" = x + dT*v, y"=..
在interval中把位置移到x",y" 就行了

我想大声告诉你

邏輯看起來沒問題,不過,如果你要算方向與 X 軸的夾角的 tan 的話,應該是

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

才對呀,你寫反了…

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板