항해 플러스 코육대 - 제1회 추석 코육대 단기 웹프로젝트

주제- HangMan Game

 

1. 기능 구현 설명

HANGMAN 게임 설명은 다음과 같다. 

1. 단어 3개 중에 고르고

2. 행맨 게임을 하고

3. 그 결과에 따라 WIN이나 LOSE를 띄워줬다. 

 

<조건>

 

-> 개발에 사용한 언어는 HTML CSS JS였다. 

---

① Start Page

1-1. 맨 처음 화면

* 게임 브금 넣기

 

* 애니메이션이 부여된 "HANGMAN" 페이지 타이틀 만들기
           ★ HANGMAN을 하나의 태그에 넣은 것이 아니라, 여러개로 나눠서 했다.
            -> CSS 애니메이션을 부과하기 위해서 했다. 

<div id="startPage">
        <!--클릭하면 위에 audio 태그의 음악이 틀어지는 이미지-->
        <img src="./src/img/play-button.png" id="playMusic">
        <h1 id="gameTitle">
            <span style="--i:1">H</span>
            <span style="--i:2">A</span>
            <span style="--i:3">N</span>
            <span style="--i:4">G</span>
            <span style="--i:5">M</span>
            <span style="--i:6">A</span>
            <span style="--i:7">N</span>
        </h1>
        <button id="startButton">Start!</button>
        <p id="choices">
            <span id="choice1"></span>
            <span id="choice2"></span>
            <span id="choice3"></span>
        </p>
</div>

#gameTitle{
    font-size: 100px;
    font-family: 'Bangers', cursive;
    animation: 2s rightToLeft ease-out 1;   
}
#gameTitle span{
    position:relative;
    display: inline-block;
    animation: 1s waivy infinite;
    animation-delay: calc(.1s * var(--i));
}

@keyframes rightToLeft {
  0% {
    opacity: 0;
    transform: translateX(80%);
  }
  20% {
    opacity: 0;
  }
  50% {
    opacity: 1;
    transform: translateX(0%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}
@keyframes waivy {
    10%,40%,100% {
      transform: translateY(0)
    }
    20% {
      transform: translateY(-20px)
    }
  }

 

* 버튼 색깔을 화려하게 했다

#startButton{
    background-image: linear-gradient(
         -225deg,
        #231557 0%,
        #44107a 29%,
        #ff1361 67%,
        #fff800 100%
    );
    color:white;
	...
}

 

1-2 시작 버튼 누른 후 화면

* Start 버튼에 클릭을 위한 addEventListener을 달았다.

* json 파일에 저장된 단어들을 꺼내냈다. 

import data from '../json/words.json' assert { type: 'json' };

* Math.random으로 중 3가지 옵션을 뽑는다

* innerText로 내용이 빈 span들에 단어 옵션 이름들을 넣어준다.

* 부모인 #choices에 click addEventListener을 달아서 사용자가 어떤 단어를 골랐는지(span) 확인해준다.

            -> word라는 변수에 저장

$("#startButton").addEventListener("click",()=>{
    //...생략
    $("#choices").addEventListener("click",(e)=>{
        word = e.target.innerText;
        //...생략
        }
        //..생략
    })
    })

* 단어를 고르자마자 단어 길이만큼 밑줄(span의 border-bottom으로 표현)을 그어주고 startpage를 없애고 본 게임 화면으로 전환한다. 

for (let i =0; i<word.length; i++){
    $("#underlines").insertAdjacentHTML("beforeend",
    `<span class="underline"></span>`)
}
$("#startPage").style.display = "none";
hangmanGame();

 

 

② Main Game Page

* 버튼 누르면 word에 포함된 character인지 확인해주기

 

* 버튼을 눌렀는데 해당 알파벳이 포함된 character이라면 

          - 띠딩 효과음 틀기

          - 해당 알파벳 버튼을 없애기 -> 문제 조건

             (근데 사실 개인적으로 마음에 안드는 기능이다. 자꾸 알파벳 버튼 위치가 달라져서 성가실것 같다.)

document.querySelectorAll(".alphabet").forEach(item =>{
        item.addEventListener('click', (e)=>{
            //이게 내가 원래 생각한 기능이다. 이미 누른 녀석은 회색으로 색깔이 변하고 다시 클릭 못하게 만드는 코드다.
            e.target.closest('div').style.backgroundColor = "gray";
            e.target.closest('div').style.pointerEvents = "none";
            
            //확인해봤는데 클릭한 알파벳이 단어에 포함되지 않았을때 안에 내용을 빨갛게 바꾸기
            let check = checkAnswer(e.target.innerText);
            if (!check) e.target.closest('div').style.color = 'red';

            //이게 조건 6번이긴 한데 근데 솔직히 이런 기능이 없는 게 나은 것 같다. 누른 알파벳 중 틀린 놈들을 아예 없애는 코드다.
            else e.target.closest('div').remove();
        })
    })

          - indexOf로 해당 알파벳을 밑줄에 채워준다.
               -> 모든 밑줄(span)을 querySelectorAll(".underline")로 찾아준다.

               -> 몇번째 '밑줄'을 바꿔야하는지를 wordUnerlines[index]로 찾아준다.

               -> .innerText로 밑줄 안에 해당 알파벳을 넣어준다.

               -> 해당 알파벳이 더 있는지 확인하고, 더 있으면 indexOf로 다음 위치는 어디있는지 확인해주고 반복한다.

 

 

