JAVASCRIPT

게임 이펙트 만들기! (jquery,gsap, 드래그 이벤트)

김도현2 2023. 4. 24. 21:50
반응형

게임 이펙트 만들기! (jquery, 드래그 이벤트)

jquery를 이용한 드래그 이벤트 입니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

VSCode

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GAME Effect</title>

    <link rel="stylesheet" href="css/bg.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/game.css">
</head>
<body>
    <div class="cursor">
        <img src="img/game_mouse02.png" alt>
    </div>
    <header id="header">
        <h1>GAME WORLD</h1>
        <div class="time">현재 날짜, 시간출력</div>
        
    </header>

    <main>
        <div class="moving">
            <div>
                <span>asdf</span>
            </div>
        </div>
        <div class="icon__box">
            <div class="icon1">
                <img src="img/game_icon01.png" alt="뮤직">
                <span>뮤직 듣기</span>
            </div>
            <div class="icon2">
                <img src="img/game_icon02.png" alt="뮤직">
                <span>뮤직 듣기</span>
            </div>
            <div class="icon3">
                <img src="img/game_icon03.png" alt="뮤직">
                <span>뮤직 듣기</span>
            </div>
            <div class="icon4">
                <img src="img/game_icon04.png" alt="뮤직">
                <span>뮤직 듣기</span>
            </div>
        </div>
    </main>

    <footer id="footer">
        <div class="info">현재 OS정보 출력</div>
    </footer>
    <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>
        //하단 출력 선택자
        let info = document.querySelector(".info");

        //폴더 드래그, 헤더색 바꾸기
        $(".icon1").draggable({
            containment: ".icon__box", scroll: false,
            
            start: function() {
                $(".cursor img").attr("src", "img/game_mouse01.png");

                $("#header").removeClass("blue yellow green");
                $("#header").addClass("red");
                
            }
        });
        $(".icon2").draggable({
            containment: ".icon__box", scroll: false,
            start: function() {
                $("main .cursor img").attr("src", "img/game_mouse02.png");

                $("#header").removeClass("red yellow green");
                $("#header").addClass("blue");
            }
        });
        $(".icon3").draggable({
            containment: ".icon__box", scroll: false,
            start: function() {
                $(".cursor img").attr("src", "img/game_mouse03.png");

                $("#header").removeClass("red blue yellow");
                $("#header").addClass("green");
            }
        });
        $(".icon4").draggable({
            containment: ".icon__box", scroll: false,
            start: function() {
                $(".cursor img").attr("src", "img/game_mouse04.png");

                $("#header").removeClass("red blue green");
                $("#header").addClass("yellow");
            }
        });
        


        // 빨간 폴더 이벤트
        $(".icon1").mousedown(()=>{
            info.innerHTML = "빨간 뮤직 듣기 클릭했습니다.";
        });
        $(".icon1").draggable({
            drag:function(e){
                info.innerHTML = "빨간 뮤직 듣기 드래그중 입니다.";
            },
        }).draggable({
            stop:function(e){
                info.innerHTML = "빨간 뮤직 듣기 드래그를 놨습니다.";
                settime();
            }
        });

        // 파랑 폴더 이벤트
        $(".icon2").mousedown(()=>{
            info.innerHTML = "파랑 뮤직 듣기 클릭했습니다.";
        });
        $(".icon2").draggable({
            drag:function(e){
                info.innerHTML = "파랑 뮤직 듣기 드래그중 입니다.";
            },
        }).draggable({
            stop:function(e){
                info.innerHTML = "파랑 뮤직 듣기 드래그를 놨습니다.";
                settime();
            }
        });

        // 초록 폴더 이벤트
        $(".icon3").mousedown(()=>{
            info.innerHTML = "초록 뮤직 듣기 클릭했습니다.";
        });
        $(".icon3").draggable({
            drag:function(e){
                info.innerHTML = "초록 뮤직 듣기 드래그중 입니다.";
            },   
        }).draggable({
            stop:function(e){
                info.innerHTML = "초록 뮤직 듣기 드래그를 놨습니다.";
                settime();
            }
        });

        // 노랑 폴더 이벤트
        $(".icon4").mousedown(()=>{
            info.innerHTML = "노랑 뮤직 듣기 클릭했습니다.";
        });
        $(".icon4").draggable({
            drag:function(e){
                info.innerHTML = "노랑 뮤직 듣기 드래그중 입니다.";
            },
        }).draggable({
            stop:function(e){
                info.innerHTML = "노랑 뮤직 듣기 드래그를 놨습니다.";
                settime();
            }
        });

        //현재시간
        function printTime() {
            const clock = document.querySelector("#header .time");
            let now = new Date();

            clock.innerHTML = now.getFullYear() + "년 " +
            (now.getMonth()+1) + "월 " + 
            now.getDate() + "일 " +
            now.getHours() + "시 " +
            now.getMinutes() + "분 " +
            now.getSeconds() + "초 ";

            setTimeout("printTime()", 1000);
        }; 

        //현재 OS, 크기
        let os = navigator.userAgent.toLowerCase();
        let sw = screen.width;
        let sh = screen.height;

        function prinAgent() {
            if (os.indexOf("windows") >= 0) {
            info.innerHTML = "현재 윈도우를 사용하고 있으며, 화면 크기는 " + sw + "x" + sh + " 입니다."
            } else if (os.indexOf("macintosh") >= 0) {
            info.innerHTML = "현재 맥을 사용하고 있으며, 화면 크기는 " + sw + "x" + sh + " 입니다."
            } else if (os.indexOf("iphone") >= 0) {
            info.innerHTML = "현재 아이폰을 사용하고 있으며, 화면 크기는 " + sw + "x" + sh + " 입니다."
            } else if (os.indexOf("android") >= 0) {
            info.innerHTML = "현재 안드로이드 폰을 사용하고 있으며, 화면 크기는 " + sw + "x" + sh + " 입니다."
            }
        }
        
        //5초후 현재 OS출력하기
        function settime(){
            setTimeout(function(){
                prinAgent()
            },5000);
        }

        //로딩 됐을시 실행
        window.onload = function(){
            window.addEventListener("mousemove", e => {
                gsap.to(".cursor", {
                    duration: 0, 
                    left: e.pageX,
                    top: e.pageY
                });
            });      
            
            printTime();    //오른쪽 상단 시간 실행문
            prinAgent();    //현재 OS, 크기 실행문
        }

        
    </script>
