哈摟～中秋佳節愉快．
月圓之夜適合團圓，今天就讓遊戲中的角色來個大團圓，今天也不殺生啦，哈哈哈．
敵人的射擊，還有被擊殺後的消失，明天處理．後就可以為這個遊戲做個收尾．
今天要做的事情除了要顯示出所有的敵人角色之外．一併處理敵人的位置移動．

按照慣例，先來定義變數

// 敵人設定
const ENEMY_R = 20;
const ENEMY_SPACING_X = 30;
const ENEMY_SPACING_Y = 25;
const ENEMY_COLS = 9;
const ENEMY_ROWS = 7;
var enemy_grid = new Array(ENEMY_COLS * ENEMY_ROWS);
var enemy_left = 0;   

這邊的Spacing_X Spacing_Y是敵人間的空隙．

先完成一個敵人位置轉換程序號的函式

// 敵人位置轉序列
enemyToIndex = (col, row) => {
    return (col + ENEMY_COLS * row);
} 

接著重置敵人

 // 重置敵人數量
resetEnemy = () => {
    enemy_left = 0;

    for(var row = 0; row < ENEMY_ROWS; row++) {
        for (var col = 0 ; col <ENEMY_COLS; col++) {
            var enemy_index = enemyToIndex(col, row);
            if (row > 1) {
                enemy_grid[enemy_index] = 1;
                enemy_left++;
            } else {
                enemy_grid[enemy_index] = 0;
            }
        }
    }
}

然後確認對應數列上的敵人是否存在

// 對應序列敵人存在
isEnemyExist = (col, row) => {
    var enemy_index = enemyToIndex(col, row);
    return (enemy_grid[enemy_index] == 1);
}

再來是顯示敵人

// 顯示敵人
showEnemy = () => {
    for(var col = 0; col < ENEMY_COLS; col++) {
        for(var row = 0; row < ENEMY_ROWS; row++) {
            if (isEnemyExist(col, row)) {
                var enemy_x = col * (ENEMY_R + ENEMY_SPACING_X);
                var enemy_y = row * (ENEMY_R + ENEMY_SPACING_Y);
                drawCircle(enemy_x, enemy_y, ENEMY_R, 'red');
            }
        }
    }
}

要顯示敵人前，要重置敵人數量，然後顯示出來

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

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

    // 抓滑鼠位置
    canvas.addEventListener('mousemove', mousePos);

    // 滑鼠點擊
    canvas.addEventListener('mousedown', mouseClick);

    // 重置敵人
    resetEnemy();
}


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

    // 畫線
    drawLine(0, LIFE_SIZE, canvas.width, LIFE_SIZE, 'white')

    // 畫出生命
    showLife(chance);

    // 畫出玩家
    drawCircle(player_x, (canvas.height - PLAYER_DIST_FROM_EDGE), PLAYER_R, 'gray')

    // 顯示子彈
    showBullet();

    // 顯示敵人
    showEnemy();

}

現在執行起來，應該會看到一堆紅球排排站好在畫面左上角．

接下來，就要來處理敵人的左右移動啦．其實也就是將所有敵人位置加上一個水平位移而已．

// 敵人移動設定
var enemy_speed = 3;
var enemy_distance = 3 * ENEMY_R;

// 負責處理動作
move = () => {

    // 子彈移動
    moveBullet();

    // 移動敵人
    moveEnemy();
}

// 移動敵人
moveEnemy = () => {
    if(((ENEMY_R - ENEMY_SPACING_X * 2 + enemy_distance) <= 0) || ((ENEMY_R + ENEMY_SPACING_X) * ENEMY_COLS + enemy_distance >= canvas.width)) {
        enemy_speed *= -1;
    }
    enemy_distance += enemy_speed;
}

最後把這位疑加入敵人Ｘ座標

// 顯示敵人
showEnemy = () => {
    for(var col = 0; col < ENEMY_COLS; col++) {
        for(var row = 0; row < ENEMY_ROWS; row++) {
            if (isEnemyExist(col, row)) {
                var enemy_x = col * (ENEMY_R + ENEMY_SPACING_X);
                var enemy_y = row * (ENEMY_R + ENEMY_SPACING_Y);
                drawCircle(enemy_x + enemy_distance, enemy_y, ENEMY_R, 'red');
            }
        }
    }
}

ＯＫ。應該會看到這畫面