javascript - Canvas Ball bounces in wrong direction when pong paddle is moving -

i start off note. tried using jsfiddle reason html5 canvas not work. workaround used http://jsbin.com/gugihuwegopa/1/. edit site, click edit button @ top right corner of window. anyway, problem is, when paddle not moving, ball bounces correctly off sides (the nomove variable has nothing that, make disappear "w" key). however, when move paddle mouse towards ball, gets stuck inside paddle. think because not updating location of paddle fast enough ball ends inside of it, , code continues cause ball bounce while inside. (until moving paddle rapidly away , gets unstuck). yes have tried putting cxt.fillrect before cxt.arc(). ball travel through paddle well. figure way fix factoring in direction of ball in 2 if statements:

if(y+ymove>=w && y+ymove<=w+h && x>=s && x<=s+l ) ymove*=-1; //top , bottom if(x+xmove>=s && x+xmove<=s+l && y+ymove<=w+h && y+ymove>=w ) xmove*=-1; //left , right 

some other methods have tried include:

    if(y+ymove>=w && y+ymove<=w+h && x>=s && x<=s+l && centery+17.5 < y+ymove+5 && centerx+12.5 < x+xmove+5) ymove*=-1; //top , bottom, +5 radius     if(x+xmove>=s && x+xmove<=s+l && y+ymove<=w+h && y+ymove>=w && centerx+12.5 < x+xmove+5 && centery+17.5 < y+ymove+5) xmove*=-1; //left , right 

so need ball bounce correctly no matter how move paddle. feel free edit want, if means adding more if statements. ask absolutely no jquery. in advance.

you must think of collision handling having (at least) 2 phases : collision detection , collision resolution. here solve collision changing speed, both objects might still intersect if 1 speed high : 1 object might inside other : have solve position, or, if prefer 'push' ligthest object out of heaviest. can using few min/max on x,y,w,h of both objects.

or, there's 'dynamic' method avoid object overlap : have collision handling time-driven. split collision handling time sub-steps, making stop on each collision. must compute time when next collision happen, move time, update speeds, , again until enough time elapsed. there not chance overlap can happen : 'stop watch' on collision, change speed, restart time again. , several collision can happen in 1 frame, case won't handled single-pass algorithm (case when ball hit near corner). example : game frame time, 'dt' 16 ms, detect ball hits paddle @ 10.2ms -> make both object moves 10.2ms (x+=vx*10.2/y...), solve speed (only), ask collision engine iterate further 5.8ms.
it's little work did in game engine, works fine.

(hope i've been more helping confusing... :-) )