需要帮助让一个物体从另一个物体上反弹我们 JavaScript 和 P5

Question

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

我试图再做一个 "if" 声明来说明它是否击中这个区域会弹开，但是如果我这样做我会出错并且球根本不会移动。

我这里用的是CodePen link。我已经习惯了注释以使其更易于阅读

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)

如果圆的底部在矩形顶部的下方，圆心在矩形的左边和右边之间，那么球"bounce"和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>

需要帮助让一个物体从另一个物体上反弹我们 JavaScript 和 P5

Need help making an object bounce off another object us JavaScript and P5

javascript

processing

p5.js