개발 기록/개발 요약

[mini-project] Country Flag Guessing Game (JS)

dev.jelee 2025. 7. 5. 18:13

📌 프로젝트 개요

학원 수업 시간에 배운 class 객체를 활용하여 만든 나라별 국기 맞추기 게임입니다.
객관식 형태이며 누구나 재밌게 게임을 즐길 수 있습니다.
(현재 국기는 많이 등록되어 있지 않습니다.)
  • 프로젝트 명: 국기 맞추기 게임
  • 개발 기간: 24.06.29 ~ 24.07.01
  • 목적: class 객체를 활용하여 무언가를 만들어 보는 경험을 쌓고, 코드 활용 및 스스로 생각하는 힘을 기르기 위함.
  • 사용 기술: HTML5, CSS3, JavaScript, Git & GitHub, GitHub Pages, VS Code

🧩 구현 기능

기능명 상세 설명
랜덤 국기 출현 Math 클래스를 사용하여 국기가 무작위로 출력
객관식 4지선다형 정답 1개를 포함한 4개의 객관식을 무작위로 출력
정답 유무 결과 알림창으로 오답, 정답 출력
다시 시작 버튼을 클릭 시 새로운 국기가 랜덤으로 출력
데이터 국기 이미지는 해당 저장소에 img 폴더에 저장

💜 GitHub 저장소 & 데모

🔗 GitHub Repository

🎬 데모 영상 보러가기

🚀 데모 사이트 보러가기

📁 디렉토리 구조

📂 mini-random-flag-quiz/
├── index.html                // 메인 화면 (앱 진입점)
├── src/
│   ├── randomFlag.js         // 깃발 객체와 랜덤 로직
│   ├── randomFlagStyle.css   // 스타일(CSS)
│   └──img/                   // 깃발 이미지 모음
│      ├── flag01.png
│      ├── ...
│      └── flag26.png
└── README.md

🧱 설계 구조 설명

  • index.html:
    • 제목 → 국기 이미지 → 질문 & 4지선답형 → 다시 시작 버튼 → 출처 표기 순으로 기본 뼈대 작업을 했다.
    • 제목은 h1태그로 작성
    • 국기 이미지는
      • <div id="flagId"> 그룹으로 묶음
      • 자식으로 <img>태그를 두었고, src와 alt 속성의 속성값을 "" 빈문자로 두었다. (자바스크립트로 속성값을 채울 예정)
    • 질문과 4지선답형은
      • <div id="textGroup">으로 묶었다.
      • textGroup 자식으로 <span id="question">으로 어느 나라 국기인지 맞추어보라는 문구를 출력.
      • textGroup 자식으로 <ul id="answer">으로 <li>태그를 사용하여 각각 id를 btn1, btn2, ... 으로 작성하였다.
    • 다시 시작 버튼은
      • <div id="reload">로 다시 시작 텍스트를 작성하였다. (스타일을 꾸미기 편하기 쉽게 div태그 사용했음)
    • 출처 표기는
      • <div class="imgData">로 이미지 자료의 출처를 표기하였다.
  • randomFlag.js:
    • index.html 페이지가 브라우저에 로드가 되자마자 실행이 되도록 window.onload를 사용하였다.
    • countryGroup을 Array로 관리
    • Country 클래스를 생성
      • 나라별 이름과 국기를 객체로 만들기.
      • Country 클래스에는 생성자 constructor(name, flag) { ... }를 작성하고 show() { ... }라는 메서드를 작성했다.
      • show() 메서드는 flagImg 변수에 깃발 이미지 경로를 지정할 <img> 태그를 .querySelector()를 사용하여 지정하고,
      • flagImg에 .setAttribute() 메서드를 사용하여 'src' 에는 this.flag 주소를 저장하도록 한다. 
    • 국기 추가
      • countryGroup 배열에 new Country("나라이름", "깃발 이미지 경로")를 .push() 메서드를 사용하여 추가한다. (일일히 나라별 전체 추가함)
    • 랜덤으로 국기 하나 뽑기
      • randomPick변수에는 countryGroup에서 랜덤으로 하나 선택하여 저장
      • randomPickName변수에는 countryGroup에서 randomPick에 담긴 요소의 이름을 담는다. 여기서 randomPickName변수는 객관식 정답을 확인하기 위한 용도이다.
    • 랜덤으로 뽑힌 국기를 제외한 국기들 담기
      • countryRest에 countryGroup을 담는데 스프레드 형식으로 담는다. [...countryGroup] 이렇게.
      • for문을 사용해서 countryRest 길이만큼 반복을 하는데, randomPick과 i가 같으면 countryRest 배열에서 해당 i를 splice() 메서드를 사용하여 제거한다.
    • 랜덤으로 뽑힌 국기를 제외한 국기들 중에서 랜덤으로 3개 뽑기
      • while문을 사용하여 countryRest의 길이가 i와 같지 않으면 반복되도록 조건을 준다.
      • 블럭에는 randomOtherPick변수에 countryRest(랜덤으로 뽑힌 국기를 제외하고 담은 국기들)에서 1개씩 뽑아서 저장하고, blank변수에 countryRest에서 raondomOtherPick에 담긴 데이터와 동일한 것을 찾아 .splice() 해준다. 이것을 countryRest의 길이가 3이 되면 멈춘다. 3이 되면 멈추는 이유는 객관식 4지선답에서 정답을 제외한 나머지 3개의 답이 필요하기 때문이다.
    • 랜덤으로 뽑은 국기와 제외 국가들 중 랜덤으로 뽑은 국기 3개를 합치기
      •  flagAnswer를 배열로 생성 후, flagAnswer에 랜덤으로 뽑은 국기와 제외 국가들 중 랜덤으로 뽑은 국기 3개를 담는다.
    • 웹브라우저 화면에 랜덤으로 뽑은 국기의 이미지를 출력
    • 객관식 보기 4가지를 셔플 시킨 뒤 출력하기
      • function suffle(array) {} array를 파라미터로 받는 함수 생성.
      • suffle 함수 블럭에는 currentIndex에 array.length를 담기. 그리고 while문을 사용하여 currentIndex가 0이 아니라면 계속 실행이라는 조건을 설정.
      • while문 블럭에는 randomIndex변수에 currentIndex 중 하나를 선택하여 담는다. 그리고 currentIndex-- 감소 시킨다.
      • while문 블럭 마지막에는 array배열에서 섞어준다.
        [array[currentIndex], array[randomIndex]] =  [array[randomIndex], array[currentIndex],];
      • 함수 밖에서 array변수에는 랜덤으로 뽑힌 국기와 그외 국가 중 뽑은 3개 국기를 담은 flagAnswer를 담는다.
      • suffle(array) 함수로 array를 파라미터로 보냄.
    • 아까 뽑은 4지선답 flagAnswer을 배열로 담은 뒤 출력
      • 버튼 그룹 생성 후 id 값 저장 
        • btnGroup변수를 배열 객체로 생성하고 for문을 사용하여 flagAnswer 배열의 길이만큼 btn의 id를 btn1, btn2, btn3 순으로 설정하기.
      • btnGroup 배열에 flagAnswer의 이름을 담기.
        • for문을 사용하여 btnGroup에 순차적으로 flagAnswer배열의 요소마다 name을 추출하여 저장하기.
    •  정답 확인 유무
      • for문을 사용해 사용자가 선택한 답이 정답인지 오답인지 삼항연산자를 사용하여 결과를 alert()로 출력한다.
  • randomFlagStyle.css:
    • 전체적으로 스타일은 깔끔하게 흰색 배경에 글자는 검정으로 통일했다.
    • 4지선답을 한 줄로 나열하였고, 마우스를 4지선답 버튼 위에 올리면 그림자 효과를 주어 위로 올라오는 느낌을 주었고, 테두리에 오렌지색을 주었다. 마우스로 클릭하면 버튼의 배경색이 오렌지색으로 변한다.
    • 다시 시작 버튼도 그림자 효과를 주어 버튼 위에 마우스를 올리면 위로 올라오는 느낌을 주었다. 버튼을 클릭하면 배경 색상이 어두운 회색으로 변한다.

