728x90
검색 이펙트
이번 검색 이펙트는 2분 동안 CSS 속성 검색하기 게임 효과입니다.
> 사이트 미리보기
자바스크립트
해당 이펙트의 자바스크립트는 아래에 이어지는 내용과 같습니다. 먼저, 속성에 대한 정보는 이전과 같이 cssProperty라는 배열 안에 객체로 만들어 저장하였습니다. name은 속성 이름의 키값, desc는 속성 설명의 키값입니다. input에 입력된 값을 value로 불러오고, 불러온 입력값을 cssPropertythr css의 이름과 비교합니다. 정답이 있는 경우 input에 입력된 값을 초기화하고 맞춘 정답을 리스트에 추가합니다. 시간이 끝나면 맞추지 못한 속성들을 오답 리스트에 추가하여 보여줍니다.
const searchTime = document.querySelector(".time span");
const searchList = document.querySelector(".search__list");
const searchAnswers = document.querySelector(".search__answers");
const searchMissAnswers = document.querySelector(".search__missAnswers");
const searchStart = document.querySelector(".search__box .start");
const searchInput = document.querySelector("#search");
const searchAudio = document.querySelector("#audio");
const searchAudioC = document.querySelector("#audioC");
const searchAudioF = document.querySelector("#audioF");
const searchAudioPlay = document.querySelector(".search__audio .play");
const searchAudioStop = document.querySelector(".search__audio .stop");
const searchCount = document.querySelector(".search__info .search__count span");
const searchTotal = document.querySelector(".search__info .search__total span");
const searchResult = document.querySelector(".search__result .result");
const searchResultWrap = document.querySelector(".search__result");
const searchRestart = 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";
//시간 설정
timeInterval = setInterval(reduceTime, 1000);
//뮤직 추가하기
searchAudio.play();
searchAudioStop.style.display = "none";
searchAudioPlay.style.display = "block";
//점수 계산하기
searchTotal.innerText = cssProperty.length;
//정답 체크
checkAnswers();
}
//인풋 체크하기
function checkInput(){
let input = event.currentTarget.value.trim().toLowerCase();
if(answers.hasOwnProperty(input) && !answers[input]){
answers[input] = true; //정답일 경우 true로 바꿔주기
Score++; //점수++
//정답표시
searchAnswers.style.display = "block";
searchAnswers.innerHTML += `<span>${input}</span>`;
//점수 표시
searchCount.innerHTML = Score;
//정답 사운드
// searchAudioC.play();
//정답 초기화
searchInput.value = "";
}
}
//정답 체크하기 : 정답을 객체 파일로 만들기
function checkAnswers(){
cssProperty.forEach(item =>{
let answer = item.name.trim().toLowerCase();
answers[answer] = false;
});
// console.log(answers);
}
// 오답 보여주기
function missAnswers(){
searchMissAnswers.style.display = "block";
cssProperty.forEach(miss =>{
let answer = miss.name.trim().toLowerCase();
if(answers[answer] == false){
searchMissAnswers.innerHTML += `<span>${miss.name}</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();
searchAudioPlay.style.display = "none";
searchAudioStop.style.display = "block";
//시간 정지
clearInterval(timeInterval);
//메세지 출력
searchResultWrap.classList.add("show");
let point = Math.round((Score / cssProperty.length)*100);
searchResult.innerHTML = `게임이 끝났습니다.<br> 당신은 ${cssProperty.length}개 중에 ${Score}개를 맟추셨습니다.<br>점수는 ${point}점 입니다.`;
};
//다시 시작하기
function restart(){
setTimeout(()=>{
searchResultWrap.classList.remove("show");
timeReamining = 120;
Score = 0;
searchScoreNow.innerText = "0";
searchAnswers.innerHTML = "";
searchMissAnswers.innerHTML = "";
startQuiz();
}, 1000);
}
//버튼 이벤트
searchStart.addEventListener("click", startQuiz);
searchInput.addEventListener("input", checkInput);
searchAudioPlay.addEventListener("click", ()=>{
searchAudioPlay.style.display = "none";
searchAudioStop.style.display = "block";
searchAudio.pause();
});
searchAudioStop.addEventListener("click", ()=>{
searchAudioPlay.style.display = "block";
searchAudioStop.style.display = "none";
searchAudio.play();
});
searchRestart.addEventListener("click", restart);
HTML
다음은 HTML 코드입니다. audio 태그를 이용해 게임이 시작되면 플레이 되도록 음악을 넣었으며, 음악을 컨트롤할 수 있는 아이콘을 넣었습니다. time에 시간이 출력되며, 스크립트를 이용하여 시간을 설정하고 출력합니다. search__result는 게임이 끝나면 나타나는 팝업이며, 심심하지 않게 애니메이션을 넣었습니다.
<main id="main">
<div class="search__wrap">
<div class="search__audio">
<span class="play">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- svg 내용이 너무 길어서 생략-->
</svg>
</span>
<span class="stop">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- svg 내용이 너무 길어서 생략-->
</svg>
</span>
<audio id="audio" src="../assets/audio/music_audio01.mp3" loop="loop"></audio>
<audio id="audioC" src="../assets/audio/Button 3.m4a"></audio>
<audio id="audioF" src="../assets/audio/Error 1.m4a"></audio>
<div class="icon"></div>
</div>
<span>CSS 속성 검색 이벤트</span>
<h1>2분 동안 CSS 속성 검색하기</h1>
<p class="desc">
2분 동안 CSS 속성을 많이 검색하면 점수가 올라갑니다.<br>
힌트보기는 한번 이용할 수 있습니다.
</p>
<div class="time">
<span>2:00</span>
</div>
<div class="search__box">
<label for="search">검색하기</label>
<input type="text" id="search" placeholder="CSS 속성을 입력해 주세요!">
<div class="start">버튼을 누르면 게임이 시작됩니다.</div>
</div>
<div class="search__info center">
<div class="search__total">전체 속성 갯수 : <span>0</span></div>
<div class="search__count"> 현재 맞춘 갯수 : <span>0</span></div>
</div>
<div class="search__answers"></div>
<div class="search__missAnswers"></div>
<div class="search__list"></div>
<div class="search__result">
<div class="svg__wrap">
<svg xmlns="http://www.w3.org/2000/svg" width="448px" height="386px" viewBox="0 0 448 386">
<!-- svg 내용이 너무 길어서 생략-->
</svg>
<div class="result"></div>
<a href="#" class="restart">다시 도전하기</a>
</div>
</div>
</div>
</main>
728x90
댓글