获取距离为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

获取距离为0

回答

相关问题