獲取距離爲0

-1

我希望這個div從A點到B點，反之亦然。問題是dist變量（距離）永遠不會變爲0，它通常是1或-1（或其他一些其他值的範圍），這會導致div陷入僵局而無法到達任何地方。在我完整的代碼中，每當我打開頁面時，點A和B的位置都是隨機的。獲取距離爲0

下面的例子重現了這個問題。 要按預期設置工作#pointA { top: 5px; left: 5px; } | #pointB { top: 5px; left: 105px; }

var score = 0, points = 0, boxMode = 0, speed, speedX, speedY, angleRadians, 
 
distX, distY, dist; 
 

 
var destinationX = $("#pointB").position().left; 
 
var destinationY = $("#pointB").position().top; 
 

 
var pointAPos = $("#pointA").position(); 
 
var pointAx = pointAPos.left; 
 
var pointAy = pointAPos.top; 
 

 
var pointBPos = $("#pointB").position(); 
 
var pointBx = pointBPos.left; 
 
var pointBy = pointBPos.top; 
 

 
var boxPos = $('#box').position(); 
 
var boxX = pointAx; 
 
var boxY = pointAy; 
 
\t 
 
function calculateDistance(x, y) { 
 
    distX = boxX - x; 
 
    distY = boxY - y; 
 
    dist = Math.sqrt((distX*distX)+(distY*distY)); 
 
} 
 

 
function boxMove() { 
 
    angleRadians = Math.atan2(-distX, -distY); 
 
    speed = 2; 
 
    speedX = speed * Math.sin(angleRadians); 
 
    speedY = speed * Math.cos(angleRadians); 
 
\t 
 
    document.getElementById("box").style.left = boxX + "px"; 
 
    document.getElementById("box").style.top = boxY + "px"; 
 
\t 
 
    boxX += speedX; 
 
    boxY += speedY; 
 
} 
 

 
function boxAI() { 
 
    calculateDistance(destinationX, destinationY); 
 
    if (!dist == 0) { 
 
    boxMove(); 
 
    } else { 
 
    if (boxMode == 0) { 
 
\t points += 1; 
 
\t if (points == 50) { 
 
\t  // change destination to point A 
 
\t \t destinationX = pointAx; 
 
\t \t destinationY = pointAy; 
 
\t \t boxMode = 1; 
 
\t } 
 
\t } else { 
 
\t // change destination to point B 
 
\t destinationX = pointBx; 
 
\t destinationY = pointBy; 
 
     score += points; 
 
     points = 0; 
 
\t boxMode = 0; 
 
\t } 
 
    } 
 
} 
 
function mainLoop() { 
 
    boxAI(); 
 
    $("#debug").html(points + " " + score + " " + boxMode); 
 
    requestAnimationFrame(mainLoop); 
 
} 
 

 
requestAnimationFrame(mainLoop);

#levelWrapper { 
 
    position: relative; 
 
    width: 400px; 
 
    height: 150px; 
 
    top: 2px; 
 
    margin: auto; 
 
    border: 1px solid red; 
 
} 
 
\t \t \t 
 
#pointA { 
 
    position: absolute; 
 
    background: beige; 
 
    width: 45px; 
 
    height: 45px; 
 
    top: 3px; 
 
    left: 50px; 
 
    margin: auto; 
 
} 
 
\t \t \t 
 
#pointB { 
 
    position: absolute; 
 
    background: beige; 
 
    width: 45px; 
 
    height: 45px; 
 
    top: 45px; 
 
    left: 195px; 
 
    margin: auto; 
 
} 
 
\t \t \t 
 
#box { 
 
    position: absolute; 
 
    background: black; 
 
    height: 5px; 
 
    width: 5px; 
 
} 
 

 
#debug { 
 
    position: relative; 
 
    background: white; 
 
    width: 250px; 
 
    height: 120px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
<div id="debug"></div> 
 

 
<div id="levelWrapper"> 
 
<div id="pointA">A</div> 
 
<div id="pointB">B</div> 
 
<div id="box"></div> 
 
</div> 
 
\t \t 
 
<script src="jquery-3.2.1.js"></script> 
 
<script type="text/javascript" src="woods_2.js"></script> 
 
\t \t 
 
</body>

來源

2017-10-08 RealAnyOne

注意：'sqrt（）'永遠不能爲負數，所以你不需要''if'後面的。 – trincot

你可以創建一個stacksnippets來演示問題嗎？ – guest271314

@ guest271314完成 – RealAnyOne

