iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 20
0
Software Development

用Canvas打造自己的遊樂場系列 第 20

[Day20]用Canvas打造自己的遊樂場-Galaxian 敵人學會反擊啦

今天厭世週一,連假後的上班首日,竟然馬上變天,老天爺真的很愛考驗大家的毅力. 大家辛苦了~~
今天呢要來寫的部分就是,敵人發射子彈.
首先當然是先加入會使用到的參數.

// 敵人子彈設定
var enemy_bullet_x;
var enemy_bullet_y;
var enemy_shot = false;

子彈大小以及速度沿用玩家的即可.

加入顯示敵人子彈

// 顯示子彈
showBullet = () => {
    // 如果玩家發射子彈
    if(player_shot) {
        drawCircle(bullet_x, bullet_y, BULLET_R, '#FF9D6F')
    }

    // 如果敵人發射子彈
    if(enemy_shot) {
        drawCircle(enemy_bullet_x, enemy_bullet_y, BULLET_R, '#FF60AF')
    }
}

當然還有子彈的移動

// 移動子彈
moveBullet = () => {
    // 玩家發射子彈
    if(player_shot) {
        bullet_y -= BULLET_SPEED;

        //確認子但是否擊中
        shootCheck(bullet_x, bullet_y);

        // 若子彈超出邊界,重新上膛
        if(bullet_y < 0) {
            player_shot = false;
        }
    }

    // 敵人發射子彈
    if(enemy_shot) {
        enemy_bullet_y += BULLET_SPEED;

        // 若子彈超出邊界,重新上膛
        if(enemy_bullet_y > canvas.height) {
            enemy_shot = false;
        }
    }
}

剩下的就是子彈的發射啦.如果子彈發射的位置離玩家很遠,其實會很難打到玩家,所以要由哪一個敵人發射子但是需要一點點設計的.

// 敵人發射子彈
enemyShoot = () => {
    // 如果已經發射,直接返回
    if(enemy_shot) {
        return;
    }

    // 根據玩家位置發射
    var col = ( player_x - enemy_distance + ENEMY_SPACING_X) / (ENEMY_R + ENEMY_SPACING_X);

    col = Math.floor(col);

    if(col < 0 || col >= ENEMY_COLS) {
        return;
    }

    //由最下方敵人發射
    for (var row = ENEMY_ROWS - 1; row >= 0; row--) {
        var enemyIndex = enemyToIndex(col, row);
        if(enemy_grid[enemyIndex] == 1) {
            enemy_shot = true;
            enemy_bullet_x = col * (ENEMY_R + ENEMY_SPACING_X) + enemy_distance;
            enemy_bullet_y = row * (ENEMY_R + ENEMY_SPACING_Y) + ENEMY_R;
            return;
        }
    }
}

當然最後要記得放上敵人發射的函式

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

    // 子彈移動
    moveBullet();

    // 移動敵人
    moveEnemy();

    // 敵人發射
    enemyShoot();
}

今天就先到這裡吧,實在是太想睡覺了,明天再繼續.

啊補上個敵人發射的畫面


上一篇
[Day19]用Canvas打造自己的遊樂場-Galaxian 終究得除蟲
下一篇
[Day21]用Canvas打造自己的遊樂場-Galaxian 收尾
系列文
用Canvas打造自己的遊樂場30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言