Game Effect 01 - 게임 효과에 대해서 알아보자

설명:

보이는 것처럼 게임 효과를 활용해서 페이지를 만들어 봤습니다.

 

css 는 따로 설명하지 않고, 

body 의 footer 와 script 를 나누어서 설명하겠습니다.

body 의 footer 

<footer id="footer">
    <div class="info">현재 맥을 사용하고 있으면, 화면 크기는 1920 x 760 입니다.</div>
</footer>

footer 에는 별다른 설정을 하지 않았습니다.

script 에서 함수식을 활용해서 화면 크기를 구현하는 설정을 했습니다.

script 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
    $(".icon1").draggable({
        containment: ".icon__box", scroll: false,

        start: function(){
            $(".cursor img").attr("src", "img/game_mouse01.png")
        },
    });
    $(".icon2").draggable({
        containment: ".icon__box", scroll: false,
        start: function(){
            $(".cursor img").attr("src", "img/game_mouse02.png")
        },
    });
    $(".icon3").draggable({
        containment: ".icon__box", scroll: false,
        start: function(){
            $(".cursor img").attr("src", "img/game_mouse03.png")
        },
    });
    $(".icon4").draggable({
        containment: ".icon__box", scroll: false,
        start: function(){
            $(".cursor img").attr("src", "img/game_mouse04.png")
        },
    });
    $(".icon5").draggable({
        containment: ".icon__box", scroll: false,
        start: function(){
            $(".cursor img").attr("src", "img/game_mouse05.png")
        },
    });
    $( "#draggable3" ).draggable({ containment: "#containment-wrapper", scroll: false });

    window.onload = function(){
        window.addEventListener("mousemove", e => {
            gsap.to(".cursor", {
                duration: 0,
                left: e.pageX -5,
                top: e.pageY-10
            })
        });

        printTime(); // 오른쪽 상단 시간
        printAgent(); // 하단 중앙
    }

    // 현재 시간을 구합니다.
    function updateTime() {

        const now = new Date();
        const year = now.getFullYear();
        const month = now.getMonth() + 1;
        const day = now.getDate();
        const hours = now.getHours();
        const minutes = now.getMinutes();
        const seconds = now.getSeconds();

        // 시간을 표시할 요소를 찾고 내용을 설정합니다.
        const timeElem = document.querySelector('.time');
        timeElem.textContent = `${year}년 ${month}월 ${day}일 ${hours}시 ${minutes}분 ${seconds}초`;
    }

    // 1초마다 updateTime 함수를 실행합니다.
    setInterval(updateTime, 1000);

    function updateInfo() {
        // 화면 크기를 구합니다.
        const width = window.innerWidth;
        const height = window.innerHeight;

        // 정보를 표시할 요소를 찾고 내용을 설정합니다.
        const infoElem = document.querySelector('.info');
        infoElem.textContent = `현재 윈도우를 사용하고 있으면, 화면 크기는 ${width} x ${height} 입니다.`;
    }

    // 페이지가 로드되면 updateInfo 함수를 실행합니다.
    window.addEventListener('load', updateInfo);

    // 화면 크기가 변경될 때마다 updateInfo 함수를 실행합니다.
    window.addEventListener('resize', updateInfo);

</script>

jquery 와 gsap 를 이용했습니다.

jQuery는 HTML의 클라이언트 사이드 스크립팅을 간편하게 만드는 인기 있는 JavaScript 라이브러리입니다.
다양한 기능과 유용한 메서드를 제공하여 웹 개발을 더욱 효율적이고 쉽게 할 수 있도록 도와줍니다.

GSAP (GreenSock Animation Platform)은 HTML, CSS 및 JavaScript를 사용하여 웹 애니메이션을 만들기위한 강력한 JavaScript 라이브러리입니다.
애니메이션 기술의 빠른 진화와 함께, GSAP은 고성능, 플러그인 기반 및 유연한 API로 인해 개발자들에게 널리 사용되고 있습니다.
GSAP은 다양한 브라우저 및 플랫폼에서 작동하며, 대부분의 모던 브라우저와 호환됩니다.

 

여기에 쓰인 속성들에 대해서 설명하겠습니다.

Draggable은 웹 개발에서 사용되는 JavaScript 라이브러리 중 하나로, HTML 요소를 드래그 앤 드롭 가능하게 만드는 기능을 제공합니다.
Draggable은 다양한 설정 옵션을 제공하며, 다양한 이벤트 및 콜백 함수를 통해 드래그 앤 드롭 기능을 커스터마이징할 수 있습니다.
이 라이브러리는 모바일 기기에서도 작동하며, 모바일 터치 이벤트를 처리하는 기능도 제공합니다.
Draggable은 다른 JavaScript 라이브러리와도 쉽게 통합될 수 있습니다.


containment, scroll, start는 모두 Draggable 라이브러리에서 사용되는 옵션입니다.

- containment: 드래그 가능한 요소의 이동 범위를 제한하는 옵션입니다.
이 옵션을 사용하면 드래그 가능한 요소가 지정된 부모 요소 내에서만 이동하도록 제한할 수 있습니다.

- scroll: 드래그 가능한 요소가 스크롤 가능한 부모 요소 내에서 이동할 때 스크롤 동작을 제어하는 옵션입니다.
이 옵션을 사용하면 드래그 가능한 요소가 스크롤 가능한 부모 요소를 벗어나지 않도록 제어할 수 있습니다.

- start: 드래그 가능한 요소의 이동이 시작될 때 실행되는 콜백 함수를 정의하는 옵션입니다.
이 옵션을 사용하면 드래그 가능한 요소의 이동이 시작되기 전에 필요한 작업을 수행할 수 있습니다.


attr은 jQuery의 메서드 중 하나로, HTML 요소의 속성(attribute) 값을 가져오거나 설정하는 기능을 제공합니다.
attr 메서드는 다음과 같이 사용할 수 있습니다.

속성 값 가져오기:

var value = $(selector).attr("속성명");​

예를 들어, id가 "myDiv"인 div 요소의 id 속성값을 가져오려면 다음과 같이 사용할 수 있습니다.

var idValue = $("div#myDiv").attr("id");

속성 값 설정하기:

$(selector).attr("속성명", "새로운값");

예를 들어, id가 "myDiv"인 div 요소의 id 속성값을 "newDiv"로 변경하려면 다음과 같이 사용할 수 있습니다.

$("div#myDiv").attr("id", "newDiv");

Date()는 자바스크립트에서 내장된 전역 함수 중 하나입니다. 
이 함수는 현재 시간과 날짜 정보를 반환합니다.

Date() 함수를 호출하면 현재 시간과 날짜 정보를 포함한 Date 객체가 생성됩니다. 
이 객체는 getFullYear(), getMonth(), getDate(), getHours(), getMinutes(), getSeconds() 등과 같은 메소드를 사용하여 날짜 및 시간 정보를 추출할 수 있습니다.

예를 들어, 다음과 같은 코드를 사용하면 현재 날짜를 문자열로 가져올 수 있습니다.

let today = new Date();
let dateString = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();
console.log(dateString);

위 코드는 현재 날짜를 "년-월-일" 형식으로 출력합니다. 
하지만 이 함수는 실행하는 시점에 따라 결과가 달라질 수 있으므로, 정확한 결과를 얻으려면 실행 시점의 시간대와 설정을 고려해야 합니다.