-1

この div をポイント A からポイント B に、またはその逆にしたい。問題は、dist変数 (距離) が 0 にならないことです。通常は 1 または -1 (または他の値の範囲) のいずれかであり、その結果、div が動かなくなり、どこにも行きません。私の完全なコードでは、ページを開くたびにポイント A と B の位置がランダム化されます。

以下の例は、問題を再現しています。意図したセットとして機能することを確認するには #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;
	
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);
	
  document.getElementById("box").style.left = boxX + "px";
  document.getElementById("box").style.top = boxY + "px";
	
  boxX += speedX;
  boxY += speedY;
}

function boxAI() {
  calculateDistance(destinationX, destinationY);
  if (!dist == 0) {
    boxMove();
  } else {
    if (boxMode == 0) {
	  points += 1;
	  if (points == 50) {
	    // change destination to point A
		destinationX = pointAx;
		destinationY = pointAy;
		boxMode = 1;
	  }
	} else {
	  // change destination to point B
	  destinationX = pointBx;
	  destinationY = pointBy;
      score += points;
      points = 0;
	  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>
<body>
<div id="debug"></div>

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

4

1 に答える 1

5

JavaScript では、!演算子は よりも優先される==ため、if (dist != 0)既に改善されています。

ただしspeed、距離の 2 つの連続した測定値の差を決定する変数を使用するため、それに応じてテストを行い、距離が0 から1 ステップ離れているかどうかを確認する必要があります。

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>

scoreとpointsで何をしたいのか理解できなかったので、その点でコードを変更する必要があります。今のところ、points変数への変更を削除し、跳ねるたびにスコアを増やすだけにしました。

于 2017-10-08T18:45:58.347 に答える