Space Defender - 일부 게임 상태-JS 튜토리얼-php.cn

이전 게시물에서는 HUD를 사용했으며 이제 게임은 기본적으로 완료되었지만 몇 가지 사항이 누락되었습니다. 게임을 다시 시작하는 방법과 함께 게임 오버 화면을 추가해야 합니다. 또한 게임을 바로 시작하는 것이 아니라 방금 게임을 시작했을 때의 화면을 추가하고 싶습니다.

게임 상태

게임에 몇 가지 게임 상태를 추가할 예정입니다. 우리는 게임의 다양한 상태를 담을 gameState 열거형을 갖게 될 것입니다. 또한 게임의 현재 상태를 유지하는 변수도 갖게 됩니다.

main.ts 파일 시작 부분에 다음 코드를 추가하세요.

enum gameStates {
    "PLAYING",
    "PAUSED",
    "GAME_OVER"
}
let gameState = gameStates.PAUSED;

로그인 후 복사

이 코드는 게임의 다양한 상태를 보유하는 gameStates라는 열거형을 생성합니다. 그런 다음 게임의 현재 상태를 보유하는 gameState라는 변수를 만듭니다. 초기 상태를 PAUSED로 설정했습니다.

이러한 상태에 대해 작업을 수행하기 전에 재설정 기능이 필요합니다. 이 함수는 게임을 시작하기 직전에 호출됩니다. main.ts 파일 맨 아래에 다음 코드를 추가하세요.

function resetGame() {
    lives = 3;
    level = 1;
    score = 0;
    setHudValue("gameLives", lives);
    setHudValue("gameLevel", level);
    setHudValue("gameScore", score);
    Player.x = app.screen.width / 2 - Player.width / 2;
    Player.y = app.screen.height - 50;
    bullets.forEach(bullet => app.stage.removeChild(bullet));
    enemies.forEach(enemy => app.stage.removeChild(enemy));
    bullets.length = 0;
    enemies.length = 0;
    setEnemySpawnInterval();
    spawnEnemy();
}

로그인 후 복사

이렇게 하면 모든 값이 초기 시작 값으로 설정되고, 스테이지와 배열에서 총알과 적들이 제거되고, 플레이어의 위치가 재설정되며, 적 스폰 간격이 설정됩니다. 그런 다음 적을 생성하여 게임을 시작합니다.

이제 설정되었으므로 게임을 시작하는 방법을 추가해 보겠습니다.

게임 시작하기

이를 위해 새로운 KeyHandler를 추가할 예정입니다. 왼쪽 및 오른쪽 화살표 키에 대해 KeyHandler를 정의한 위치 바로 뒤에 다음 코드를 추가합니다.

KeyHandler(
    "Enter",
    () => {
        if(gameState !== gameStates.PLAYING) {
            if(gameState === gameStates.GAME_OVER) {
                resetGame();
            }
            gameState = gameStates.PLAYING;
            togglePauseText();
        }
    }
);

로그인 후 복사

이 코드는 플레이어가 Enter 키를 누르면 게임을 시작합니다. 게임이 PLAYING 상태가 아닌 경우 게임 상태를 PLAYING으로 설정합니다. 게임이 GAME_OVER 상태인 경우 게임을 재설정한 다음 게임 상태를 PLAYING으로 설정합니다.

하지만 플레이어는 이를 알지 못하므로 플레이어에게 무엇을 해야 할지 알려주는 텍스트가 필요합니다. KeyHandler를 정의한 위치 바로 뒤에 다음 코드를 추가하세요

// A simple text style, 24px white text
const textsStyle = {
    fontSize: 24,
    fill: 0xFFFFFF
};

let startGameText = new PIXI.Text({
    text: 'Press enter to start the game',
    style: textsStyle
});

startGameText.y = 250;

function togglePauseText() {
    if(gameState === gameStates.PAUSED || gameState === gameStates.GAME_OVER) {
        // Since the text can change, we need to reposition it.
        startGameText.x = app.screen.width / 2 - startGameText.width / 2;
        app.stage.addChild(startGameText);
    } else {
        app.stage.removeChild(startGameText);
    }
}
togglePauseText();

로그인 후 복사

이 코드는 "게임을 시작하려면 Enter를 누르세요"라는 새 텍스트 개체를 생성하여 화면 중앙에 배치합니다. 그런 다음 현재 게임 상태를 기반으로 텍스트를 표시하거나 숨기는 TogglePauseText라는 함수를 만듭니다. 그런 다음 이 함수를 호출하여 게임이 일시 중지되거나 종료될 때 텍스트를 표시합니다.

이제 게임도 일시정지하고 싶습니다.

게임 일시중지

왼쪽 및 오른쪽 화살표 키에 대해 KeyHandler를 정의한 위치 바로 뒤에 다음 코드를 추가합니다.