* 버튼을 눌렀는데 해당 알파벳이 포함되지 않은 character이라면 

          - 퍼벅 효과음 틀어주기

          - 틀린 개수 증가, 남은 찬스 개수 감소

          - 해당 알파벳 빨간색으로 바꾸기

 

* 틀린 개수에 따라 얼굴 모양이 다르게 만들기

switch(num){
                case 1:
                    $("#hanger").style.display = "block";
                    return;
                case 2:
                    $("#rope").style.display = "block";
                    return;
                case 3:
                    $("#face").style.display = "block";
                    return;
                case 4:
                    $("#body").style.display = "block";
                    $("#face").src = './src/img/intermediateFace.png'
                    $("#face").style.height = "6vw";
                    $("#face").style.top = "6vh";
                    return;
                case 5:
                    $("#larm").style.display = "block";
                    return;
                case 6: 
                    $("#rarm").style.display = "block";
                    return;
                case 7:
                    $("#lleg").style.display = "block";
                    $("#face").src = './src/img/EndFace.png'
                    $("#face").style.height = "6vw";
                    $("#face").style.top = "6vh";
                    return;
                case 8:
                    //8번 틀리면 나타나는 함수
                    $("#rleg").style.display = "block";
                    setTimeout(() => {
                        $("#music").src = "";
                        loseSound.play();
                        $("#endScreen").style.display = "flex";
                        $("#endComment").innerText = "LOSE";
                        $("#endExplanation").innerText = `The Answer was ${word}`;
                        $("#tryAgainBtn").addEventListener("click",()=>{
                            location.reload();
                        })

                      }, 1000);
                    return;
            }

p.s. 대회 운영진에게 제출한 배포 링크는.... src를 잘못 넣어서 이미지가 제대로 안 뜨고 있는 상태이다.

꼭 기억하자, 

src로 상대 경로를 넣을때는 javascript 파일 기준으로 하는 것이 아니라 js를 받는 HTML 기준으로 경로 잡아줘야 한다.

 

* posiiton absolute로 그림의 모든 부위들의 위치를 미리 정해주기

  -> ★문제점, 화면 크기에 따라 top, left에 부과해야하는 "비율"이 달라야하는데 그럴 시간이 없어서 다른 사람 컴퓨터로 보면 약간 다르게 생김

보다시피 얼굴이 너무 아래에 위치함

* 시작할때는 display none으로 해서 안보이게 하기

* 점점 틀릴수록 display block으로 변환시켜 나타나게 하기 

* 팔과 다리, 얼굴이 움직이게 애니메이션 추가

#rarm{
    left:15vw;
    top:7vw;
    animation:rarmMove 2s infinite alternate;
    transform-origin: 25% 25%;
}
@keyframes rarmMove {
    from {transform: rotate(-50deg);}
    to {transform: rotate(10deg);}
  }

 

 

③ End Page

 

* 8번 틀려서 Chance 다 썼을때 Lose 화면 띄우기

- Lose 음악 틀기

- 원래 display none이었던 엔드스크린을 display flex로 바꿔서 나타나게 한다.

- 제목에 졌다는 텍스트를 넣어준다.

- 정답을 알려주는 텍스트를 넣어준다. 

- 버튼을 누르면 location.reload()로 페이지를 다시 불러 게임을 restart한다. 

 

* 단어 맞췄을 떄 Win 화면 띄우기

- Win 음악 틀기

- 원래 display none이었던 엔드스크린을 display flex로 바꿔서 나타나게 한다.

- 제목에 이겼다는 텍스트를 넣어준다.

- 정답을 알려주는 텍스트를 넣어준다. 

- 버튼을 누르면 location.reload()로 페이지를 다시 불러 게임을 restart한다. 

---

2. 참여 소감

시간이 많이 촉박해서 힘들었으나, 재미도 있었고 

css 애니메이션이랑 이것 저것 부수적인 것 챙긴다고 새로운 것을 많이 배운 것 같다. 

배포도 처음 해봐서 매우 알찼던 것 같다. 

---

3. 링크

대회 링크:

https://hanghaeplus-coyukdae.oopy.io/74c1f648-637a-4223-bf48-d4ae466f74dd

행맨 게임

 

레포지토리 링크:

 

(제출한 것 말고 따로 레포 파서 에러 계속 고치는 중인 링크)

https://github.com/Personal-Hangman-Game/HangMan

GitHub - Personal-Hangman-Game/HangMan

 

배포 링크:

https://personal-hangman-game.github.io/HangMan/

Document