iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 19
0
Software Development

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

[Day19]用Canvas打造自己的遊樂場-Galaxian 終究得除蟲

  • 分享至 

  • xImage
  •  

昨天推導出來是轉換子但位置到敵人序號時,有轉換錯誤.
我們在畫出敵人時的流程是, 查詢對應敵人序號的位置是否存在,若存在,再透過加上移動距離以及敵人兼具來繪製敵人.

那這邊就先把子但判斷的部分修改一下,原先忘記把敵人間距放進來了.另外就是因為敵人只會水平移動,所以Y軸不用考量敵人移動狀況的問題,這也是之前粗心的地方.

// 是否擊中
shootCheck = (x, y) => {
    var col = Math.floor ((x - enemy_distance) / (ENEMY_R + ENEMY_SPACING_X));
    var row = Math.floor (y / (ENEMY_R + ENEMY_SPACING_Y));

    var enemyIndex = enemyToIndex(col, row);

    if(enemy_grid[enemyIndex] == 1) {
        console.log(x, y, col, row, enemy_distance, enemyIndex);
        enemy_grid[enemyIndex] = 0;
        player_shot = false;
    }
}

會變成這樣.

可以看到狀況好一些了,但是水平位置上好像還是有些錯位.先把敵人移動距離設為0來看一下實際情況.

// 移動敵人
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 += 0;
}

好的,現在很清楚的看到了有兩個問題:

  1. 判斷的位置往左一半個敵人的空間,這是我在做敵人左右移動時,給的初始化數值造成的問題. 果然不能偷懶亂寫啊,這個等等看是修正之前寫法還是加入這位移的距離,看哪種下的功夫較少
  2. 第二個問題就是,我們在轉換敵人序號時,是由二維轉成一維,在不是滿版敵人的情況下,會有不同二維數值轉換出來相同序號的情況,這個好解決,在判定是加入一個條件就行.

既然都找出問題了,就開始除蟲吧,好險不是解不了的問題.

好的,稍微修改一下子彈擊中判定的函式

// 是否擊中
shootCheck = (x, y) => {
    var col = Math.floor ((x - enemy_distance + ENEMY_SPACING_X ) / (ENEMY_R + ENEMY_SPACING_X));
    var row = Math.floor (y / (ENEMY_R + ENEMY_SPACING_Y));

    var enemyIndex = enemyToIndex(col, row);

    if(enemy_grid[enemyIndex] == 1 && col < ENEMY_COLS && col >= 0) {
        console.log(x, y, col, row, enemy_distance, enemyIndex);
        enemy_grid[enemyIndex] = 0;
        player_shot = false;
    }
}

現在看起來是這樣

太好了,終於看起來正常多了,終於解決啦~~~ 前幾天比較忙,一直找不到時間好好找錯誤的點,好在今天解決了.明天就能繼續後面的進度啦


上一篇
[Day18]用Canvas打造自己的遊樂場-Galaxian 找出問題點
下一篇
[Day20]用Canvas打造自己的遊樂場-Galaxian 敵人學會反擊啦
系列文
用Canvas打造自己的遊樂場30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言