Two Player Pong game COLLISION FUNCTION DON'T WORK

juzermala · October 20, 2020, 6:14am

please format code with </> button * homework policy * asking questions

|my coding for 2 player pong game in p5js.
in my coding function collision do not work.
ball bounces from all walls but do not bounce by hitting paddle.
please help

coding is as under.

//----------------VARIABLES------------------------
var score1 = 0;
var score2 = 0;
//---------------------------------------------------
//---------------------------------------------------
// CREATING BALL OBJECT
var ball={
x:250,
y:250,
w:20,
h:20,
spdx:3,
spdy:3
};
//-----------------------------------------------------------
// CREATING PADDLE OBJECTS OF TWO PLAYERS
var player1={
x:10, y:200, w:15, h:100, spd:3, up:false, down:false
};
var player2={
x:475, y:200, w:15, h:100, spd:3, up:false, down:false
};
//---------------------------------------------------
//CODE TO ASSIGN PADDLE MOVEMENTS WITH ASSOCIATED KEY PRESS
var keyPressed = function(){
// UP PLAYER2
if(keyCode === UP_ARROW){
player2.up=true;
}
// DOWN PLAYER2
if(keyCode === DOWN_ARROW){
player2.down=true;
}
// UP PLAYER1
if(keyCode === 87){ // w key
player1.up=true;
}
// DOWN PLAYER1
if(keyCode === 83){ // s key
player1.down=true;
}
};
//---------------------------------------------------
//CODE TO ASSIGN PADDLE MOVEMENTS WITH ASSOCIATED KEY RELEASE
var keyReleased = function(){
// UP PLAYER2
if(keyCode === UP_ARROW){
player2.up=false;
}
// DOWN PLAYER2
if(keyCode === DOWN_ARROW){
player2.down=false;
}
// UP PLAYER1
if(keyCode === 87){ // w key
player1.up=false;
}
// DOWN PLAYER1
if(keyCode === 83){ // s key
player1.down=false;
}
};
//-----------------VARIABLES-----------------------
//------------------SETUP FUNCTION--------------------
function setup() {
createCanvas(500, 500);
// CREATING BALL OBJECT
ball={
x:250,
y:250,
w:20,
h:20,
spdx:random(-3,3),
spdy:random(-3,3)
};
// CREATING PADDLE OBJECTS
player1={
x:10, y:200, w:15, h:100, spd:3, up:false, down:false
};
player2={
x:475, y:200, w:15, h:100, spd:3, up:false, down:false
};
}
//------------------SETUP FUNCTION-------------------------
//-----------------DRAW FUNCTION---------------------------
function draw() {
background(0);
halfline();
drawPlayers();
movePlayers();
drawBall();
moveBall();
drawScore();
}
//-----------------DRAW FUNCTION---------------------------
//---------------USE DEFINED FUNCTIONS----------------------
//---------------------------------------------------
function halfline(){
// for loop
for(var h=0; h<height; h++){
noStroke();
fill(255);
rect(249, 20*h, 3,8);
}
}
//---------------------------------------------------
//---------------------------------------------------//DRAWING PADDLES OF TWO PLAYERS
function drawPlayers(){
//PLAYER1
fill(255,0,0);
rect(player1.x,player1.y,player1.w,player1.h);
//PLAYER2
fill(60,161,195);
rect(player2.x,player2.y,player2.w,player2.h);
}
//---------------------------------------------------
//---------------------------------------------------
// CODE TO ASSIGN MOVEMENT KEYS OF TWO PADDLES UP AND DOWN
function movePlayers(){
//UP PLAYER1
if(player1.up && player1.y >-1){
player1.y -=player1.spd;
}
//DOWN PLAYER1
if(player1.down && player1.y <800 - player1.y){
player1.y += player1.spd;
}
//UP PLAYER2
if(player2.up && player2.y >-1){
player2.y -=player2.spd;
}
//DOWN PLAYER2
if(player2.down && player2.y <800 - player2.y){
player2.y += player2.spd;
}
}
//---------------------------------------------------
//-----------------------------------------------------------
//drawing ball object
function drawBall(){
ellipseMode(CORNER);
fill(255);
ellipse(ball.x, ball.y, ball.w, ball.h);
}
//---------------------------------------------------
//---------------------------------------------------
// CODE TO MOVE BALL OBJECT
function moveBall(){
//MOVEMENT X AND Y
ball.x += ball.spdx;
ball.y += ball.spdy;
//BOUNCE
//X AXIS
if(ball.x > 500-ball.w){
ball.spdx *= -1;
//setup();
score1++;
}
if(ball.x <0){
ball.spdx *= -1;
//setup();
score2++;
}
//Y AXIS
if(ball.y > 500-ball.h){
ball.spdy *= -1;
}
if(ball.y <0){
ball.spdy *= -1;
}
}
// HITS PADDLE
//PLAYER1
if(collision(player1,ball)){
ball.spdx *= -1;
ball.spdy *= -1;
ball.spdx += 0.5;//faster P1
score1++;
}
//PLAYER2
if(collision(player2,ball)){
print(“RIGHT DONE”);
ball.spdx *= -1;
ball.spdy *= -1;
ball.spdx -= 0.5;//faster P2
score2++;
}
//--------------------------------------------------
//---------------------------------------------------
//DRAWING SCORE ON CANVAS
function drawScore(){
textSize(24);
fill(255,0,0); // RED
text("P1: "+score1,10,25);
fill(60,161,195); // BLUE
text("P2: "+score2,420,25);
}
//-----------------------------------------------------
//---------------------------------------------------
//WHEN PADDLE HITS BALL
function collision(obj1,obj2){
if(
obj1.x + obj1.w > obj2.x
&&
obj1.x < obj2.x + obj2.w
&&
obj2.y + obj2.h > obj1.y
&&
obj2.y < obj1.y + obj1.h
)
{return true;}
else{return false;}
}
//---------------------------------------------------
//---------------USE DEFINED FUNCTIONS----------------|

