Pokémon Battle Tower React와 PokeAPI로 구현한 웹 포켓몬 배틀 게임

Pokémon Battle Tower: React와 PokeAPI로 구현한 웹 포켓몬 배틀 게임

안녕하세요! 오늘은 제가 만든 웹 기반의 포켓몬 배틀 타워 게임, Pokémon Battle Tower 프로젝트를 소개하려고 합니다. 웹 브라우저에서 바로 포켓몬 배틀을 즐길 수 있는 싱글 플레이 게임입니다.

1. 프로젝트 소개

이 프로젝트는 React와 Create React App을 기반으로 만들어졌습니다. PokeAPI를 활용하여 방대한 포켓몬과 기술 데이터를 가져와 실제와 유사한 배틀 환경을 구현하는 것을 목표로 했습니다. 주요 특징은 다음과 같습니다.

• 턴 기반 배틀 시스템: 실제 포켓몬 게임처럼 플레이어와 AI가 턴을 주고받으며 배틀합니다.
• 배틀 타워 형식: AI 트레이너를 차례로 이기며 스테이지(최대 100단계)를 올라가는 도전적인 게임 방식입니다.
• 포켓몬/기술/아이템 선택: 원하는 포켓몬 3마리와 각 포켓몬이 사용할 기술 4개, 그리고 지니게 할 아이템을 자유롭게 선택할 수 있습니다.
• 배틀 로직 구현: 데미지 계산(타입 상성, 능력치 등 고려), 명중률, 상태 이상 등 기본적인 배틀 규칙을 구현했습니다.
• 게임 저장/로드: 로컬 스토리지를 이용하여 게임 진행 상황을 저장하고, 언제든 이어서 플레이할 수 있습니다.

2. 주요 기능 둘러보기

🎮 시작 화면 (StartScreen.js)

게임의 첫인상이죠! 깔끔하게 ‘새 게임 시작’ 버튼과 ‘이어하기’ 버튼을 제공합니다. 로컬 스토리지에 저장된 게임 데이터가 있으면 ‘이어하기’ 버튼이 활성화되어 마지막으로 클리어한 스테이지부터 다시 시작할 수 있습니다.

// src/components/StartScreen.js // ... <Button onClick={onNewGame}>새 게임 시작</Button> <Button onClick={handleLoad} disabled={!canLoad}> 이어하기 (스테이지 {localStorage.getItem('pokemonBattleTowerSave') ? JSON.parse(localStorage.getItem('pokemonBattleTowerSave')).savedCurrentStage : '??'}) </Button> // ...

⚙️ 포켓몬/기술/아이템 선택 (PokemonSelection.js)

배틀에 참여할 나만의 팀을 구성하는 단계입니다.

1. 세대 선택: 원하는 포켓몬 세대를 선택하거나, ‘모든 포켓몬’을 선택하여 전체 도감에서 고를 수 있습니다.
2. 포켓몬 선택: 선택한 범위 내의 포켓몬들이 목록으로 나타나며, 이 중에서 3마리를 선택합니다. (Grid, ItemCard 컴포넌트 활용)
3. 기술 선택: 각 포켓몬별로 배울 수 있는 공격 기술 중에서 최대 4개까지 선택합니다. (PokeAPI 연동)
4. 아이템 선택: 각 포켓몬에게 도움이 될 아이템을 하나씩 지니게 할 수 있습니다. (선택 사항, src/data/items.js 목록 참조)

🔥 배틀 화면 (BattleScreen.js, App.css)

게임의 핵심! AI 트레이너와 치열한 배틀을 벌이는 화면입니다.

• 포켓몬 표시: 플레이어 포켓몬(뒷모습)과 상대 포켓몬(앞모습)이 마주보고 배치됩니다. (PokemonCard.js)
• 상태 표시: HP 바, 상태 이상(독, 마비, 화상 등), 혼란 상태 등이 시각적으로 표시되어 배틀 상황을 쉽게 파악할 수 있습니다.
• 턴 진행: 플레이어와 AI가 번갈아 가며 기술을 사용합니다.
• UI: 사용할 기술을 선택하는 버튼(MoveSelection.js), 포켓몬 교체 메뉴, 배틀 상황을 알려주는 로그(BattleLog.js)가 제공됩니다.

📊 배틀 로직 (battleLogic.js)

배틀의 승패를 가르는 중요한 로직들이 구현되어 있습니다.

• 데미지 계산 (calculateDamage): 포켓몬 레벨, 공격/방어 능력치, 기술 위력, 타입 상성(2배, 0.5배, 0배), 자속 보정(STAB), 급소 여부, 랜덤 데미지 변동 등을 고려하여 실제 게임과 유사하게 데미지를 계산합니다.
• 타입 상성 (getTypeEffectiveness, getTypeChart): PokeAPI에서 가져온 타입 데이터를 기반으로 기술 타입과 방어 포켓몬 타입 간의 상성을 계산하여 데미지에 반영합니다.
• 명중률 (checkAccuracy): 기술 자체의 명중률에 따라 공격이 명중할지 빗나갈지 결정합니다. (랭크 변화는 미구현)
• 부가 효과 (applyEffects, handleStatusEffects): 기술 사용 시 발생할 수 있는 상태 이상(독, 화상, 마비, 잠듦, 얼음), 혼란, 능력치 변화 등의 효과를 적용하고, 턴마다 상태 이상으로 인한 데미지나 행동 제약을 처리합니다.
• AI 로직 (chooseOpponentMove): 상대 AI는 플레이어 포켓몬의 타입과 자신의 기술 정보를 고려하여 가장 효과적이거나 합리적인 기술을 선택하도록 구현되었습니다.