🔢 개발 순서

순서 내용 상세 설명
1 클래스 생성 - 나라 이름과 국기 이미지를 담을 객체를 class로 생성
2 나라별 국기를 배열에 담기 - 나라 이름과 국기 이미지를 담은 객체를 push() 메소드를 사용하여 배열에 담기
3 무작위로 국기 뽑기 - Math.floor(Math.random()*array.length)를 사용하여 무작위로 하나의 객체를 뽑아서 변수에 담기
4 제외 국가들 중 3개 뽑기  - 무작위로 뽑은 국기를 제외한 나머지 국기들을 새로운 배열에 담은 후 3개를 무작위로 뽑기
5 정답과 오답 합친 후 섞기 - 처음에 뽑은 국기와 나머지 국기 중 뽑은 3개의 국기를 하나의 배열에 담기
- 객관식 보기로 나오는 4개의 국기를 셔플하기.
6 HTML, CSS 작성 - 간단하게 국기와 객관식 보기 4개가 보이는 틀 작업
7 버튼 생성 후 값 저장 - 버튼 4개를 생성하여 아이디를 btn1,2,3,4로 설정하고 버튼의 textContent를 객관식 보기 4개를 각각 설정
8 정답 확인 유무 - 사용자가 선택한 보기가 정답인지 아닌지 확인하여 결과를 alert()로 출력
9 다시 시작 버튼 - 다시 시작 버튼을 클릭하면 window.location.reload()가 되어 새로운 국기가 화면에 출력된다.

🐞 문제 해결 & 트러블슈팅

✅ 이슈 1 - function 호출이 안됨

  • 문제: function 생성 후 호출 시 호출이 안되는 현상
  • 원인: 함수명 다음 소괄호를 하는 걸 안 했다.
  • 해결: 소괄호 추가
배열객체[선택한 요소].함수명();

countryGroup[randomPick].show();

✍ 느낀 점 / 회고

  • 스스로 처음부터 끝까지 검색하고 JavaScript MDN 문서나 Stack Overflow에서 내가 찾는 기능이 있는지 확인하고 공부하면서 개발을 하니 뿌듯했다.
  • 이번에 문서를 보면서 내가 원하는 기능들을 구현해 나가는 능력이 향상되었다.