今天要做的部分是球的部分，從第一個遊戲就有畫球了，為何要需要特別拿出來說呢？
因為這次球有比較多需要注意跟處理的地方，例如城市起始的時候場上會只有一顆球，隨機給予他移動方向還有球速，碰壁後產生另一顆球，但總球數不能大於最大值．

好啦我們就先開始吧．

// 球設定
const BALL_R = 2;
const BALL_MAX = 500;
var ball_array = [];

這次因為每顆球的球速方向都不同，我們用array來記錄球的資訊，每一顆球紀錄的內容[x,y,speedx,speedy,color]．那因為一開始array是空的，需要給他第一顆球．

window.onload = () => {
    canvas = document.getElementById('playground');
    canvasContext = canvas.getContext('2d');

    // 第一顆球
    if (ball_array.length == 0) {
        var ball_x = canvas.width / 2;
        var ball_y = canvas.height / 2;
        var ball_ang = Math.random() * Math.PI * 2.0;
        var ball_speed = 3 + Math.random() * 5.0;
        var ball_color = "#" + ((1 << 24) * Math.random() | 0).toString(16);

        ball_array.push([
            ball_x,
            ball_y,
            Math.cos(ball_ang) * ball_speed,
            Math.sin(ball_ang) * ball_speed,
            ball_color
        ])
    }

    //一秒更新幾次畫面
    var timesPerSec = 30;
    setInterval(drawAll, 1000 / timesPerSec);
}

初始化了第一顆球，先把它給顯示出來吧，既然這次使用了array來記錄球，就用array的方法來解決

drawBall = (ball) => {
    ball[0] += ball[2];
    ball[1] += ball[3];

    drawCircle(ball[0], ball[1], BALL_R, ball[4]);
}

// 負責畫畫
draw = () => {
    // background
    drawRectangle(0, 0, canvas.width, canvas.height, 'black');

    // 畫球
    ball_array.forEach(item => drawBall(item));

    // 畫地圖
    drawMap();
}

用這方法，之後array中有多少顆球都會畫出來了，當然現在球還不會動，但畫面上已經能看到球了．

加上球的移動還有碰撞後

drawBall = (ball) => {
ball[0] += ball[2];
ball[1] += ball[3];

var col = Math.floor(ball[0] / MAP_BRICKS);
var row = Math.floor(ball[1] / MAP_BRICKS);
var index = brickToIndex(col, row);

if (map[index] == 1) {
    var pre_x = ball[0] -= ball[2];
    var pre_y = ball[1] -= ball[3];
    var pre_col = Math.floor(pre_x / MAP_BRICKS);
    var pre_row = Math.floor(pre_y / MAP_BRICKS);
    var test = true;

    if(pre_col != col) {
        var mapIndex = brickToIndex(pre_col, pre_row);
        if(map[mapIndex] != 1) {
            ball[2] *= -1;
            test = false;
        }
    }

    if(pre_row != row) {
        var mapIndex = brickToIndex(pre_col, pre_row);
        if(map[mapIndex] != 1) {
            ball[3] *= -1;
            test = false;
        }
    }

    if(test) {
        ball[2] *= -1;
        ball[3] *= -1;
    }

}

drawCircle(ball[0], ball[1], BALL_R, ball[4]);
}

今天就先到這吧，明天再做分裂的部分