+ 2

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

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);

31st Jan 2017, 8:52 PM
Sushi_Theif
Sushi_Theif - avatar
22 Respuestas
+ 6
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
31st Jan 2017, 10:25 PM
Burey
Burey - avatar
+ 5
i see i'll have a look and try to assist :)
31st Jan 2017, 9:53 PM
Burey
Burey - avatar
+ 5
yo blaine check in my codes added some comments too
31st Jan 2017, 10:18 PM
Burey
Burey - avatar
+ 5
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 :^)
31st Jan 2017, 11:36 PM
Burey
Burey - avatar
+ 5
its up
2nd Feb 2017, 5:05 PM
Burey
Burey - avatar
+ 4
what seem to be the problem exactly?
31st Jan 2017, 9:33 PM
Burey
Burey - avatar
+ 4
^.^
31st Jan 2017, 9:57 PM
Burey
Burey - avatar
+ 4
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 :)
31st Jan 2017, 10:51 PM
Burey
Burey - avatar
+ 4
hey again Blain made some visual aids for the game https://code.sololearn.com/Wfdf62dI1qI3/# the code is now private but accesible from here
1st Feb 2017, 11:54 AM
Burey
Burey - avatar
+ 4
Blaine, i've got a working code mind if i post it?
2nd Feb 2017, 3:45 PM
Burey
Burey - avatar
+ 3
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
1st Feb 2017, 5:27 PM
Burey
Burey - avatar
+ 3
then you better get going in developing it before i will xD
1st Feb 2017, 5:39 PM
Burey
Burey - avatar
+ 1
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.
31st Jan 2017, 9:48 PM
Sushi_Theif
Sushi_Theif - avatar
+ 1
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 :)
31st Jan 2017, 10:49 PM
Sushi_Theif
Sushi_Theif - avatar
0
Thanks, Burey!
31st Jan 2017, 9:56 PM
Sushi_Theif
Sushi_Theif - avatar
0
I think with what you added we have some real potential here :) ill update you upon completion!
31st Jan 2017, 11:12 PM
Sushi_Theif
Sushi_Theif - avatar
0
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?
1st Feb 2017, 5:25 PM
Sushi_Theif
Sushi_Theif - avatar
0
well I like where your head is at! This is going to be one hell of a game :P
1st Feb 2017, 5:37 PM
Sushi_Theif
Sushi_Theif - avatar
0
Do it up Burey. Spread the wealth! :)
2nd Feb 2017, 4:55 PM
Sushi_Theif
Sushi_Theif - avatar
0
lol im a turtle, i let my patience overwhelm my opponent's.
2nd Feb 2017, 5:08 PM
Sushi_Theif
Sushi_Theif - avatar