javascript - 需要帮助使用 JavaScript 和 P5 让一个对象从另一个对象上反弹

Question

我需要制作一个程序，其中有一个在屏幕上移动的球，当它击中矩形时，它需要从矩形上弹开。当球击中 Canvas 侧面时，我已经让球弹起，但我不知道如何使用函数使其从矩形弹起。

我试图制作另一个“if”语句来说明它是否击中该区域并弹开，但如果我这样做，我会收到错误并且球根本不会移动。

我正在使用 CodePen，这里是链接。我也习惯使用注释来使其更易于阅读

https://codepen.io/Vanilla_thick/pen/eaKaVw

这是我到目前为止所拥有的:`

//Varibles
let circleX=40
let circleY=40
let velocityX=5
let velocityY=5
//Function for rectangle

function rectangle(color, sizeX, sizeY){
  fill(color)
  let r =rect(300,550,sizeX,sizeY)
}

function setup(){
  //Make canvas
  createCanvas(800,600)
}

function draw(){
  //Set backgound to black
  background(0)
  //Make ball
  circle(circleX,circleY,40)

   //Give the ball a volicity on the "X" and "Y" axis so it will move 
//both ways whenever it needs to
   //Have ball start by moving down to make it bounce vertically
  circleY= circleY + velocityY

  circleX = circleX + velocityX

  //Have it call the function to add the rectangle 
  rectangle("#ff0000",400,20)

  //Make "Ifs" statement so whenever the ball hits the edge of the canvas it will bounce and go somewhere else in the canvas

  if (circleY > height){
      velocityY= -5
  }
  if (circleY == 0){
      velocityY= 5
  }
  else if (circleX > width){
      velocityX= -5
  }
  else if(circleX < 0){
      velocityX= 5
  }
}

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

我希望它能像 Breakout 游戏一样工作(因为我将来会向这个程序添加更多内容)

Answer 1

添加矩形的位置坐标:

let rectX = 200, rectY = 550

function rectangle(color, posX, posY, sizeX, sizeY){
    fill(color)
    rect(posX, posY, sizeX, sizeY)
}

rectangle("#ff0000", rectX, rectY, 400, 20)

如果圆的底部低于矩形的顶部，并且圆的中心位于矩形的左和右之间的某个位置，则球“弹跳”和 y 方向必须更改:

rectTop      = rectY;
rectLeft     = rectX;
rectRight    = rectX + 400;
circleBottom = circleY + 20
if (circleBottom > rectTop && circleX >= rectLeft && circleX <= rectRight ) {
    velocityY= -5
}

//Varibles
let rectX = 200, rectY = 550
let circleX = 40
let circleY = 40
let velocityX = 5
let velocityY = 5
//Function for rectangle

function rectangle(color, posX, posY, sizeX, sizeY){
    fill(color)
    rect(posX, posY, sizeX, sizeY)
}

function setup(){
    //Make canvas
    createCanvas(800,600)
}

function draw(){
    //Set backgound to black
    background(0)
    //Make ball
    circle(circleX, circleY, 40)

    //Give the ball a volicity on the "X" and "Y" axis so it will move 
    //both ways whenever it needs to
    //Have ball start by moving down to make it bounce vertically
    circleY= circleY + velocityY

    circleX = circleX + velocityX

    //Have it call the function to add the rectangle 
    rectangle("#ff0000", rectX, rectY, 400, 20)

    //Make "Ifs" statement so whenever the ball hits the edge
    // of the canvas it will bounce and go somewhere else in the canvas

    rectTop      = rectY;
    rectLeft     = rectX;
    rectRight    = rectX + 400;
    circleBottom = circleY + 20
    if (circleBottom > rectTop && circleX >= rectLeft && circleX <= rectRight ) {
        velocityY= -5
    }
    else if (circleY > height){
        velocityY= -5
    }
    if (circleY == 0){
        velocityY= 5
    }
    else if (circleX > width){
        velocityX= -5
    }
    else if(circleX < 0){
        velocityX= 5
    }
}

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