📈 스테이지 진행 및 게임 관리 (App.js)

배틀 타워를 오르는 여정을 관리합니다.

• 스테이지 클리어 (StageClear.js): 상대 트레이너의 포켓몬 3마리를 모두 쓰러뜨리면 해당 스테이지를 클리어합니다.
• 회복 및 저장: 스테이지 클리어 시 모든 포켓몬의 HP가 회복되고 상태 이상이 해제되며, 다음 스테이지 정보와 현재 팀 구성(최소 정보)이 로컬 스토리지에 자동으로 저장됩니다.
• 이어하기: 게임 시작 시 저장된 데이터를 불러와 마지막으로 저장된 스테이지부터 게임을 계속할 수 있습니다. (포켓몬 상세 정보는 API로 다시 로드)
• 게임 오버 (GameOver.js): 배틀 중 플레이어의 포켓몬 3마리가 모두 쓰러지면 게임 오버 화면이 표시됩니다.

3. 프로젝트 구조

프로젝트는 일반적인 Create React App 구조를 따릅니다.

pokemon-battle-tower/ ├── public/ # HTML, 아이콘 등 정적 파일 │ ├── index.html │ ├── favicon.ico │ └── manifest.json ├── src/ # React 소스 코드 │ ├── assets/ # 이미지 등 리소스 │ ├── components/ # UI 컴포넌트 │ │ ├── App.js │ │ ├── StartScreen.js │ │ ├── PokemonSelection.js │ │ ├── BattleScreen.js │ │ ├── PokemonCard.js │ │ ├── MoveSelection.js │ │ ├── BattleLog.js │ │ ├── StageClear.js │ │ └── GameOver.js │ ├── contexts/ # React Context │ │ └── GameContext.js │ ├── data/ # 정적 데이터 │ │ └── items.js │ ├── utils/ # 유틸리티 함수 │ │ ├── pokeapi.js │ │ └── battleLogic.js │ ├── App.css # 전역 스타일 │ ├── index.css # 전역 스타일 │ └── index.js # 앱 진입점 ├── package.json # 프로젝트 정보 및 의존성 └── README.md # 프로젝트 설명

• components/: 각 화면과 UI 요소를 담당하는 컴포넌트들이 위치합니다.
• contexts/: GameContext를 사용하여 플레이어 팀 정보나 현재 스테이지 같은 전역 상태를 관리합니다.
• data/: 게임 내에서 사용되는 아이템 목록과 같은 정적 데이터를 보관합니다.
• utils/: PokeAPI 연동(pokeapi.js)이나 복잡한 배틀 로직(battleLogic.js)처럼 재사용 가능한 함수들을 분리했습니다.
• App.js: 전체 게임의 상태(시작, 선택, 배틀, 클리어, 오버)를 관리하고 화면 전환을 제어하는 핵심 컴포넌트입니다.

4. 기술 스택

이 프로젝트를 만드는 데 사용된 주요 기술과 라이브러리는 다음과 같습니다.

• Frontend Framework: React (react, react-dom) - 컴포넌트 기반 UI 개발
• Development Environment: Create React App (react-scripts) - 간편한 React 개발 환경 설정
• Styling: CSS, Styled Components (styled-components) - 컴포넌트 스타일링
• API: PokeAPI (Fetch API 사용) - 포켓몬 데이터 활용
• State Management: React Context API, useState, useEffect, useRef - 컴포넌트 상태 및 전역 상태 관리
• Data Persistence: Local Storage - 게임 진행 상태 저장
• Testing: Jest, React Testing Library - 기본적인 테스트 환경

5. 시연 (선택 사항)

(실제 플레이 영상을 첨부하거나 GIF로 주요 장면을 보여주면 좋습니다.)

1. 게임 시작: ‘새 게임’ 또는 ‘이어하기’ 선택
2. 팀 구성: 세대 선택 -> 포켓몬 3마리 선택 -> 기술 4개씩 선택 -> 아이템 장착
3. 배틀: 기술 선택 및 사용, 상대 AI 턴 진행, 배틀 로그 확인, 포켓몬 교체
4. 스테이지 클리어: 상대방 승리 후 다음 스테이지로 이동 (자동 저장)
5. 이어하기: 게임 종료 후 다시 시작하여 저장된 스테이지부터 플레이

6. 마무리 및 향후 과제

React와 PokeAPI를 이용하여 웹에서 즐길 수 있는 포켓몬 배틀 타워 게임의 기본적인 틀을 구현해보았습니다. 턴 기반 전투, 데이터 연동, 상태 관리, 로컬 저장 등 다양한 웹 개발 기술을 적용해볼 수 있는 재미있는 프로젝트였습니다.

앞으로 다음과 같은 점들을 개선하거나 추가해 볼 수 있을 것 같습니다.

• 포켓몬 특성(Ability) 구현하여 배틀의 깊이 더하기
• 더 다양한 기술 및 아이템 효과 구현 (날씨, 필드 효과, Z기술/다이맥스 등)
• 랭크 변화, 급소 확률 등 세부적인 배틀 시스템 고도화
• AI 로직 개선 (포켓몬 교체, 더 전략적인 기술 선택 등)
• UI/UX 개선 (배틀 애니메이션, 효과음, 반응형 디자인 적용)
• 데이터 저장 방식 개선 (IndexedDB 등 활용하여 더 많은 정보 저장)

실행 결과