Chrisir · October 20, 2020, 12:25pm

Does this work? Check with println()

Not sure why speedY *=-1

One, x OR y should be enough (not sure which one) but not both

juzermala · October 20, 2020, 2:45pm

Dear Sir,
Thanks for replying.
I tried by **speedX =-1 alone, and speedY =-1 alone, but still collision does not occur.
I also tried by printing print(“RIGHT DONE”); to print incidence in console but it does not bounce by paddle.
Please help me.

uheinema · October 20, 2020, 3:26pm

Interesting, can’t see what the error might be.
I’m not exactly a Javascript expert, have you tried to bracket the comparison?

(obj1.x + obj1.w > obj2.x)
&&
(obj1.x < obj2.x + obj2.w)
&&

etc.
Keep trying, and tell us when it works!

Chrisir · October 20, 2020, 4:45pm

The entire section where we call the collision function in the first place was not executed by processing because it was OUTSIDE the function. So the function was never called nor executed.

This was AFTER the function (after } ) - no idea why p5.js wasn’t complaining!!!

  // HITS PADDLE
  //PLAYER1
  if (collision(player1, ball)) {
    ball.spdx = abs(ball.spdx); // POS
    //ball.spdy *= -1;
    //ball.spdx += 0.5; //faster P1
    score1++;
  }
  //PLAYER2
  if (collision(player2, ball)) {
    print("RIGHT DONE");
    // ball.spdx *= -1;
    ball.spdx = -1 * abs(ball.spdx); // NEG 
    //ball.spdy *= -1;
    //ball.spdx -= 0.5; //faster P2
    score2++;
  }

Advice

So please always use Menu Edit | Tidy code and check the indents afterwards!

