Ping-pong game with JavaScript and Canvas I have created my first ping-pong game with JavaScript and Canvas. I will be glad if anybody can tell me how to optimize the code and functionality.

https://github.com/nikitalarionov/js-pong

First collision detection:

//Function to check collision between ball and one of
//the paddles
function collides(b, p) {

    if(b.x + ball.r &gt;= p.x + p.w &amp;&amp; b.x - ball.r &lt;= p.x + p.w) {

        if (b.y + b.r &gt;= p.y &amp;&amp; b.y + b.r &lt;= p.y + p.h &amp;&amp; b.x - b.r &lt;= p.x) {
            paddleHit = 1;
            if(b.x &lt; W/ 2) {
                hit++;
            } else if (b.x &gt; W / 2) {
                hit2++;
            }
            return true;
        }
        else if(b.y - b.r &lt;= p.y &amp;&amp; b.y - b.r &gt;= p.y - p.h &amp;&amp; b.x + b.r &gt;= p.x) {
            paddleHit = 2;
            if(b.x &lt; W/ 2) {
                hit++;
            } else if (b.x &gt; W / 2) {
                hit2++;
            }                
            return true;
        }
        else return false;

    }
}


I experience bad performance when the ball hits an angle of one of the paddles:

// Function that updates everything, score, positions, main game logic
function update(){
    // Move the padles
    for(var i = 0; i &lt;= padles.length; i++) {
        var p = padles[i];
        if (i === 0 &amp;&amp; players[0].moveUp) {
            if (p.y &lt;= 0) {
                p.y = 0;
            }
            else {
                                    // is it how i move left paddle
                                    // it is doesn't work good like a mousemove
                                    // animations is slowly, i dont know how to fix it
                p.y -=25;    
            }
        }
        if (i === 0 &amp;&amp; players[0].moveDown) {
            if (p.y + p.h &gt;= H) {
                p.y = H - p.h;
            }
            else {
                p.y += 25;
            }
        }
        if (mouse.y &amp;&amp; i === 1) {
            if (p.y + p.h &gt;= H &amp;&amp; mouse.y &gt; p.y) {
                p.y = H - p.h;
            }
            else {
                p.y = (mouse.y -50) - p.w / 10;    
            }
        }
    }

            // ... some code

}


There I have very lazy animation and moving of the left paddle. I use keys for it outside of the animation cycle:

    // Add Global Event to handle keyboards buttons
window.addEventListener('keydown', function(e) {
    if (e.keyCode === 87) {
        players[0].moveUp = true;
    } else
    if (e.keyCode === 83) {
        players[0].moveDown = true;
    }
}, false);

window.addEventListener('keyup', function(e) {
    if (e.keyCode === 87) {
        players[0].moveUp = false;
    } else
    if (e.keyCode === 83) {
        players[0].moveDown = false;
    }
}, false);
From a once-over,


Short 1 letter variables are terrible ( except for x and y ), b, p and W are just terrible
Also please spellcheck your variables: padles -> paddles
You should only detect collision when the ball is going to the left and gets in the danger-zone or when it is going to the right and getting in the danger-zone. So instead of doing 8 accesses, 1 AND and 4 sums (if(b.x + ball.r &gt;= p.x + p.w &amp;&amp; b.x - ball.r &lt;= p.x + p.w) {) you should rather do something like 

if( deltaX &lt; 0 &amp;&amp; ball.x &lt; someLimit ){
  testCollision( ball , leftPaddle );
} else if( ball.x &gt; someOtherLimit  ) {
  testCollision( ball , rightPaddle );
}


Where deltaX is the amount of pixels the ball is moving over the X axis, this should make paddle collision a lot more efficient
Please don't use magical constants, in this case I see 25 all over the place
Same for the keycodes, you should use constants for those