javascript - 如何强制处理正确处理运动的负值？

Question

我正在为学校处理一个“高尔夫”游戏，我可以让球本身移动，但它只能在向上和向左方向正确移动。我所说的“正确”是指它仅施加摩擦力并移动适当的量。在除了向上和向左之外的每个方向上，它都会移动非常短且突然的量。

我已将我的代码附加给任何可以提供帮助的人，并且我已尽力对其进行评论，因为我知道我的思维过程可能在这方面不太好。

final float MIN_SPEED = 0.5; //Minimum speed the ball can be travelling
final float FRICTION = 0.98;
final float BALL_SIZE = 14.0;

float holeX;
float holeY;
float ballX = 250;
float ballY = 250;
float ballSpeedX;
float ballSpeedY;
float ballDistanceX;
float ballDistanceY;
float xVelocity = 0;
float yVelocity = 0;
boolean isHole = false;
boolean move = false;


void setup(){
  size(500,500);
}
/* Function to set initial X & Y Velocities as well as move to true when the mouse is clicked and released */
void mouseClicked(){
   xVelocity = ballDistanceX * 0.04;
   yVelocity = ballDistanceY * 0.04;
   move = true;
}

void draw(){
  background(0);
  stroke(255);
  fill(255);
  ellipse(ballX, ballY, BALL_SIZE, BALL_SIZE); // initializes the ball to the center
    if(move == false){ // draws a line from the cursor to the ball when it is not moving
      fill(255);
      line(mouseX, mouseY, ballX, ballY);
      ballDistanceX = mouseX - ballX;
      ballDistanceY = mouseY - ballY;
    }
else if(move == true){ //When the mouse has been clicked, moves the ball the opposite direction of where the click was
      xVelocity *= FRICTION; // applies friction to slow the ball down
      yVelocity *= FRICTION;
        if (ballX >= 0 && ballY >= 0){
      ballX -= xVelocity; // changes the position of ballX
      ballY -= yVelocity;
      ellipse(ballX, ballY, BALL_SIZE, BALL_SIZE); // redraws the ball in its new position
        }
        if (ballX >= 0 && ballY <= 0){
      ballX -= xVelocity;
      ballY += yVelocity;
      ellipse(ballX, ballY, BALL_SIZE, BALL_SIZE);
        }
        if (ballX <= 0 && ballY >= 0){
      ballX += xVelocity;
      ballY -= yVelocity;
      ellipse(ballX, ballY, BALL_SIZE, BALL_SIZE);
        }
        if (ballX < 0 && ballY < 0){
      ballX += xVelocity;
      ballY += yVelocity;
      ellipse(ballX, ballY, BALL_SIZE, BALL_SIZE);
        }            
              if (xVelocity < MIN_SPEED || yVelocity < MIN_SPEED) { // Once the ball slows down enough it resets move to false
                move = false;
              }
    }
        if (xVelocity < MIN_SPEED || yVelocity < MIN_SPEED) {
          move = false;
        }
  }

如果我可以做任何事情来澄清或使其更容易理解，请告诉我!

Answer 1

在识别导致问题的部分方面做得很好。

您正在检查if(xVelocity < MIN_SPEED || yVelocity < MIN_SPEED) .

这样做的问题是您只检查 x 或 y 速度是否为正且在一个小阈值 (0.0 - 0.5) 内。

如果速度是你的向量，你想要检查的是向量的大小。请务必查看Daniel Shiffman's Vectors chapter on Nature of Code或者他的 YouTube 视频，介绍一点点线性代数。 这个想法是向量的大小就是向量的长度。线越大，矢量(在您的情况下为速度)就越大，无论方向如何(正或负 x,y 分量)。它只是使用欧几里得距离(毕达哥拉斯定理)

这是代码的调整版本，其中删除了不需要运行的变量。另外，你并不真正需要while循环:draw()已经是您要更新的无限循环:

final float MIN_SPEED = 0.5; //Minimum speed the ball can be travelling
final float FRICTION = 0.98;
final float BALL_SIZE = 14.0;

float ballX = 250;
float ballY = 250;
float ballDistanceX;
float ballDistanceY;
float xVelocity = 0;
float yVelocity = 0;
boolean move = false;


void setup() {
  size(500, 500);
}
/* Function to set initial X & Y Velocities as well as move to true when the mouse is clicked and released */
void mouseClicked() {
  xVelocity = ballDistanceX * 0.04;
  yVelocity = ballDistanceY * 0.04;
  move = true;
}

void draw() {
  background(0);
  stroke(255);
  fill(255);
  ellipse(ballX, ballY, BALL_SIZE, BALL_SIZE); // initializes the ball to the center

  if (move == false) { // draws a line from the cursor to the ball when it is not moving

    fill(255);
    line(mouseX, mouseY, ballX, ballY);
    ballDistanceX = mouseX - ballX;
    ballDistanceY = mouseY - ballY;

  } else { //When the mouse has been clicked, moves the ball the opposite direction of where the click was

      xVelocity *= FRICTION; // applies friction to slow the ball down
      yVelocity *= FRICTION;
      ballX -= xVelocity; // changes the position of ballX by subtracting velocity
      ballY -= yVelocity;

  }

  ellipse(ballX, ballY, BALL_SIZE, BALL_SIZE); // redraws the ball in its new position

  float mag = sqrt(xVelocity*xVelocity + yVelocity*yVelocity);
  if(mag < MIN_SPEED){
    move = false;
  }
}

您还可以将代码作为 p5.js 草图运行，如下所示:

const MIN_SPEED = 0.5; //Minimum speed the ball can be travelling
const FRICTION = 0.98;
const BALL_SIZE = 14.0;

var ballX = 250;
var ballY = 250;
var ballDistanceX;
var ballDistanceY;
var xVelocity = 0;
var yVelocity = 0;
var move = false;


function setup() {
  createCanvas(500, 500);
}
/* Function to set initial X & Y Velocities as well as move to true when the mouse is clicked and released */
function mouseClicked() {
  xVelocity = ballDistanceX * 0.04;
  yVelocity = ballDistanceY * 0.04;
  move = true;
}

function draw() {
  background(0);
  stroke(255);
  fill(255);
  ellipse(ballX, ballY, BALL_SIZE, BALL_SIZE); // initializes the ball to the center
  
  if (move == false) { // draws a line from the cursor to the ball when it is not moving
    
    fill(255);
    line(mouseX, mouseY, ballX, ballY);
    ballDistanceX = mouseX - ballX;
    ballDistanceY = mouseY - ballY;
    
  } else { //When the mouse has been clicked, moves the ball the opposite direction of where the click was
    
      xVelocity *= FRICTION; // applies friction to slow the ball down
      yVelocity *= FRICTION;
      ballX -= xVelocity; // changes the position of ballX by subtracting velocity
      ballY -= yVelocity;
      
  }
  
  ellipse(ballX, ballY, BALL_SIZE, BALL_SIZE); // redraws the ball in its new position
  
  var mag = sqrt(xVelocity*xVelocity + yVelocity*yVelocity);
  if(mag < MIN_SPEED){
    move = false;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.min.js"></script>