Paddle and ball game needs collision detection so ball doesnt sink through paddle

Question

I have tried copying wall collision to no avail.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var ballRadius = 10;
var x = canvas.width/2;
var y = canvas.height-30;
var dx = 2;
var dy = -2;
var paddleHeight = 10;
var paddleWidth = 75;
var paddleX = (canvas.width-paddleWidth)/2;
var rightPressed = false;
var leftPressed = false;

//event listener for my arrow key controlls
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
//holding finger down on arrow key function.
function keyDownHandler(e){
if(e.keyCode == 39){
rightPressed = true;
}
else if(e.keyCode == 37){
leftPressed = true;
}
}
//lifting finger off arrow key function
function keyUpHandler(e){
if(e.keyCode == 39){
rightPressed = false;
}
else if(e.keyCode == 37){
leftPressed = false;
}
}
//drawing our ball
function drawBall(){
ctx.beginPath();
ctx.arc(x,y,ballRadius,0,Math.PI*2);
ctx.fillStyle ="red";
ctx.fill();
ctx.stroke();
ctx.closePath();
}
//drawing our paddle
function drawPaddle(){
ctx.beginPath();
ctx.rect(paddleX,canvas.height-paddleHeight,paddleWidth,paddleHeight);
ctx.fillStyle ="blue";
ctx.fill();
ctx.stroke();
ctx.closePath();
}

//Here we display both our ball and our paddle.
function draw(){
ctx.clearRect(0,0,canvas.width,canvas.height);
drawBall();
drawPaddle();

//Here we add in collision detection for the left and right side walls of canvas
if(x + dx > canvas.width - ballRadius || x + dx < ballRadius){
dx=-dx;
}
//Here we add in collision detection for the top and bottom of our canvas.
if(y + dy > canvas.height - ballRadius || y + dy < ballRadius){
dy=-dy;
}

//right arrow key direction
if(rightPressed && paddleX < canvas.width - paddleWidth){
paddleX += 7;
}
//left arrow key function
else if(leftPressed && paddleX > 0){
paddleX -= 7;
}

x += dx;
y += dy;

}
setInterval(draw, 10);

Answer 1

also added mobile accelerometer movement (just tilt left/right)

it does cause a console log warning, and that is the downside of it....
besides that, it's heaps of fun xD

Answer 2

i see
i'll have a look and try to assist :)

Answer 3

yo blaine
check in my codes
added some comments too

Answer 4

hey again blain
check the code again
lines 114-121
code for changing angle according to ball collision coordinate with the paddle

see if it of any use to you :^)

Answer 5

its up

Answer 6

what seem to be the problem exactly?

Answer 7

^.^

Answer 8

sure thing

made some preperations for changing speed according to collision point with the paddle

this one is a bit tricky xD
i'm looking forward to see the end result :)

Answer 9

hey again Blain

made some visual aids for the game

https://code.sololearn.com/Wfdf62dI1qI3/#
the code is now private but accesible from here

Answer 10

Blaine, i've got a working code

mind if i post it?

Answer 11

that what suppose to happen but there are some 'unique' cases hehe.
for example when X speed is zero (start position) andnyou hit with the right side of the paddle the ball will shoot toward the left side instead of to the right

need to tweak the conditions a little i guess

Answer 12

then you better get going in developing it before i will xD

Answer 13

I am trying to make a breakout style pong game, where you have a paddle that you hit with a ball and the ball breaks floating bricks.

As of right now I just have a ball that bounces off the canvas walls, but my ball sinks through my paddle when it comes into contact with it and hits the bottom of the canvas. I have tried to do an "If statement" and add in collision detection to paddle similar to what I have added to my walls, but I have some weird stuff happening when I add a new "if statement," such as the ball hovering over my paddle but not bouncing anywhere. I don't know what the collision detection code for the paddle and ball should look like that allows the ball to hit paddle without the ball sinking through the paddle.

Answer 14

Wow! Thanks again Burey! I have been struggling with this for what seems my entire life. I am just breaking into collision detection and you have got me back on the right track. I like what you did with the "game over" phase. Simply Awesome :)

Answer 15

Thanks, Burey!

Answer 16

I think with what you added we have some real potential here :) ill update you upon completion!

Answer 17

Nice, dude! This is really coming together. I am guessing what you have added allows the ball to change direction based upon which way the paddle is moving when the ball makes contact with it?

Answer 18

well I like where your head is at! This is going to be one hell of a game :P

Answer 19

Do it up Burey. Spread the wealth! :)

Answer 20

lol im a turtle, i let my patience overwhelm my opponent's.