</body>
</html>

 

이 코드에서는 jQuery, jQuery UI 및 GSAP 라이브러리를 사용하여 웹 페이지를 조작합니다.

 

페이지에는 네 개의 아이콘이 있으며, 각각을 드래그할 수 있습니다. 드래그하는 동안, 해당 폴더의 색상에 따라 header의 색상이 변경됩니다. 아이콘을 클릭하면 정보가 footer에 표시됩니다. 아이콘을 드래그한 후에는 시간이 표시됩니다.

 

 

 

 

 

 

script

//폴더 드래그, 헤더색 바꾸기
$(".icon1").draggable({
    //특정 범위 안에서 드래그로 못빠져나가게 하기
    containment: ".icon__box", scroll: false,

    start: function() {
        //드래그시 커서 이미지(색) 바꾸기
        $(".cursor img").attr("src", "img/game_mouse01.png");

        //드래그시 헤더 색 바꾸기
        $("#header").removeClass("blue yellow green");
        $("#header").addClass("red");
    }
});
$(".icon2").draggable({
    containment: ".icon__box", scroll: false,
    start: function() {
        $("main .cursor img").attr("src", "img/game_mouse02.png");

        $("#header").removeClass("red yellow green");
        $("#header").addClass("blue");
    }
});
$(".icon3").draggable({
    containment: ".icon__box", scroll: false,
    start: function() {
        $(".cursor img").attr("src", "img/game_mouse03.png");

        $("#header").removeClass("red blue yellow");
        $("#header").addClass("green");
    }
});
$(".icon4").draggable({
    containment: ".icon__box", scroll: false,
    start: function() {
        $(".cursor img").attr("src", "img/game_mouse04.png");

        $("#header").removeClass("red blue green");
        $("#header").addClass("yellow");
    }
});

