Hi, I am making a variation of pong, and I want to make the ball have a trail when I press my mouse. I conceptually know this means I need to stop my background from updating, but I am having difficulty in having this actually happen. I also am having trouble having my restart screen actually work. If you can help it would be greatly appreciated.
float gap; //Assign variables
float ballX_pos = random(300);
float ballX = 30;
float ballY = 30;
float dx = 3;
float neg_dx = -3;
float dy = 3;
float neg_dy = -3;
float rcolor = random(255);
float gcolor = random(255);
float bcolor = random(255);
float disp = 0;
float number = random(3);
boolean right = number>1;
float paddleY = height+240;
int score;
void setup(){ //Setup the window
size(640,360);
textSize(30);
}
void draw(){ //This is gpoing to serve as the games loop
frameRate(60);
float paddleX = mouseX;
rcolor = random(255);
gcolor = random(255);
bcolor = random(255);
rectMode(CENTER); //Paddle
background(50);
fill(255);
rect(paddleX,paddleY-20,100,20);
fill(rcolor,gcolor,bcolor);
rcolor+=1;
rcolor= constrain(rcolor,bcolor,gcolor); //Makes the coloring random
if(ballX >width) { //Statements that keep the ball within the screen.
dx = -dx;
}
if (ballX <0){
dx =-dx;
neg_dx = dx;
}
if(ballY <0){
dy = -dy;
neg_dy =dy;
}
if((ballY >= paddleY-10 ) && (ballX >= paddleX-50) && (ballX <= paddleX + 50)){
dy = - abs(dy+1); //When the paddle hits the ball it bounces back
score++;
}
if(right){
circle(ballX,ballY,20); //Position of the ball
ballX= ballX+dx; //Right
ballX++;
ballY=ballY+dy;
ballY++;
}
else {
circle(ballX,ballY,20); //Position of the ball
ballX= ballX-dx; //Left
ballX++;
ballY=ballY+dy;
ballY++;
}
//Rainbow score is cooler
text(score, 580 ,50);
if(ballY>height){
background(255);
fill(0);
text("GAME OVER",230,height/2);
text("Press Any Key to Restart",145,280);
}
}
1 Like
I added some quick and dirty arrays and for loops to get your trails working. I also added code for the reset. See my comments that start with // NEW:, for areas where I added my own code in between yours:
float gap; //Assign variables
float ballX_pos = random(300);
float ballX = 30;
float ballY = 30;
float dx = 3;
float neg_dx = -3;
float dy = 3;
float neg_dy = -3;
float rcolor = random(255);
float gcolor = random(255);
float bcolor = random(255);
float disp = 0;
float number = random(3);
boolean right = number>1;
float paddleY = height+240;
int score;
// NEW: arrays for ball trail
int arrayLen = 20;
float[] arrBallX = new float[arrayLen];
float[] arrBallY = new float[arrayLen];
{
for (int i = 0; i < arrBallX.length; i++) {
arrBallX[i] = ballX;
arrBallY[i] = ballY;
}
}
void setup() { //Setup the window
size(640, 360);
textSize(30);
}
void draw() { //This is gpoing to serve as the games loop
frameRate(60);
float paddleX = mouseX;
rcolor = random(255);
gcolor = random(255);
bcolor = random(255);
rectMode(CENTER); //Paddle
background(50);
fill(255);
rect(paddleX, paddleY-20, 100, 20);
fill(rcolor, gcolor, bcolor);
rcolor+=1;
rcolor= constrain(rcolor, bcolor, gcolor); //Makes the coloring random
if (ballX >width) { //Statements that keep the ball within the screen.
dx = -dx;
}
if (ballX <0) {
dx =-dx;
neg_dx = dx;
}
if (ballY <0) {
dy = -dy;
neg_dy =dy;
}
if ((ballY >= paddleY-10 ) && (ballX >= paddleX-50) && (ballX <= paddleX + 50)) {
dy = - abs(dy+1); //When the paddle hits the ball it bounces back
score++;
;
}
// NEW: store previous ball coords in their respective arrays
for (int i = arrBallX.length - 1; i > 0; i--) {
arrBallX[i] = arrBallX[i - 1];
arrBallY[i] = arrBallY[i - 1];
}
arrBallX[0] = ballX;
arrBallY[0] = ballY;
// NEW: if mouse pressed, draw array of balls
if (mousePressed) {
for (int i = arrBallX.length - 1; i >= 0; i--) {
circle(arrBallX[i], arrBallY[i], 20);
}
}
if (right) {
circle(ballX, ballY, 20); //Position of the ball
ballX= ballX+dx; //Right
ballX++;
ballY=ballY+dy;
ballY++;
} else {
circle(ballX, ballY, 20); //Position of the ball
ballX= ballX-dx; //Left
ballX++;
ballY=ballY+dy;
ballY++;
}
//Rainbow score is cooler
text(score, 580, 50);
if (ballY>height) {
background(255);
fill(0);
text("GAME OVER", 230, height/2);
text("Press Any Key to Restart", 145, 280);
// NEW: reset. Might want to move these initializing assignments to a function
if (keyPressed && !mousePressed) {
number = random(3);
right = number>1;
ballX = 30;
ballY = 30;
score = 0;
dx = 3;
neg_dx = -3;
dy = 3;
neg_dy = -3;
setup();
}
}
}
2 Likes
There are a couple places where I’m repeating myself in the code and could be more efficient, but you probably you get the idea. I’m a Java noob, so I’m sure there are shorter ways to achieve this stuff too. And you can obviously add more variable resets to the reset block–I only reset a handful of things.
is there a way to have the background simply not refresh once the mouse is pressed. I know it would make the circle have a trail and the rectangle. (The trail would not go away until the mouse is released).
Yeah, if you want to do it that way, you can just wrap the background() call in draw() in an if statement, making it so background() draws only if the mouse button isn’t pressed:
if (!mousePressed) {
background(50);
}
And then if you don’t want the custom array of trails, comment that out. But this way, everything gets drawn on top of itself, including the score.
1 Like
One final question (sorry for the bombardment of questions) but how would you get keep the paddle on the bottom of the window if I change the size of the screen. I tried using multipliers but I can’t seem to get it.
You can get rid of the line float paddleY = height + 240 near the start of your sketch (before setup()). All that line is doing is setting paddleY to equal 340, since the default height of the sketch before your setup() runs is just 100. (So, 100 + 240 = 340.)
Then just create the paddleY var in draw(), next to its buddy paddleX, and set paddleY's value relative to height, which at this point equals your actual canvas height. And then drop paddleY into your paddle rect call:
float paddleX = mouseX;
float paddleY = height - 60;
// ...your other existing code here...
rect(paddleX, paddleY, 100, 20);
3 Likes