2022-03-08 이상형 월드컵

오늘은 이상형 월드컵을 구현해봤다.
구현하는 중 어려웠던 부분이나 짚고 넘어가야할 것 같은 부분들로만 정리해보겠다.
사실 다 저번에 써놓은 것들이라 정리할건 별로 없다.

구현하려는 것

https://www.piku.co.kr/w/1lDBAF

이런거

동작 방법

1. 사용할 자료들의 배열을 만들어준다.
2. X강을 하는지 선택하고 실행하는 시작버튼을 구현한다
3. 배열의 자료를 랜덤으로 넣어서 선택하는 화면을 구현한다.
4. 결승까지 갔으면 프로그램을 멈춘다.

사용한 구현 방법들

내 마음대로 정리한거라 없는 내용이 많을 수 있다.
내가 정리하고싶은 부분들만 정리한다..ㅜ 나도 귀찮다ㅜ

css로 처음 시작하는 화면 구현하기

.start-menu{
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    top: 0;
}

width와 height를 100%로 잡고, position을 absolute로 잡아서 처음부터 끝까지 다 감싸는 방식으로 만들어준다. 배경을 검은색에 투명도를 줘서 만들고, 위에 공백이 남아있지 않도록 top속성을 준다.

css로 골랐을때 중앙으로 끌고오는 애니메이션 효과 만들기

.left.pick{
    transform: translateX(300px);
    transition-duration: 1s;
}
.right.pick{
    transform: translateX(-300px);
    transition-duration: 1s;
}
.delete{
    opacity: 0;
}

왼쪽과 오른쪽으로 선택할 수 있는 영역을 나눴는데, 두 요소에 pick과 delete라를 클래스를 줘서 이거로 간택받은 요소와 떨어진 요소를 나눌 것 이다.
클릭했을 때 효과를 주기 위해선 자바스크립트를 활용해야한다.

left.addEventListener("click",function(){
    right.classList.add("delete");
    this.classList.add("pick");
    const value = this.getAttribute("value");
    pickArr.push(value);
    nextRound();
});
right.addEventListener("click",function(){
    left.classList.add("delete");
    this.classList.add("pick");
    const value = this.getAttribute("value");
    pickArr.push(value);
    nextRound();
});

위의 코드를 자바스크립트에 넣어줘서 '클릭' 이벤트가 발생했을 때 delete와 pick 클래스를 용도에 맞게 추가하도록 코드를 짜놨다.
pickArr은 고른 요소들을 모아놓는 배열이다.
nextRound함수는 모든 선택이 끝나서 승자들끼리의 싸움을 준비하도록 도와주는 함수이다.
(8강 끝 -> 4강) 이란 뜻이다.

function nextRound(){
    round++;
    if(round > kang/2){
        if(kang==2){
            roundInfo.innerText = "아이스크림 이상형 월드컵 최종 우승";
            return
        }
        round = 1;
        kang = kang/2;
        playArr = new Array();
        while(playArr.length != kang){
            const randomNum = Math.floor(Math.random()*pickArr.length);
            const value = pickArr[randomNum];
            if(playArr.indexOf(value)==-1){
                playArr.push(value);
            }
        }
        pickArr = [];
    }
    window.setTimeout(function(){
        left.classList.add("delete");
        right.classList.add("delete");
        left.classList.remove("pick");
        right.classList.remove("pick");
    },1.9*1000);
    window.setTimeout(function(){
        changeRoundInfo();
        left.classList.remove("delete");
        right.classList.remove("delete");
        showImage();
    },1000*2);
}

에휴... 이런 긴 코드 넣고싶지않았는데 넣어버렸다...
if의 저 함수가 round가 다 찼을때 다음 라운드로 넘어가게 도와주는 함수이다.
8강이면 kang숫자가 8인데, 4라운드까지 총 4번 선택을 반복했으면 round를 1로 초기화시키고 kang은 2로 나누어서 다시 진행한다. 그와 동시에 월드컵을 진행하기 위해 사용했던 playArr을 비워주고 선택할때마다 채웠던 pickArr의 요소를 playArr에 넣어준다. randomNum을 사용해 이 요소들도 랜덤하게 넣어준다. 그리고 pickArr도 다시 비워준다.
마지막으로 kang이 2인경우는 결승이라는 뜻인데, 결승이 끝나면 return하여 함수를 그냥 종료한다.

function changeRoundInfo(){
    roundInfo.innerText = `아이스크림 이상형 월드컵 ${kang}강 ${round}/${kang/2}`;
}

이거는 사실 별거 없는데 그냥 (' ')이게 아니라 ` 이걸 써여한다는걸 나에게 알려주기 위해 가져왔다. 얼핏 보기에는 비슷해보이지만 따음표나 쌍따를 쓰면 텍스트로 인식하고 숫자 1 옆에있는 저걸 사용하면 안에 변수를 넣어줄 수 있다.

allIce.push({img:"img/ice3.png", name:"무친 뇌절"});
배열에 넣어주는 요소이다. 이름이 무친 뇌절인 이유는 저 사진안에 아이스크림이 민초다.
본인 반민초다.

헷갈렸거나 정리할만한 건 이정도인 것 같다.
다음에 다시 오겠다~~