드래그 가능한 아이콘들을 생성하고, 아이콘을 드래그 할 때 발생하는 이벤트에 따라 헤더의 배경색을 바꾸는 기능을 구현하고 있습니다.

 

먼저, ".icon1", ".icon2", ".icon3", ".icon4" 클래스를 가진 아이콘들을 draggable() 함수로 드래그 가능하게 만들고, containment와 scroll 속성을 설정하여 드래그 가능한 범위를 지정합니다.

 

각각의 아이콘들은 start() 함수를 가지고 있으며, 드래그가 시작될 때 실행됩니다. start() 함수 안에서는 마우스 커서의 이미지를 바꾸는 기능과, 헤더의 배경색을 바꾸는 기능이 수행됩니다.

 

예를 들어, ".icon1"을 드래그하면 start() 함수가 실행되며, 마우스 커서 이미지를 "img/game_mouse01.png"으로 바꾸고, 헤더의 배경색을 이전에 설정된 색상 클래스에서 "red" 클래스로 변경합니다. 마찬가지로, ".icon2", ".icon3", ".icon4"도 각각의 색상에 맞게 헤더의 배경색을 변경합니다.

 

 

 

 

//하단 출력 선택자
let info = document.querySelector(".info");

// 빨간 폴더 이벤트
$(".icon1").mousedown(()=>{
    info.innerHTML = "빨간 뮤직 듣기 클릭했습니다.";
});
$(".icon1").draggable({
    drag:function(e){
        info.innerHTML = "빨간 뮤직 듣기 드래그중 입니다.";
    },
}).draggable({
    stop:function(e){
        info.innerHTML = "빨간 뮤직 듣기 드래그를 놨습니다.";
        settime();
    }
});

// 파랑 폴더 이벤트
$(".icon2").mousedown(()=>{
    info.innerHTML = "파랑 뮤직 듣기 클릭했습니다.";
});
$(".icon2").draggable({
    drag:function(e){
        info.innerHTML = "파랑 뮤직 듣기 드래그중 입니다.";
    },
}).draggable({
    stop:function(e){
        info.innerHTML = "파랑 뮤직 듣기 드래그를 놨습니다.";
        settime();
    }
});

// 초록 폴더 이벤트
$(".icon3").mousedown(()=>{
    info.innerHTML = "초록 뮤직 듣기 클릭했습니다.";
});
$(".icon3").draggable({
    drag:function(e){
        info.innerHTML = "초록 뮤직 듣기 드래그중 입니다.";
    },   
}).draggable({
    stop:function(e){
        info.innerHTML = "초록 뮤직 듣기 드래그를 놨습니다.";
        settime();
    }
});

// 노랑 폴더 이벤트
$(".icon4").mousedown(()=>{
    info.innerHTML = "노랑 뮤직 듣기 클릭했습니다.";
});
$(".icon4").draggable({
    drag:function(e){
        info.innerHTML = "노랑 뮤직 듣기 드래그중 입니다.";
    },
}).draggable({
    stop:function(e){
        info.innerHTML = "노랑 뮤직 듣기 드래그를 놨습니다.";
        settime();
    }
});

마우스로 드래그해서 아이콘을 이동하면, 하단에 출력되는 메시지를 변경하는 기능을 구현한 코드입니다.

 

먼저, HTML 파일에서 .info 클래스를 가진 요소를 선택해서 let info = document.querySelector(".info");로 변수 info에 할당합니다.

 

그 후, 네 개의 아이콘 중 하나를 마우스로 클릭했을 때 발생하는 이벤트를 $(".icon1").mousedown()과 같은 방법으로 정의합니다. 클릭한 아이콘에 따라 info.innerHTML 값을 변경하여 하단에 출력될 메시지를 설정합니다.

 