在JavaScript中!運營商擁有的==優先，所以if (dist != 0)就已經是一種進步。

但是當你使用一個speed變量，它決定了距離的兩個連續測量之間的差別，你應該做出相應的測試，看看如果距離一步從零刪除：

if (dist >= speed)

這裏是你的代碼的一些變化：

var score = 0, points = 0, boxMode = 0, speed, speedX, speedY, angleRadians, 
 
distX, distY, dist; 
 

 
var destinationX = $("#pointB").position().left; 
 
var destinationY = $("#pointB").position().top; 
 

 
var pointAPos = $("#pointA").position(); 
 
var pointAx = pointAPos.left; 
 
var pointAy = pointAPos.top; 
 

 
var pointBPos = $("#pointB").position(); 
 
var pointBx = pointBPos.left; 
 
var pointBy = pointBPos.top; 
 

 
var boxPos = $('#box').position(); 
 
var boxX = pointAx; 
 
var boxY = pointAy; 
 
var speed = 2; // make speed visible to other functions 
 

 
function calculateDistance(x, y) { 
 
    distX = boxX - x; 
 
    distY = boxY - y; 
 
    dist = Math.sqrt((distX*distX)+(distY*distY)); 
 
} 
 

 
function boxMove() { 
 
    angleRadians = Math.atan2(-distX, -distY); 
 
    speedX = speed * Math.sin(angleRadians); 
 
    speedY = speed * Math.cos(angleRadians); 
 

 
    document.getElementById("box").style.left = boxX + "px"; 
 
    document.getElementById("box").style.top = boxY + "px"; 
 

 
    boxX += speedX; 
 
    boxY += speedY; 
 
} 
 

 
function boxAI() { 
 
    calculateDistance(destinationX, destinationY); 
 
    // As the distance makes jumps of <speed> units, 
 
    // check whether it is within one step of the target 
 
    if (dist >= speed) { 
 
     boxMove(); 
 
    } else { 
 
     score++; // Not sure what score should be measuring 
 
     if (boxMode == 0) { 
 
      // Change destination to point A 
 
      destinationX = pointAx; 
 
      destinationY = pointAy; 
 
      boxMode = 1; 
 
     } else { 
 
      // Change destination to point B 
 
      destinationX = pointBx; 
 
      destinationY = pointBy; 
 
      boxMode = 0; 
 
     } 
 
    } 
 
} 
 

 
function mainLoop() { 
 
    boxAI(); 
 
    $("#debug").html(points + " " + score + " " + boxMode); 
 
    requestAnimationFrame(mainLoop); 
 
} 
 

 
requestAnimationFrame(mainLoop);

#levelWrapper { 
 
    position: relative; 
 
    width: 400px; 
 
    height: 150px; 
 
    top: 2px; 
 
    margin: auto; 
 
    border: 1px solid red; 
 
} 
 
      
 
#pointA { 
 
    position: absolute; 
 
    background: beige; 
 
    width: 45px; 
 
    height: 45px; 
 
    top: 3px; 
 
    left: 50px; 
 
    margin: auto; 
 
} 
 
      
 
#pointB { 
 
    position: absolute; 
 
    background: beige; 
 
    width: 45px; 
 
    height: 45px; 
 
    top: 45px; 
 
    left: 195px; 
 
    margin: auto; 
 
} 
 
      
 
#box { 
 
    position: absolute; 
 
    background: black; 
 
    height: 5px; 
 
    width: 5px; 
 
} 
 

 
#debug { 
 
    position: relative; 
 
    background: white; 
 
    width: 250px; 
 
    height: 120px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="debug"></div> 
 

 
<div id="levelWrapper"> 
 
<div id="pointA">A</div> 
 
<div id="pointB">B</div> 
 
<div id="box"></div> 
 
</div>

我不明白你想用得分和得分，所以你需要在這方面修改代碼。現在我把點的變化刪除了變量，並且每增加一次只增加得分。

來源

2017-10-08 18:45:58 trincot

無法正常工作，請使用我上面更新的代碼進行嘗試 – RealAnyOne

顯示您的代碼確實很重要。現在我明白你的問題是什麼。我相應地更新了我的答案。 – trincot

不用擔心，我猜我的問題不需要積分和分數，這僅僅是爲了說明我希望盒子能夠在B中做點什麼，並且在返回之前需要時間//對於問題真的沒有關係實際上發佈在第一篇文章中 – RealAnyOne

回答

相關問題