在pixi裡面沒有直接的碰撞函式,不過可以直接使用官方寫的方式

將下面的程式碼放進檔案中,之後就可以直接呼叫來做碰撞偵測,不過這段是以兩個物件的中心點做碰撞偵測,如果是要做像是碰到牆壁的效果就要稍微改寫一下

這次用的廢物星星 範例中長寬設定是70

function hitTestRectangle(r1, r2) {
    let hit, combinedHalfWidths, combinedHalfHeights, vx, vy;
    hit = false;
    r1.centerX = r1.x + r1.width / 2; 
    r1.centerY = r1.y + r1.height / 2; 
    r2.centerX = r2.x + r2.width / 2; 
    r2.centerY = r2.y + r2.height / 2; 
    r1.halfWidth = r1.width / 2;
    r1.halfHeight = r1.height / 2;
    r2.halfWidth = r2.width / 2;
    r2.halfHeight = r2.height / 2;
    vx = r1.centerX - r2.centerX;
    vy = r1.centerY - r2.centerY;
    combinedHalfWidths = r1.halfWidth + r2.halfWidth;
    combinedHalfHeights = r1.halfHeight + r2.halfHeight;
    if (Math.abs(vx) < combinedHalfWidths) {
        if (Math.abs(vy) < combinedHalfHeights) {
        hit = true;
        } else {
        hit = false;
        }
    } else {
        hit = false;
    }
    return hit;
};

使用的方式是呼叫hitTestRectangle並放入兩個物件,就可以偵測這兩個物件是不是有碰到,
有碰到的會就會回傳true

hitTestRectangle(anim, star)

將判斷放進ticker中

app.ticker.add(delta => {
    if (hitTestRectangle(anim, star)) {
        star.alpha = 0; // 碰到之後 星星隱藏
    }
})