昨天的內容我們完成了球與paddle的互動，在我們把磚塊畫出來之前，我今天想先來處理一下球速還有角度的問題．球速跟角度有啥問題呢？？
球速其實只是單純我覺得一直不變有點無聊而已，想說之後要隨著遊戲時間逐漸提高球速，來提高遊戲難度．
真正的問題在於球的角度，昨天我們完成的內容，確實做到了將球反彈，但是卻不能控制球往哪裡彈，這會導致之後遊戲可能在某些位置的磚一輩子都打不到，當然這是說的誇張了一點，我也沒實際算過路徑也不敢保證結果，但可以肯定的是，在這樣的情況下要完成遊戲需要相當長的時間，也降低了不少遊戲的趣味性．

那我們怎麼改呢？我懶得畫圖所以先用文字敘述的，等等用程式碼來呈現．
簡單來說就是當球碰觸paddle時，碰觸點黎paddle中心越近，球反彈後就會越接近垂直；反之，離中心越遠，球的反彈就會越斜．

首先先來修改一下球速，新增球的總速，球的Ｙ軸速由Ｘ軸球速以及總速推導來．

// 球的參數
var ball_x = 300;
var ball_y = 300;
var ball_r = 10;
var ball_speed = 8;
var ball_speed_x = 5;
// 計算Ｙ軸球速
countBallSpeedY = (speed, speedX) => {
    return (speed ** 2 - speedX ** 2) ** 0.5;
}
var ball_speed_y = countBallSpeedY(ball_speed, ball_speed_x);

這邊可能會有人想說，既然Ｙ軸速度用計算的，為什麼還要多用一個變數給它呢？ 我的想法是除了遊戲一開始還有球碰到paddle時會修改Ｙ軸速度，他他時間都不需要重新計算，如果每次用到Ｙ軸速度這參數時，都還要重新呼叫這函式，有點麻煩．

好的，接下來就來處理球碰到paddle時的情況吧，在這情況下，我要做的有三件事情：增加球速、修改Ｘ軸球速以及計算Ｙ軸球速．如下

// 碰到paddle反彈
if (ball_y > (paddleTopEdgeY - ball_r) &&
    ball_y < paddleBottomEdgeY &&
    ball_x > paddleLeftEdgeX &&
    ball_x < paddleRightEdgeX) {

        // 加速
        ball_speed += 0.5;

        // paddle中心
        var centerOfPaddleX = paddle_x + PADDLE_WIDTH / 2;

        // 計算Ｘ軸球速
        ball_speed_x = ball_speed * ((ball_x - centerOfPaddleX) / (0.51 * PADDLE_WIDTH));

        // 計算Ｙ軸球速
        ball_speed_y = -1 * countBallSpeedY(ball_speed, ball_speed_x);
}

好的，現在呢當球碰觸到paddle時，就會根據碰觸位置而改變反彈角度啦．

因為今天修改的地方比較少，就不附上全code啦．