CODEWITHSUNDEEP
javascriptprocessingp5.js
Vanilla Thick
Vanilla Thick

Reputation: 41

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

I need to make a program that has a ball that moves on the screen and when it hits the rectangle it needs to bounce off of it. I have the ball bouncing already when it hits the canvas sides but i cant figure out how to make it bounce off the rectangle using functions.

I have tried to make another "if" statement to say if it hits this area to bounce off but i get errors if i do that and the ball will not move at all.

I am using CodePen here is the link. I have used to comments to make it easier to read as well

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

Here is what I have so far:` 

//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>

I expect it to kind of work like the game Breakout (as I will be adding more to this program in the future)

Upvotes: 2

Views: 1730

Answers (1)

Rabbid76
Rabbid76

Reputation: 210968

Add position coordinates for the rectangle:

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)

If the bottom of the circle is below the top of the rectangle, and the center of the circle is somewhere between the let and the right of the rectangle, then the the ball "bounce" and the y direction has to be changed:

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>

Upvotes: 3

Related Questions