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

적 만들기

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

하지만 먼저 적을 생성하는 메서드를 만듭니다. 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  app.screen.height   50) {
        app.stage.removeChild(enemy);
        enemies.splice(i, 1);
    }
}

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

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

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

적을 쏘다

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

for(let i = 0; i  enemy.x &&
            bullet.x  enemy.y &&
            bullet.y 


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

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

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





  
    

      
    
  
  
    

      
Vite 및 TypeScript를 사용한 PixiJS 설정
      
씨. Linxed ・ 4월 20일
      

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





  
    

      
    
  
  
    

      
"Cult of Done"으로 더 많은 것을 성취하세요
      
씨. Linxed ・ 2월 18일
      

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







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