Space Defender - 프로젝트 설정 부분

이전 게시물에서 Vite 및 TypeScript를 사용하여 PixiJS 프로젝트를 설정하는 방법을 보여 드렸습니다. 이번 포스팅에서는 그 설정 위에 간단한 우주 방어 게임 건물을 만들어 보겠습니다.

이 프로젝트에서는 귀하가 TypeScript/JavaScript 프로그래밍 방법에 대한 기본 지식을 가지고 있다고 가정합니다. 그리고 우리는 PixiJS에 초점을 맞추고 있기 때문에 HTML/CSS 측면에는 너무 집중하지 않겠습니다.

최종 소스 코드는 내 GitHub 저장소에서 찾을 수 있으며, 게임을 플레이하고 싶다면 여기에서 찾을 수 있습니다.

프로젝트 설정

아직 Vite 및 TypeScript를 사용하여 PixiJS 프로젝트를 설정하지 않았다면 설정 및 실행 방법을 설명한 이전 게시물을 먼저 읽어 보시기 바랍니다.

이 프로젝트에 필요한 콘텐츠로 index.html 파일을 빠르게 설정해 보겠습니다.

다음을 포함하는 요소:

<div id="app">
    <div id="gameHud">
        <div>
            Lives: <span id="gameLives"></span>
        </div>
        <div>
            Level: <span id="gameLevel"></span>
        </div>
        <div>
            Score: <span id="gameScore"></span>
        </div>
    </div>
    <div id="game">

    </div>
</div>

이것이 우리 게임의 구조가 될 것이며, 플레이어의 생명, 레벨, 점수를 보여주는 HUD(Heads Up Display)가 있습니다. 그리고 게임을 렌더링할 게임 컨테이너입니다. 4부에서 이를 활용해 보겠습니다.

다음으로 화면에 보기 좋게 표시되도록 CSS를 적용해야 합니다. src 폴더에 있는 styles.css라는 스타일시트로 이동하여 다음 콘텐츠를 추가합니다.

body {
    margin: 0;
    background-color: darkgrey;
}

#app {
    height: 100vh;
    width: 480px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#gameHud {
    display: flex;
    width: 100%;
    padding: 10px;
    background-color: #333;
    color: white;

    > div {
        flex: 1;
    }
}

게임 화면 준비

좋아요! 이제 기본 구조는 갖춰졌으니 게임 화면을 만들어 보겠습니다. 게임이 DOM에 게임 캔버스를 삽입할 위치를 알 수 있도록 게임 컨테이너 요소를 보유하는 변수가 필요합니다.

(async () => {
    let gameContainer = document.getElementById("app");

    // ....
});

그런 다음 원하는 게임 크기에 맞게 앱 크기를 업데이트해야 합니다. 이 경우에는 너비가 480이고 높이가 720인 게임을 원합니다. 따라서 해당 크기에 맞게 app.init 호출을 업데이트해야 합니다.

await app.init({
    width: 480,
    height: 720,
});

그리고 교체

document.body.appendChild(app.canvas);

함께

gameContainer.appendChild(app.canvas);

이제 480x720픽셀 크기의 게임 화면이 화면 중앙에 표시됩니다.

다음 부분에서는 플레이어의 함선을 만들어서 움직이고 발사하도록 하겠습니다.

---

Vite 및 TypeScript를 사용한 PixiJS 설정

미스터. Linxed ・ 4월 20일

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

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

미스터. Linxed ・ 2월 18일

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

---

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

위 내용은 Space Defender - 프로젝트 설정 부분의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!