📌 몬스터 잡기 게임 만들기 (자바스크립트 프로젝트)

2회차 강의의 마무리 프로젝트는 몬스터 잡기 게임을 만드는 것입니다. 이 프로젝트에서는 자바스크립트를 사용하여 게임 로직을 구현하고, 몬스터의 HP가 0이 될 때까지 공격을 계속해서 데미지를 주는 방식으로 진행됩니다.

🎯 1. 게임 진행 흐름

🔹 게임 시작

게임을 시작하면, prompt() 메소드를 통해 사용자에게 데미지를 입력받습니다. 사용자는 입력한 데미지를 기반으로 몬스터를 공격하게 됩니다. 게임을 계속 진행하면서 몬스터의 HP가 줄어들고, HP가 0이 되면 게임 종료 메시지가 나타납니다.

✅ 예시

let attackDamage = prompt("1회 공격 시 데미지는 얼마인가요?");
let monsterHP = 100; // 몬스터의 HP는 100으로 시작

🎯 2. 공격 처리 및 HP 감소

사용자가 입력한 데미지에 따라 몬스터의 HP가 줄어듭니다. while 반복문을 사용하여 몬스터 HP가 0보다 클 때까지 반복적으로 공격을 실행합니다.

✅ 예시

while (monsterHP > 0) {
  monsterHP -= attackDamage;
  console.log("몬스터의 남은 HP: " + monsterHP);
}

몬스터의 HP가 0보다 크면 계속해서 데미지를 적용하고, HP가 0이 되면 게임을 종료합니다.

🎯 3. 사용자 입력 검증

데미지 입력값 검증: 사용자가 음수나 문자를 입력할 수 있기 때문에, 양의 정수로만 데미지를 받도록 유효성 검사를 진행합니다.

✅ 예시

if (attackDamage <= 0 || isNaN(attackDamage)) {
  alert("잘못된 데미지 입력, 게임을 취소합니다.");
} else {
  // 게임 시작
}

🎯 4. 동적 텍스트 추가

createElement() 메소드를 사용하여 게임의 진행 상태를 동적으로 HTML 요소로 추가합니다. 각 공격 후마다 p 태그를 생성하여 공격 횟수와 몬스터의 남은 HP를 화면에 표시합니다.

✅ 예시

let attackCount = 0;
while (monsterHP > 0) {
  attackCount++;
  monsterHP -= attackDamage;
  
  let attackMessage = document.createElement("p");
  attackMessage.textContent = `몬스터를 ${attackCount}번 공격했습니다. 남은 HP: ${monsterHP}`;
  document.body.appendChild(attackMessage);
}

**attackMessage**는 몬스터를 공격할 때마다 새로운 텍스트를 화면에 추가합니다.

🎯 5. 게임 종료 및 메시지 표시

몬스터의 HP가 0이 되면, 게임 종료 메시지를 화면에 표시합니다. h2 태그를 사용하여 게임 종료 메시지와 다시 시작 안내를 제공합니다.

✅ 예시

let endMessage = document.createElement("h2");
endMessage.textContent = "몬스터 잡기 완료, 수고하셨습니다. 게임을 새로 고침하여 다시 시작하세요.";
endMessage.style.color = "orange";
document.body.appendChild(endMessage);

🎯 6. 과제 안내

🔹 과제

게임을 진행할 때 데미지가 100의 약수가 아닌 경우, HP가 음수로 출력되지 않도록 수정해 보세요.
- 예를 들어 데미지가 23일 때, 몬스터의 HP가 음수로 나오지 않게 0으로 강제 설정하는 방식으로 수정합니다.

if (monsterHP < 0) {
  monsterHP = 0;
}

🚩 결론

이번 프로젝트를 통해 자바스크립트 반복문, 유효성 검사, 동적 요소 생성 등을 활용한 게임 로직을 구현하는 방법을 배웠습니다. HTML과 자바스크립트를 사용하여 동적인 게임 페이지를 만들고, 게임 종료 후 결과를 화면에 동적으로 표시하는 방법도 실습했습니다.

이제 자기만의 게임을 추가적으로 커스터마이즈하고, 더 다양한 기능을 추가해 보세요! 🚀🎮