CODEWITHSUNDEEP
javascript2dcollision-detection
Vuxer
Vuxer

Reputation: 51

Why does the ball in my pong game do this?

When under a certain angle, the ball gets trapped in the paddle, until it goes through. Here's the collision code:

if(ball.x + ball.radius > player2.x && ball.y + ball.radius > player2.y && ball.y - ball.radius < player2.y + player2.height || ball.x - ball.radius < player1.x + 20 && ball.y + ball.radius > player1.y && ball.y - ball.radius < player1.y + player1.height) {
        ball.speedX = -ball.speedX;
    }   


var ctx = document.getElementById("canvas").getContext('2d');

var player1 = {
	x:10,
	y:200,
	height:100,
	speed:10,
	leftPressed:false,
	rightPressed:false,
	upPressed:false,
	downPressed:false,
	points: 0
	},
	player2 = {
		x:770,
		y:355,
		height:100,
		speed:5,
		rightPressed:false,
		leftPressed:false,
		upPressed:false,
		downPressed:false,
		points: 0
	},
	ball = {
		x:400,
		y:250,
		radius: 10,
		speedX:8,
		speedY:2
	};

function drawPlayers() {
	ctx.fillRect(player1.x, player1.y, 20, player1.height);
	ctx.fillRect(player2.x, player2.y, 20, player2.height);	
}

function drawBall() {
	ctx.beginPath();
	ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
	ctx.fill();
}

function drawPoints() {
	ctx.font = "17px Arial";
	ctx.fillText("Points:" + player1.points, 10, 20);
	ctx.fillText("Points:" + player2.points, 730, 20);

}

function update() {
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	drawPlayers();
	drawBall();
	drawPoints();

	if(player1.leftPressed){
		player1.x -=player1.speed;
	}
	if(player1.rightPressed){
		player1.x +=player1.speed;
	}
	if(player1.upPressed){
		player1.y -=player1.speed;
	}
	if(player1.downPressed){
		player1.y +=player1.speed;
	}

	if(player2.leftPressed){
		player2.x -=player2.speed;
	}
	if(player2.rightPressed){
		player2.x +=player2.speed;
	}
	if(player2.upPressed){
		player2.y -=player2.speed;
	}
	if(player2.downPressed){
		player2.y +=player2.speed;
	}

	ball.x += ball.speedX;
	ball.y += ball.speedY;

	if(ball.x + ball.radius > canvas.width) {
		player1.points ++;
		ball.x = 400;
		ball.y = 250;
	}
	else if(ball.x - ball.radius < 0) {
		player2.points ++;
		ball.x = 400;
		ball.y = 250;

	}

	if(ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
		ball.speedY = -ball.speedY;
	}

	if(ball.x + ball.radius > player2.x && ball.y + ball.radius > player2.y && ball.y - ball.radius < player2.y + player2.height || ball.x - ball.radius < player1.x + 20 && ball.y + ball.radius > player1.y && ball.y - ball.radius < player1.y + player1.height) {
		ball.speedX = -ball.speedX;
	}	

	requestAnimationFrame(update);
}

update();

document.body.addEventListener("keydown", function(e) {
	//left
	if(e.keyCode === 65) {
		player1.leftPressed = true;
	}
	//right
	if(e.keyCode === 68) {
		player1.rightPressed = true;
	}
	//up
	if(e.keyCode === 87) {
		player1.upPressed = true;
	}
	//down
	if(e.keyCode === 83) {
		player1.downPressed = true;
	}

	if(e.keyCode === 37) {
		player2.leftPressed = true;
	}
	//right
	if(e.keyCode === 39) {
		player2.rightPressed = true;
	}
	//up
	if(e.keyCode === 38) {
		player2.upPressed = true;
	}
	//down
	if(e.keyCode === 40) {
		player2.downPressed = true;
	}
});
document.body.addEventListener("keyup", function(e) {
	//left
	if(e.keyCode === 65) {
		player1.leftPressed = false;
	}
	//right
	if(e.keyCode === 68) {
		player1.rightPressed = false;
	}
	//up
	if(e.keyCode === 87) {
		player1.upPressed = false;
	}
	//down
	if(e.keyCode === 83) {
		player1.downPressed = false;
	}

	if(e.keyCode === 37) {
		player2.leftPressed = false;
	}
	//right
	if(e.keyCode === 39) {
		player2.rightPressed = false;
	}
	//up
	if(e.keyCode === 38) {
		player2.upPressed = false;
	}
	//down
	if(e.keyCode === 40) {
		player2.downPressed = false;
	}
});
canvas {
	border:1px solid black;
}
<html>
<body>
<canvas id="canvas" width="800" height="500"></canvas>
</body>
</html>

Upvotes: 1

Views: 67

Answers (1)

Marco Luzzara
Marco Luzzara

Reputation: 6056

Actually there are several cases you have to correct, but the problem is the same for all. You did not consider the case when the ball hit the player sideways. More specifically, these are the conditions you miss:

if (ball.x > player2.x && ball.y + ball.radius > player2.y)
if (ball.x > player2.x && ball.y + ball.radius < player2.y + player2.height)

And similarly for player1.

Upvotes: 1

Related Questions