다크 게임 (dark.html)

help·2022년 12월 30일

Project 1. Catcha

목록 보기

5/7

1. 사전계획

토글 버튼을 누르면 → 토글버튼 디자인 변경, 페이지 배경이미지 변경
전체를 검정으로 덮은 후 마우스 커서 부분만 투명 그라데이션 효과
페이지 배경이 밤이되면 고양이 나타나고 날라다님
회색고양이의 위치가 마우스의 위치와 같을 경우 2초 후,
검정 배경 + 그라데이션 효과 사라짐

[ 필요한 값 ]

토글버튼 클릭 이벤트 (디자인 및 배경 이미지 변경)
마우스 그라데이션 css효과 및 마우스 위치값과 동일하게 움직임
회색 고양이의 위치값, 마우스의 위치값 비교

2. 개발과정

(간단히 소개하는 소스이므로 정확한 전체 소스는 github에서 확인해주세요!)

클릭했을 때 실행 할
change to Night 와 change to Daytime 함수를 만든다

<script>
	//배경 전환 및 고양이 나타나기
	function changeToggleBg(current, previous, element, moving) {

		// changeToggleBg to Night : sun, moon, block, 60
		// changeToggleBg to Daytime : moon, sun, none, 5

		//버튼이동
		moon.animate({left: `${moving}px`}, 400);
        sun.animate({left: `${moving}px`}, 400)

        //토글배경변경
        $('.toggle-box').toggleClass('toggle-bg-daytime toggle-bg-night');

        //토글버튼 변경
        current.css('display', 'none');
        previous.css('display', 'block');

        //전체배경변경
        $('.dark-cat-box').css('display', `${element}`); //고양이
        $('.cursor-light').css('display', `${element}`);
        $('.darkgame-bg').toggleClass('bg-img-daytime bg-img-night');

        //글자색 변경
        $('.first-title').toggleClass('blue white');
        $('.first-title > span').toggleClass('text-stroke-b text-stroke-w');
        $('.second-title').toggleClass('dark-gray white');

        //메인바로가기 버튼변경
        $('.return-main').toggleClass('btn-bg-blue btn-bg-darkgray');
	}
</script>

클릭 횟수를 체크하여 낮과 밤을 구분해줌

<script>

	let num = 0;
    let x = 1;

    $('.toggle-box').on('click', function () {

        num++;

        //클릭횟수가 홀수 = change Night
        if (num == (2 * x - 1)) { 
            changeToggleBg(sun, moon, 'block', 60); 
        }

        //클릭횟수가 짝수 = change Daytime
        if (num == (2 * x)) {
            x++;
            setTimeout(changeToggleBg(moon, sun, 'none', 5), 400);
        }

	});  
    
</script>

마우스 css효과, 이때 마우스의 움직임과 똑같이 설정해줌

<script>    
    $(window).on(`${a}move`, function (e) {

        //현재 마우스 또는 터치 좌표
        if (a == 'mouse') {
            mouseX = e.clientX;
            mouseY = e.clientY;
        } else if (a == 'touch') {
            touchX = e.originalEvent.changedTouches[0].clientX;
            touchY = e.originalEvent.changedTouches[0].clientY;
        }

        //문자열 변수로 변환
        let aX;
        let aY;
        a == 'mouse' ? aX = mouseX : aX = touchX;
        a == 'mouse' ? aY = mouseY : aY = touchY;

        //현재 화면사이즈
        let userScreenX = $(window).width();
        let userScreenY = $(window).height();

        //x,y좌표를 퍼센트로 환산
        let positionX = Math.round(aX / userScreenX * 100);
        let positionY = Math.round(aY / userScreenY * 100);

        // 마우스 불빛 크기 및 좌표
        $('.cursor-light').css('background', `radial-gradient(circle ${b}px at ${positionX}% ${positionY}%, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.95))`);
	
    });
</script>

회색 고양이의 위치값과 마우스의 위치값이 오차범위내에 있을 경우,
2초 후 검정배경 및 css효과 삭제

<script>
    //고양이 사이즈
    catWidth = $('.gray-cat').width();
    catHeight = $('.gray-cat').height();

    //고양이 위치 좌표(이미지의 정중앙)
    catX = $('.gray-cat').offset().left + (catWidth / 2);
    catY = $('.gray-cat').offset().top + (catHeight / 2);

    // 회색 고양이 찾으면
    if (((catX - 30) <= aX && aX <= (catX + 30)) && ((catY - 30) <= aY && aY <= (catY + 30))) {
        console.log('찾았다');
        setTimeout(clear, 2000); //배경삭제
        setTimeout(successAlert, 2500);//게임성공 문구띄우기
    }
</script>

3. 시행착오

*** 해당부분의 주석만 표시함
콘솔창

회색 고양이를 계속 따라갈 경우,
위의 이미지와 같이 오차범위내에 있는 지 계속 체크되므로
1회만 실행 되도록 수정

<script>
    let findcat = false; //-----findcat 변수 추가
    if (findcat == false) { //----- findcat 이 false일 경우에만!
        catWidth = $('.gray-cat').width();
        catHeight = $('.gray-cat').height();

        catX = $('.gray-cat').offset().left + (catWidth / 2);
        catY = $('.gray-cat').offset().top + (catHeight / 2);

        if (((catX - 30) <= aX && aX <= (catX + 30)) && ((catY - 30) <= aY && aY <= (catY + 30))) {
            console.log('찾았다');
            setTimeout(clear, 2000);
            setTimeout(successAlert, 2500);
            findcat = 'true'; //----- 찾으면 true로 변경
        }
    }
</script>