KeyHandler(
    "Escape",
    () => {
        if(gameState !== gameStates.PAUSED) {
            gameState = gameStates.PAUSED;
            startGameText.text = 'Press enter to resume the game';
            togglePauseText();
        }
    }
);

로그인 후 복사

이 코드에서는 플레이어가 Esc 키를 누를 때 gameState를 PAUSED로 설정합니다. 또한 startGameText 개체를 재사용하고 텍스트를 "게임을 재개하려면 Enter를 누르세요"로 설정합니다.

게임 상태 사용

좋습니다. 이제 PLAYING 상태와 PAUSED 상태 사이를 전환할 수 있으므로 실제로 이러한 상태를 사용하고 그에 따라 게임이 작동하도록 합시다.

PLAYING 상태가 아닌 경우 플레이어가 왼쪽 또는 오른쪽 화살표 키를 누를 때 playerSpeed를 설정하고 싶지 않습니다. 왼쪽 및 오른쪽 화살표 키에 대해 playerSpeedX를 500 또는 -500으로 설정하는 KeyHandlers에 다음 코드를 추가합니다.

if (gameState !== gameStates.PLAYING) {
    return;
}

로그인 후 복사

게임이 일시 중지되거나 종료될 때 플레이어가 총을 쏠 수 없도록 스페이스바 KeyHandler의 핸들러에 위 코드를 추가하세요.

다음으로,spawnEnemy 함수의 if 문을 다음과 같이 업데이트하세요.

if(!document.hasFocus() || gameState !== gameStates.PLAYING) {
    return;
}

로그인 후 복사

마지막으로, 일시 중지된 경우 전체 게임 루프가 실행될 필요가 없습니다. 게임 루프 시작 부분에 다음 코드를 바로 추가하세요.

if(gameState !== gameStates.PLAYING) {
    return;
}

로그인 후 복사

게임 오버

이제 게임을 시작하고 일시 중지하는 방법이 생겼으니 화면 위에 게임을 추가해 보겠습니다.

이제 console.log("Game Over")가 있고 게임 상태를 GAME_OVER로 설정하고 텍스트 위에 게임을 표시하려고 합니다. console.log를 다음 코드로 바꿉니다.

gameState = gameStates.GAME_OVER;
startGameText.text = 'Press enter to restart the game';
scoreText.text = `Score: ${score}`;
scoreText.x = app.screen.width / 2 - scoreText.width / 2;
app.stage.addChild(gameOverText);
togglePauseText();
app.stage.addChild(scoreText);

로그인 후 복사

이 코드는 아직 생성하지 않은 두 개의 텍스트 개체를 더 사용하고 있습니다. 그렇게 하도록 하겠습니다.

startGameText 개체를 생성한 위치 바로 뒤에 다음 코드를 추가합니다.

let gameOverText = new PIXI.Text({
    text: 'GAME OVER',
    style: textsStyle
});

gameOverText.x = app.screen.width / 2 - gameOverText.width / 2;
gameOverText.y = 200;

let scoreText = new PIXI.Text({
    text: 'Score: 0',
    style: textsStyle
});

scoreText.y = 300;

로그인 후 복사

이제 게임을 플레이하고 일시 정지했다가 패배 시 다시 시작할 수 있습니다.

결론

그리고 그게 다입니다! 이제 게임을 플레이하고 일시 정지했다가 패배 시 다시 시작할 수 있습니다.

마지막 부분이 다소 부담스러울 수도 있다는 점을 알고 있지만 모든 내용을 따라하고 이해하셨기를 바랍니다. 언제든지 전체 소스 코드를 확인할 수 있다는 점을 잊지 마세요. 질문이나 의견이 있으시면 언제든지 X로 연락하시거나 아래에 댓글을 남겨주세요

이것이 이 작은 시리즈의 마지막 부분입니다. 재미있게 즐기고 새로운 것을 배웠기를 바랍니다. 이 글을 남기면서 제가 지적하고 싶은 작은 점은 이 게임이 매우 기본적인 게임이고 이를 개선할 수 있는 방법이 많다는 것입니다. 더 많은 적, 파워업, 다양한 레벨 등을 추가할 수 있습니다. 새로운 것을 실험하고 시도하는 것이 개발자로서 배우고 성장하는 방법입니다.

또한 이 게임의 구조가 게임을 구성하는 가장 좋은 방법은 아니지만, 이 튜토리얼의 목적을 위해 간단하게 하나의 파일로 유지하고 싶었습니다. 향후 튜토리얼에서는 보다 확장 가능한 방식으로 게임을 구성하는 방법을 보여드릴 수도 있습니다.

이 튜토리얼을 끝까지 읽어주셔서 감사합니다!