searchEffect - 07

스크립트를 이용한 서치효과 만들기 07

검색 게임을 만들어 봅시다~!

원본 소스 보기

Script

const searchTime = document.querySelector(".time span");
const searchList = document.querySelector(".search__list");
const searchAnwers = document.querySelector(".search__answers");
const searchMissAnwers = document.querySelector(".search__missAnswers");
const searchStart = document.querySelector(".search__box .start");
const searchInput = document.querySelector("#search2");
const searchAudio = document.querySelector("#audio");
const audioPlay = document.querySelector(".play");
const audioStop = document.querySelector(".stop");
const searchInfo = document.querySelector(".search__info .num");
const scoreInfo = document.querySelector(".search__info .num2");
const scoreResult= document.querySelector(".search__result .result");
const scoreResultWrap= document.querySelector(".search__result");
const scoreRestart= document.querySelector(".search__result .restart");

let timeReamining = 120,    //남은 시간
    timeInterval = "",      //시간 간격
    score = 0,              //점수
    answers = {};           //새로운 정답

function updateList(){
    cssProperty.forEach(data => {
        searchList.innerHTML += `<span>${data.name}</span>`;
    });

}
updateList();

//게임 시작하기
function startQuiz(){
    //시작 버튼 없애기 & 속성 리스트 없애기
    searchStart.style.display = "none";
    searchList.style.display = "none";

    //다시 시작할 때 기존 데이터 초기화
    searchAnwers.innerHTML = "";
    searchMissAnwers.innerHTML = "";
    
    //시간 설정
    timeInterval = setInterval(reduceTime, 1000);

    //뮤직 추가하기
    searchAudio.play();

    //점수 계산 - 전체 갯수
    searchInfo.innerText = cssProperty.length;
    
    //정답 체크
    checkAnswers();
}

//인풋박스 체크
function checkInput(){
    let input = event.currentTarget.value.trim().toLowerCase();

    if(answers.hasOwnProperty(input) && !answers[input]){
        answers[input] = true;

        //정답 표시
        searchAnwers.style.display = "block";
        searchAnwers.innerHTML += `<span>${input}</span>`;
        
        //점수 반영
        score++;
        scoreInfo.innerText = score;
        //정답 초기화
        searchInput.value = "";
    }

}

//정답 체크하기 : 정답을 객체 파일로 만들기
function checkAnswers(){
    cssProperty.forEach(item => {
        let answer = item.name.trim().toLocaleLowerCase();
        answers[answer] = false;
    });
}

//오답 보여주기
function missAnswers(){
    searchMissAnwers.style.display = "block";
    
    cssProperty.forEach(item => {
        let answer = item.name.trim().toLocaleLowerCase();
        if(!answers[answer]){
            searchMissAnwers.innerHTML += `<span>${answer}</span>`;
        }
    });
}


//시간 설정하기
function reduceTime(){
    timeReamining--;

    //시간 끝
    if(timeReamining == 0) endQuiz();

    searchTime.innerText = displayTime();
}

//시간 표시하기
function displayTime(){
    if(timeReamining <= 0){
        return "0:00";
    } else {
        let minutes = Math.floor(timeReamining / 60);
        let seconds = timeReamining % 60;
        
        //초 단위가 한자리수 일 때 0을 추가
        if(seconds < 10) seconds = "0" + seconds;
        return minutes + ":" + seconds;
    }
}

//게임 끝났을 때
function endQuiz(){
    // alert("게임이 끝났습니다!");

    //시작 버튼 만들기
    searchStart.style.display = "block";
    searchStart.style.pointerEvents = "none";     //버튼 누르지 못하게 하기
    
    //오답 보여주기
    missAnswers();

    //음악 끄기
    searchAudio.pause();

    //시간 정지
    clearInterval(timeInterval);

    //메세지 출력
    scoreResultWrap.classList.add("show");
    let point = Math.round((score / cssProperty.length) * 100);
    scoreResult.innerHTML = `게임이 끝났습니다.<br> 당신은 ${cssProperty.length}개 중에 ${score}개 를 맞추었습니다. 
 당신의 점수는 ${point}점 입니다.`;

}

//다시 시작하기
function restart(){
    scoreResultWrap.classList.remove("show");   //결과창 없애줌
    timeReamining = 120;    //시간 셋팅
    score = 0;              //점수 리셋
    scoreInfo.innerText = "0";
    
    //뮤직 다시 재생
    searchAudio.play();
    
    //다시 시작
    startQuiz();
}

//버튼 이벤트
searchStart.addEventListener("click",startQuiz);
searchInput.addEventListener("input", checkInput);
scoreRestart.addEventListener("click", restart);        //다시 시작

//음악 재생 & 정지
audioStop.addEventListener("click", () => {
    audioStop.style.display = "none";
    audioPlay.style.display = "block";
    searchAudio.pause();
})
audioPlay.addEventListener("click", () => {
    audioStop.style.display = "block";
    audioPlay.style.display = "none";
    searchAudio.play();
})