[Vanilla JS - "The Battle"] 2. 고유 카드덱 구성
1. 기능 개요
이 포스팅에서는 게임의 핵심 기능 중 하나인 "고유 카드덱 구성"의 설명 입니다.
캐릭터 마다 고유한 특성을 가진 공격 카드를 플레이어가 시각적으로 확인하고 선택하는 기능을 수행합니다.
2. 기획 및 설계 의도
- 플레이어는 선택한 캐릭터의 고유한 특성을 가진 공격카드를 시각적으로 확인할 수 있어야 한다.
- 플레이어는 10개의 카드 중 3개를 선택해서 다음 라운드에 임해야 한다.
- 추가될 캐릭터에 대한 데이터를 유지 / 보수 / 추가 에 용이하게 구성해야 한다.
3. 구현 방식 및 코드 설명
플레이어가 선택한 캐릭터의 카드 10개를 표시할 div 태그
<div class="card-grid"></div>function renderSkillCards(selectedCharacter) {
const cardList = Object.keys(cardData[selectedCharacter]);
const container = document.querySelector(".card-grid");
// 현재 에너지 가져오기
const gameState = JSON.parse(localStorage.getItem("gameState"));
const currentEnergy = gameState?.player?.energy ?? 100;
container.innerHTML = "";
cardList.forEach(cardName => {
const cardDiv = document.createElement("div");
cardDiv.className = "skill-card";
cardDiv.dataset.character = cardName;
const img = document.createElement("img");
img.src = cardData[selectedCharacter][cardName];
// ✅ 공격 카드인 경우 에너지 체크
if (ATTACK_SKILLS[cardName]) {
const { energyCost } = parseAttackCard(ATTACK_SKILLS[cardName]);
if (currentEnergy < energyCost) {
cardDiv.classList.add("disabled");
cardDiv.dataset.disabled = "true";
}
}
cardDiv.appendChild(img);
container.appendChild(cardDiv);
});
}1. 캐릭터의 카드 10개를 div 태그 (+ img 태그)를 추가하여 구성한다.
2. 현재 캐릭터의 에너지 현황을 고려하여 사용할 수 없는 카드는 비활성화(클릭 불가 + 흐려지며 회색빛) 한다.
4. 문제 해결 및 시행착오
1. 시각적으로 카드를 어떻게 구성할 것인가?
초기 구현 방식은 "HTML + CSS" 으로 카드를 시각적으로 구현하였다.
초기 구현 방식 : "HTML + CSS"
위와 같이 HTML + CSS 방식으로 카드를 시각적으로 디자인 하는 방식은 많은 문제가 있었다.
첫째, CSS를 이용해서 카드 디자인을 구현 했기 때문에, 다른 요소들과 많은 충돌이 발생하였다.
둘째, 구현한 디자인이 이쁘지 않았다.
개선된 구현 방식은 이미지로 카드를 시각적으로 구현하는 것이다.
개선 방식 : 이미지 (.png)
위와 같이 이미지 파일을 이용하여 구성하였다.
"HTML + CSS" -> Image(.png) 로 변경한 후에 장점은 다음과 같다.
첫째, CSS 관련 코드 충돌이 없다.
둘째, 코드를 사용하지 않기 때문에 유지 보수가 훨씬 수월하다.
셋째, 디자인적으로 훨씬 마음에 들었다.
2. 플레이어가 선택한 카드 3개를 어떠한 형식으로 어떻게 저장할 것인가?
앞선 포스팅에 플레이어가 선택한 캐릭터 데이터를 저장한 방식과 동일하게 웹 브라우저의 로컬 스토리지를 사용하는 방식을 선택하였다.
저장 형식은 Map 형식으로서 key는 실행 우선순위, value 는 카드의 이름 이다.
5. 결과 및 느낀점
[카드 3개를 선택하는 모습]
[현재 에너지에 따라 사용가능한 공격카드 활성화 여부]
현재 에너지를 고려하여 사용할 수 있는 공격카드 종류가 달라진다.
중간에 에너지 회복 카드(ENERGY UP)을 사용한다면, 그것 역시 반영된다.