Need help for a small pong game

p5.js Coding Questions
1

I’m trying to make it so that when the main ball goes through an area in the center of the canvas it spawns a several new, smaller balls that go in random directions. All I’ve been able to do is make a single new ball that is really janky and only stays spawned if i have the entire canvas as the are that spawns the ball .I know that this code prob isn’t the best but I’m pretty new to coding. thanks for any and all help :smiley:

edit: Also if anyone knows how to make the ball bounce of the two side edges of the paddle thant would be incredibly helpful

here is the code I’ve written so far:

var x = 10 //xfor paddle
var bx = 200 //ball x
var by = 200 // ball y
var y = 200 // y for paddle
var sx = 3 //speed of ball x
var sy = 3 //speed of ball y 
var r = 0
var secbx=200//sec ball x
var secby=200// sec ball y
var secx = 390 //second paddle
var secy = 200 //second paddle

function setup() {
  createCanvas(400, 400);
  sx = random(-3, 3);
  sy = random(-3, 3);
  //how to make direction on ball spawn diff while same speed?
}

function draw() {
  background(150);
  rectMode(CENTER);
  rect(x, y, 20, 75);
  if (keyIsPressed == true) {
    if (y < 37.5) {
      y += 0.1
    } else if (y > 362.5) {
      y -= 0.1
    } else if (keyCode == DOWN_ARROW) {
      y += 2
    } else if (keyCode == UP_ARROW) {
      y -= +2
    }
  }
  rect(secx, secy, 20, 75);
  if (keyIsPressed == true) {
    if (secy < 37.5) {
      secy += 0.1
    } else if (secy > 362.5) {
      secy -= 0.1
    } else if (keyCode == 83) { //BROKE
      secy += 2
    } else if (keyCode == 87) { //BROKE
      secy -= +2
    }
  }

  ellipse(bx, by, 25, 25)
  fill(255)
  noStroke()
  bx = bx + sx;
  by = by + sy;


  if (by > 400) { //bottom
    sy *= -1
  } else if (y + 37.5 > by && by > y - 37.5 && bx < 32.5) { //paddle
    sx *= -1
  } else if (secy + 37.5 > by && by > secy - 37.5 && bx > 367.5) {
    sx *= -1
  } else if (bx < 0) { //left side
    sx *= -1
  } else if (by < 0) { //top
    sy *= -1
  } else if (bx > 400) { //right
    sx *= -1
  } else if (bx > 0 && 400 > bx && by > 0 && 400 > by) {
    ellipse(secbx, secby, 15, 15)
    secbx = secbx + random(-10, 10)
    secby = secby + random(-10, 10)
    fill(0)
    noStroke()
  }
}
2

Please Format your code by formatting it and pasting it within the … created by pressing on </>. Or by selecting the formatted code and then pressing </>

4

sorry didnt realize how to do that. Thanks! :smiley:

5

Ugh, i had a good answer, But discourse had Problems and now Even the draft is gone… i‘m not very experienced using js, But you should first of all use a class to define your Balls, to make it easier for you to draw multiple Balls… Well, maybe it was more of a hint than an actual answer.

2 Likes