Space Defender - 적을 분리하세요

마지막 부분에서는 플레이어의 배를 만들고 움직이게 만들었습니다. 이 부분에서는 적을 생성하고 움직이게 만듭니다. 그런 다음 우리는 그들을 격추할 것입니다!

적 만들기

총알을 만들 때와 비슷한 작업을 수행하겠습니다. 새로운 적을 생성할 때마다 복제할 템플릿 적을 생성하겠습니다. 또한 동시에 둘 이상이 있을 수 있으므로 배열을 통해 적들을 추적해야 합니다.

하지만 먼저 적을 생성하는 방법을 만들어 보겠습니다. createBullet 메서드 뒤에 다음 코드를 추가합니다.

let enemyTemplate: PIXI.Graphics | undefined = undefined;
function createEnemy() {
    if(!enemyTemplate) {
        enemyTemplate = new Graphics();
        enemyTemplate
            .poly([
                0, 0,
                50, 0,
                25, 25,
            ])
            .fill(0xFF6666);
    }

    const enemy = enemyTemplate.clone();
    enemy.x = 25 + (Math.random() * 480) - 50;
    enemy.y = -50;

    return enemy;
}

보시다시피 createBullet 메소드와 꽤 유사합니다. 새로운 적을 생성하고 싶을 때마다 복제하는 템플릿 적을 생성합니다. 그런 다음 적을 화면 상단의 임의의 x 위치에 배치합니다. 적군은 플레이어의 함선과 같은 모양을 하고 있지만 빨간색이고 거꾸로 되어 있습니다.

x 및 y 속성을 설정하여 적의 스폰 위치를 지정합니다. x 속성은 25~480~50 사이의 임의의 값으로 설정되어 적이 항상 게임 화면 내에 있도록 합니다. y 속성은 -50으로 설정되어 적이 화면 바로 바깥에 있고 화면 안으로 이동하게 됩니다.

다음으로 이 메서드를 호출하여 몇 초마다 새로운 적을 생성해야 합니다.

적 생성

이를 위해 setInterval 메소드를 사용하겠습니다. 글머리 기호 배열을 정의한 위치 바로 뒤에 다음 코드를 추가합니다.

const enemies: PIXI.Graphics[] = [];

const enemySpawnInterval = 2500;
function spawnEnemy() {
    if(!document.hasFocus()) {
        return;
    }
    const enemy = createEnemy();
    enemies.push(enemy);
    app.stage.addChild(enemy);
}

setInterval(spawnEnemy, enemySpawnInterval);
spawnEnemy();

모든 적을 추적하기 위해 적이라는 새로운 배열을 만듭니다. 그런 다음 새 적을 생성하려는 빈도를 지정하는 적SpawnInterval이라는 새 변수를 만듭니다. 그런 다음 새 적을 생성하고 이를 적 배열과 스테이지에 추가하는spawnEnemy라는 새 메서드를 만듭니다. 그런 다음 setInterval 메소드를 사용하여 적SpawnInterval 밀리초마다 이 메소드를 호출합니다.

멋지네요. 이제 2.5초마다 화면 상단에 적이 생성됩니다. 하지만 그들은 아직 움직이지 않고 화면 밖에 있기 때문에 우리는 그들을 볼 수 없습니다. 문제를 해결해 보겠습니다.

적을 이동

게임 루프에서 적의 위치를 ​​업데이트해야 합니다. 총알의 위치를 ​​업데이트하는 바로 아래에 있는 게임 루프에 다음 코드를 추가하세요.

for(let i = 0; i < enemies.length; i++) {
    const enemy = enemies[i];
    enemy.y += 2.5;

    if(enemy.y > app.screen.height + 50) {
        app.stage.removeChild(enemy);
        enemies.splice(i, 1);
    }
}

코드의 이 부분은 모든 적에 대해 반복하고, 적을 2.5픽셀 아래로 이동하여 위치를 업데이트하고, 적들이 경계를 벗어났는지 확인합니다. 그렇다면 무대와 적군 배열에서 제거합니다.

좋아요! 지금 게임을 실행하면 적들이 화면 상단에 생성되어 아래로 이동하는 것을 볼 수 있습니다.

이제 그들을 격추할 시간입니다!

적을 쏘다

적의 위치를 ​​업데이트하는 바로 아래 게임 루프에 다음 코드를 추가하세요.

for(let i = 0; i < bullets.length; i++) {
    const bullet = bullets[i];
    for(let j = 0; j < enemies.length; j++) {
        const enemy = enemies[j];
        if(
            bullet.x > enemy.x &&
            bullet.x < enemy.x + 50 &&
            bullet.y > enemy.y &&
            bullet.y < enemy.y + 25
        ) {
            app.stage.removeChild(bullet);
            app.stage.removeChild(enemy);
            bullets.splice(i, 1);
            enemies.splice(j, 1);
        }
    }
}

코드의 이 부분은 모든 총알과 모든 적을 반복하여 총알이 적에게 맞는지 확인합니다. 그렇다면 무대와 각각의 배열에서 총알과 적 모두를 제거합니다.

총알이 적에게 명중할 때 내부 루프를 중단하여 이 코드를 최적화할 수 있지만 지금은 괜찮습니다. 총알 위치 업데이트 루프와 총알 히트 확인 루프를 결합할 수도 있지만 이 튜토리얼의 명확성을 위해 두 루프를 별도로 유지하는 것이 좋습니다.

그리고 그게 다입니다! 이제 좌우로 움직이고, 총알을 쏘고, 적을 격추할 수 있는 게임이 생겼습니다. 다음 부분에서는 게임에 몇 가지 HUD 요소를 추가하고 플레이어의 점수, 레벨 및 생명을 추적할 예정입니다.

---

Vite 및 TypeScript를 사용한 PixiJS 설정

미스터. Linxed ・ 4월 20일

#웹개발 #자바스크립트 #초보자 #지도 시간

"Cult of Done"으로 더 많은 것을 성취하세요

미스터. Linxed ・ 2월 18일

#생산력 #초보자 #논의하다 #동기 부여

---

이와 유사한 튜토리얼을 가장 먼저 알아보려면 내 뉴스레터에 등록하는 것을 잊지 마세요.

위 내용은 Space Defender - 적을 분리하세요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!