The wrong section looks suspicious (in the old code):

  }
} // bracket totally left !!!! Closing function
// HITS PADDLE // no indent!!!  Code outside the function
//PLAYER1          // no indent!!!
if (collision(player1, ball)) {      // no indent!!!

(but I also looked INTO the function first and rewrote it prior to checking if it was called at all…)

Chrisir

Entire code:

//----------------VARIABLES------------------------
var score1 = 0;
var score2 = 0;
//---------------------------------------------------
//---------------------------------------------------
// CREATING BALL OBJECT
var ball = {
  x: 250,
  y: 250,
  w: 20,
  h: 20,
  spdx: 3,
  spdy: 3
};
//-----------------------------------------------------------
// CREATING PADDLE OBJECTS OF TWO PLAYERS
var player1 = {
  x: 10,
  y: 200,
  w: 15,
  h: 100,
  spd: 3,
  up: false,
  down: false
};
var player2 = {
  x: 475,
  y: 200,
  w: 15,
  h: 100,
  spd: 3,
  up: false,
  down: false
};
//---------------------------------------------------
//CODE TO ASSIGN PADDLE MOVEMENTS WITH ASSOCIATED KEY PRESS
var keyPressed = function() {
  // UP PLAYER2
  if (keyCode === UP_ARROW) {
    player2.up = true;
  }
  // DOWN PLAYER2
  if (keyCode === DOWN_ARROW) {
    player2.down = true;
  }
  // UP PLAYER1
  if (keyCode === 87) { // w key
    player1.up = true;
  }
  // DOWN PLAYER1
  if (keyCode === 83) { // s key
    player1.down = true;
  }
};
//---------------------------------------------------
//CODE TO ASSIGN PADDLE MOVEMENTS WITH ASSOCIATED KEY RELEASE
var keyReleased = function() {
  // UP PLAYER2
  if (keyCode === UP_ARROW) {
    player2.up = false;
  }
  // DOWN PLAYER2
  if (keyCode === DOWN_ARROW) {
    player2.down = false;
  }
  // UP PLAYER1
  if (keyCode === 87) { // w key
    player1.up = false;
  }
  // DOWN PLAYER1
  if (keyCode === 83) { // s key
    player1.down = false;
  }
};
//-----------------VARIABLES-----------------------
//------------------SETUP FUNCTION--------------------
function setup() {
  createCanvas(500, 500);
  // CREATING BALL OBJECT
  ball = {
    x: 250,
    y: 250,
    w: 20,
    h: 20,
    spdx: random(-3, 3),
    spdy: random(-3, 3)
  };
  // CREATING PADDLE OBJECTS
  player1 = {
    x: 10,
    y: 200,
    w: 15,
    h: 100,
    spd: 3,
    up: false,
    down: false
  };
  player2 = {
    x: 475,
    y: 200,
    w: 15,
    h: 100,
    spd: 3,
    up: false,
    down: false
  };
}
//------------------SETUP FUNCTION-------------------------
//-----------------DRAW FUNCTION---------------------------
function draw() {
  background(0);
  halfline();
  drawPlayers();
  movePlayers();
  drawBall();
  moveBall();
  drawScore();
}
//-----------------DRAW FUNCTION---------------------------
//---------------USE DEFINED FUNCTIONS----------------------
//---------------------------------------------------
function halfline() {
  // for loop
  for (var h = 0; h < height; h++) {
    noStroke();
    fill(255);
    rect(249, 20 * h, 3, 8);
  }
}
//---------------------------------------------------
//---------------------------------------------------//DRAWING PADDLES OF TWO PLAYERS
function drawPlayers() {
  //PLAYER1
  fill(255, 0, 0);
  rect(player1.x, player1.y, player1.w, player1.h);
  //PLAYER2
  fill(60, 161, 195);
  rect(player2.x, player2.y, player2.w, player2.h);
}
//---------------------------------------------------
//---------------------------------------------------
// CODE TO ASSIGN MOVEMENT KEYS OF TWO PADDLES UP AND DOWN
function movePlayers() {
  //UP PLAYER1
  if (player1.up && player1.y > -1) {
    player1.y -= player1.spd;
  }
  //DOWN PLAYER1
  if (player1.down && player1.y < 800 - player1.y) {
    player1.y += player1.spd;
  }
  //UP PLAYER2
  if (player2.up && player2.y > -1) {
    player2.y -= player2.spd;
  }
  //DOWN PLAYER2
  if (player2.down && player2.y < 800 - player2.y) {
    player2.y += player2.spd;
  }
}
//---------------------------------------------------
//-----------------------------------------------------------
//drawing ball object
function drawBall() {
  ellipseMode(CORNER);
  fill(255);
  ellipse(ball.x, ball.y, ball.w, ball.h);
}
//---------------------------------------------------
//---------------------------------------------------
// CODE TO MOVE BALL OBJECT
function moveBall() {
  //MOVEMENT X AND Y
  ball.x += ball.spdx;
  ball.y += ball.spdy;
  //BOUNCE
  //X AXIS
  if (ball.x > 500 - ball.w) {
    //ball.spdx *= -1;
    //setup();
    score1++;
  }
  if (ball.x < ball.w) {
    //ball.spdx *= -1;
    //setup();
    score2++;
  }
  //Y AXIS
  if (ball.y > 500 - ball.h) {
    ball.spdy *= -1;
  }
  if (ball.y < ball.h) {
    ball.spdy *= -1;
  }

  // HITS PADDLE
  //PLAYER1
  if (collision(player1, ball)) {
    ball.spdx = abs(ball.spdx); // POS
    //ball.spdy *= -1;
    //ball.spdx += 0.5; //faster P1
    score1++;
  }
  //PLAYER2
  if (collision(player2, ball)) {
    print("RIGHT DONE");
    // ball.spdx *= -1;
    ball.spdx = -1 * abs(ball.spdx); // NEG 
    //ball.spdy *= -1;
    //ball.spdx -= 0.5; //faster P2
    score2++;
  }
}
//--------------------------------------------------
//---------------------------------------------------
//DRAWING SCORE ON CANVAS
function drawScore() {
  textSize(24);
  fill(255, 0, 0); // RED
  text("P1: " + score1, 10, 25);
  fill(60, 161, 195); // BLUE
  text("P2: " + score2, 420, 25);
}
//-----------------------------------------------------
//---------------------------------------------------
//WHEN PADDLE HITS BALL
function collision(obj1, obj2) {
  // if (collision(player1, ball)) {
  // obj1 = paddle; obj2 = ball
  if (
    obj2.x > obj1.x - 4 &&
    obj2.x < obj1.x + obj1.w &&
    obj2.y > obj1.y &&
    obj2.y < obj1.y + obj1.h
  ) {
    //print("Yaih");
    return true;
  } else {
    return false;
  }
}
//---------------------------------------------------
//---------------USE DEFINED FUNCTIONS----------------|
//

juzermala · October 21, 2020, 5:42pm

I am very grateful of you to rectify my code and 2 player pong game working well.
I have done little fine tuning and final code is as under:

//----------------VARIABLES------------------------

var score1 = 0;

var score2 = 0;

//---------------------------------------------------

// CREATING BALL OBJECT

var ball = {

x: 250,

y: 250,

w: 20,

h: 20,

spdx: 3,

spdy: 3

};

//-----------------------------------------------------------

// CREATING PADDLE OBJECTS OF TWO PLAYERS

var player1 = {

x: 10,

y: 200,

w: 15,

h: 100,

spd: 3,

up: false,

down: false

};

var player2 = {

x: 475,

y: 200,

w: 15,

h: 100,

spd: 3,

up: false,

down: false

};

//---------------------------------------------------

//CODE TO ASSIGN PADDLE MOVEMENTS WITH ASSOCIATED KEY PRESS

var keyPressed = function() {

// UP PLAYER2

if (keyCode === UP_ARROW) {

player2.up = true;

}

// DOWN PLAYER2

if (keyCode === DOWN_ARROW) {

player2.down = true;

}

// UP PLAYER1

if (keyCode === 87) { // w key

player1.up = true;

}

// DOWN PLAYER1

if (keyCode === 83) { // s key

player1.down = true;

}

};

//---------------------------------------------------

//CODE TO ASSIGN PADDLE MOVEMENTS WITH ASSOCIATED KEY RELEASE

var keyReleased = function() {

// UP PLAYER2

if (keyCode === UP_ARROW) {

player2.up = false;

}

// DOWN PLAYER2

if (keyCode === DOWN_ARROW) {

player2.down = false;

}

// UP PLAYER1

if (keyCode === 87) { // w key

player1.up = false;

}

// DOWN PLAYER1

if (keyCode === 83) { // s key

player1.down = false;

}

};

//-----------------VARIABLES-----------------------

//------------------SETUP FUNCTION--------------------

function setup() {

createCanvas(500, 500);

// CREATING BALL OBJECT

ball = {

x: 250,

y: 250,

w: 20,

h: 20,

spdx: random(-3, 3),

spdy: random(-3, 3)

};

// CREATING PADDLE OBJECTS

player1 = {

x: 10,

y: 200,

w: 15,

h: 100,

spd: 3,

up: false,

down: false

};

player2 = {

x: 475,

y: 200,

w: 15,

h: 100,

spd: 3,

up: false,

down: false

};

}

//------------------SETUP FUNCTION-------------------------

//-----------------DRAW FUNCTION---------------------------

function draw() {

background(0);

halfline();

drawPlayers();

movePlayers();

drawBall();

moveBall();

drawScore();

}

//-----------------DRAW FUNCTION---------------------------

//---------------USE DEFINED FUNCTIONS----------------------

//---------------------------------------------------

function halfline() {

// for loop

for (var h = 0; h < height; h++) {

noStroke();

fill(255);

rect(249, 20 * h, 3, 8);

}

//---------------------------------------------------

//---------------------------------------------------//DRAWING PADDLES OF TWO PLAYERS

function drawPlayers() {

//PLAYER1

fill(255, 0, 0);

rect(player1.x, player1.y, player1.w, player1.h);

//PLAYER2

fill(60, 161, 195);

rect(player2.x, player2.y, player2.w, player2.h);

}

//---------------------------------------------------

// CODE TO ASSIGN MOVEMENT KEYS OF TWO PADDLES UP AND DOWN

function movePlayers() {

//UP PLAYER1

if (player1.up && player1.y > -1) {

player1.y -= player1.spd;

}

//DOWN PLAYER1

if (player1.down && player1.y < 800 - player1.y) {

player1.y += player1.spd;

}

//UP PLAYER2

if (player2.up && player2.y > -1) {

player2.y -= player2.spd;

}

//DOWN PLAYER2

if (player2.down && player2.y < 800 - player2.y) {

player2.y += player2.spd;

}

//---------------------------------------------------

//-----------------------------------------------------------

//drawing ball object

function drawBall() {

ellipseMode(CORNER);

fill(255);

ellipse(ball.x, ball.y, ball.w, ball.h);

}

//---------------------------------------------------

// CODE TO MOVE BALL OBJECT

function moveBall() {

//MOVEMENT X AND Y

ball.x += ball.spdx;

ball.y += ball.spdy;

//BOUNCE

//X AXIS RIGHT WALL

if (ball.x > 500 - ball.w) {

ball.spdx *= -1;

score1++;

}

//X AXIS LEFT WALL

if (ball.x + 15 < ball.w) {

ball.spdx *= -1;

score2++;

}

//Y AXIS BOTTOM WALL

if (ball.y > 500 - ball.h) {

ball.spdy *= -1;

}

//Y AXIS TOP WALL

if (ball.y + 20 < ball.h) {

ball.spdy *= -1;

}

// HITS PADDLE

//PLAYER1

if (collision(player1, ball)) {

ball.spdx = abs(ball.spdx); // POS

ball.spdx += 0.2; //faster P1

score1++;

}

//PLAYER2

if (collision(player2, ball)) {

//print("RIGHT DONE");

ball.spdx = -1 * abs(ball.spdx); // NEG 

ball.spdx -= 0.2; //faster P2

score2++;

}

//--------------------------------------------------

//---------------------------------------------------

//DRAWING SCORE ON CANVAS

function drawScore() {

textSize(24);

fill(255, 0, 0); // RED

text("P1: " + score1, 10, 25);

fill(60, 161, 195); // BLUE

text("P2: " + score2, 420, 25);

}

//-----------------------------------------------------

//---------------------------------------------------

//WHEN PADDLE HITS BALL

function collision(obj1, obj2) {

if (

obj2.x > obj1.x - 15 &&

obj2.x < obj1.x + obj1.w &&

obj2.y > obj1.y &&

obj2.y < obj1.y + obj1.h

) {

return true;

} else {

return false;

}

//---------------------------------------------------

//---------------USE DEFINED FUNCTIONS----------------|

//

juzermala · October 21, 2020, 5:45pm

Dear Chrisir Sir,
Thank you so much and I am very greateful of you that you rectified my code and my 2 player Pong game has started working.
I will need your support also in future.
yours truely,
Juzer Mala

Chrisir · October 21, 2020, 9:07pm

Maybe you can have a separate reflection for the two paddles.

Because on the left paddle, the reflection is on the right side, but on the right paddle it‘s the left side to reflect.

juzermala · November 9, 2020, 5:08am

Dear Chrisir Sir,
I need help.
I am teaching javascript coding in online classes.
I am using p5js editor right now.
Can you suggest a better code editor and result viewer.

Chrisir · November 9, 2020, 7:00am

Maybe here Help! Why I cannot use the P5JS

Topic		Replies	Views
Pong collision when ball hits paddle Coding Questions	2	472	November 7, 2019
How to get balls to bounce off each other in p5.js? Coding Questions	2	4026	October 3, 2018
Pong - Ball Bouncing Bug Coding Questions	7	394	June 9, 2021
SOS! Hit Detection help in Pong Game Coding Questions homework	9	615	May 25, 2019
I need help with randomizing (javascript) Coding Questions	1	251	December 17, 2018

Two Player Pong game COLLISION FUNCTION DON'T WORK

Related topics