#我個人的思路是取得點擊時滑鼠的座標以及小車的座標,計算這兩點構成的直線與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 });
}
疑問
可行的程式碼
先給小車定位,然後取得滑鼠點下的位置clienX,用這個clientX 減去小車的$('#car')offset().left,根據正負值決定方向,根據絕對值決定距離,然後修改小車的left就行了
用不著搞那麼高大上的公式,勻速運動用速度乘時間就得到每次移動的距離
現在的x,y
目標x',y'
速度v
到目標的時間t= (x'- x)/v
interval 時間間隔dT
下一次位置next x" = x + dT*v, y"=..
在interval中把位置移到x",y" 就行了
邏輯看起來沒問題,不過,如果你要算方向與 X 軸的夾角的 tan 的話,應該是
才對呀,你寫反了…