첫 입장 (index.html)

help·2022년 12월 30일

Project 1. Catcha

목록 보기

2/7

1. 사전계획

화면 정중앙을 기준으로 360도로 눈알을 돌린다
이때 각도는 마우스/터치의 각도와 같다

[ 필요한 값 ]

마우스/터치의 실시간 위치좌표
기준이 될 중앙점
실시간 위치좌표로 각도 구하기
고양이 눈알을 움직일 방법

2. 개발과정

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

각각 mousemove 또는 touchmove 일때, 실시간 위치좌표를 구한다

<script>
	let mouseX = e.pageX;
	let mouseY = e.pageY;
	let touchX = e.originalEvent.changedTouches[0].pageX;
	let touchY = e.originalEvent.changedTouches[0].pageY;
</script>

기준이 될 화면 중앙점을 구한다 (x, y축을 이등분한 값)

<script>
    let centerX = $(window).width() / 2;
    let centerY = $(window).height() / 2;
</script>

두 각을 통해 각도를 구하는 atan2함수를 이용하여,
실시간 위치 좌표의 각도를 구한다

<script>
	let result = (Math.atan2(moveX, moveY) * 180) / Math.PI;
</script>

rotate 값에 넣어 좌표의 각도 만큼 고양이 눈알을 굴려준다

<script>
	$('.eyes-box').css("transform", "rotate(" + result + "deg)")
</script>

3. 시행착오

화면상의 x, y 좌표의 기준은 좌측 상단이 기준이다
그래서 화면을 4분면으로 나누어 각각 움직여준다

<script>
    //마우스가 1사분면에 있을 경우 (0~90도)
    $('.eyes-box').css("transform", "rotate(" + result + "deg)");

    //마우스가 2사분면에 있을 경우 (270~360도)
    // 2사분면이므로 ((90 - result) + 270)
    $('.eyes-box').css("transform", "rotate(" + (360 - result) + "deg)");

    //마우스가 3사분면에 있을 경우 (180~270도)
    // 3사분면이므로 (result + 180)
    $('.eyes-box').css("transform", "rotate(" + (180 + result) + "deg)");

    //마우스가 4사분면에 있을 경우 (90~180도)
    // 4사분면이므로 ((90 - result) + 90)
    $('.eyes-box').css("transform", "rotate(" + (180 - result) + "deg)");
</script>