아이콘을 드래그할 때의 이벤트는 $(".icon1").draggable()로 정의합니다. drag 함수는 아이콘이 드래그되고 있는 동안에 계속해서 호출되며, info.innerHTML 값을 변경하여 메시지를 출력합니다.

 

드래그가 끝난 후에는 stop 함수가 호출되어 info.innerHTML 값을 변경하고, settime() 함수를 호출합니다. 이 함수는 새로운 뮤직 트랙을 재생하기 위한 타이머를 설정하는 역할을 합니다.

 

 

 

//현재시간
function printTime() {
    const clock = document.querySelector("#header .time");
    let now = new Date();

    clock.innerHTML = now.getFullYear() + "년 " +
    (now.getMonth()+1) + "월 " + 
    now.getDate() + "일 " +
    now.getHours() + "시 " +
    now.getMinutes() + "분 " +
    now.getSeconds() + "초 ";

    setTimeout("printTime()", 1000);
}; 

//현재 OS, 크기
let os = navigator.userAgent.toLowerCase();
let sw = screen.width;
let sh = screen.height;

function prinAgent() {
    if (os.indexOf("windows") >= 0) {
    info.innerHTML = "현재 윈도우를 사용하고 있으며, 화면 크기는 " + sw + "x" + sh + " 입니다."
    } else if (os.indexOf("macintosh") >= 0) {
    info.innerHTML = "현재 맥을 사용하고 있으며, 화면 크기는 " + sw + "x" + sh + " 입니다."
    } else if (os.indexOf("iphone") >= 0) {
    info.innerHTML = "현재 아이폰을 사용하고 있으며, 화면 크기는 " + sw + "x" + sh + " 입니다."
    } else if (os.indexOf("android") >= 0) {
    info.innerHTML = "현재 안드로이드 폰을 사용하고 있으며, 화면 크기는 " + sw + "x" + sh + " 입니다."
    }
}

//5초후 현재 OS출력하기
function settime(){
    setTimeout(function(){
        prinAgent()
    },5000);
}

//로딩 됐을시 실행
window.onload = function(){
    window.addEventListener("mousemove", e => {
        gsap.to(".cursor", {
            duration: 0, 
            left: e.pageX,
            top: e.pageY
        });
    });      

    printTime();    //오른쪽 상단 시간 실행문
    prinAgent();    //현재 OS, 크기 실행문
}

 

현재 시간 출력: printTime() 함수는 현재 시간을 출력하는 함수입니다. now 변수에 현재 시간을 저장하고, clock 선택자를 통해 해당 HTML 요소에 현재 시간을 출력합니다. setTimeout() 함수를 이용하여 1초마다 printTime() 함수를 실행시켜 시간이 실시간으로 업데이트되도록 합니다.

 

현재 OS, 크기 출력: prinAgent() 함수는 현재 사용 중인 운영체제와 화면 크기를 출력하는 함수입니다. navigator.userAgent를 이용하여 사용 중인 운영체제를 판별하고, screen.width와 screen.height를 이용하여 화면 크기를 구합니다. 해당 정보를 문자열로 출력하고, settime() 함수를 이용하여 5초 후에 출력되도록 합니다.

 

커서 움직임 처리: window.addEventListener()를 이용하여 마우스 움직임을 감지하고, gsap.to()를 이용하여 .cursor 요소의 위치를 마우스 위치로 이동시킵니다.

 

페이지 로드 시 실행: window.onload() 함수를 이용하여 페이지 로드 시 printTime()과 prinAgent() 함수를 실행시켜 페이지가 로드될 때 바로 현재 시간과 OS 정보를 출력하도록 합니다.

'JAVASCRIPT'의 다른글

  • 현재글게임 이펙트 만들기! (jquery,gsap, 드래그 이벤트)

관련글

댓글

티스토리툴바