JAVASCRIPT

게임 이펙트 전에 메인 페이지 이펙트 넣기

이미사용 2023. 4. 24. 20:53
명언
-
728x90
반응형

 

 

전체 소스 보기

 

 

 

    <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>

우선 jquery와 gsap의 라이브 러리를 가져와 줍니다.

 

 HTML 

<!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="../game/css/bg.css">
    <link rel="stylesheet" href="../game/css/game.css">
    <link rel="stylesheet" href="../game/css/reset.css">
</head>
<body>
    <div class="cursor">
        <img src="img/game_mouse06.png" alt>
    </div>
    
    <header id="header">
        <h1>WEBS GAME WORLD</h1>
        <div class="time"></div>
    </header>

    <main>
        <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">현재 맥을 사용하고 있으며, 화면 크기는 1920 X 760 입니다.</div>
    </footer>

 

마우스 변경하기

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

gsap를 사용하면서 addEventListener로인해 마우스가 움직일때 .cursor가 마우스를 대신하게 됩니다.

 

 

 

시간 구현

        //현재 시간
        const printTime = () => {
            const now = new Date();
            const options = {
                year: 'numeric',
                month: 'long',   //month 옵션에서는 'numeric'이 아닌 'long' 값을 사용하면 해당 월을 한글로 표현할 수 있다.
                day: '2-digit',  //long,2-digit로 바꾸면 한글이 나온다.
                hour: 'numeric',
                minute: 'numeric',
                second: 'numeric',
                hour12: false, // 24시간제로 표시
            };
            const dateTimeString = now.toLocaleString('ko-KR', options);
            document.querySelector(".time").innerHTML = dateTimeString
        };
        printTime();
        setInterval(printTime, 1000);

 

- new Date()를 이용하여 현시간을 가져왔습니다.

- 상수 options를 만들어 년, 월, 일, 시, 분, 초 를 가져와 주고 시간은 24시로 표시합니다.  (이때 월(month)의 값을 long으로 해주지 않으면 숫자만 나오게 됩니다.)

-  toLocaleString() 을 사용하여 지정언어를 한국어로 하여 options에 있는 값을 한국어로 나오게 합니다.

- setInterval 을 이용해 1초마다 한번씩 반복하게 해줍니다.

 

 

OS, 크기 구현

        //현재 사용중인  OS와 화면크기
        const printAgent = () => {
            let os = navigator.userAgent.toLowerCase();
            let osWdith = window.screen.width
            let osHeight = window.screen.height

            if(os.indexOf("macintosh") > -1){
	            document.querySelector("#footer .info").innerHTML = "현재 맥을 사용중 이며, 화면 크기는 "+osWdith+" X "+osHeight+" 입니다."
            } else if(os.indexOf("windows") > -1){
                document.querySelector("#footer .info").innerHTML = "현재 윈도우를 사용중 이며, 화면 크기는 "+osWdith+" X "+osHeight+" 입니다."
            } else if(os.indexOf("iphone") > -1){
                document.querySelector("#footer .info").innerHTML = "현재 아이폰을 사용중 이며, 화면 크기는 "+osWdith+" X "+osHeight+" 입니다."
            } else if(os.indexOf("android") > -1){
                document.querySelector("#footer .info").innerHTML = "현재 안드로이드폰을 사용중 이며, 화면 크기는 "+osWdith+" X "+osHeight+" 입니다."
            }            
        }
        printAgent();

- 사용중인 os를 가져오려면 navigator.userAgent 을 사용해야하며, 그값을 toLowerCase()을 이용해 소문자로만 나오게 하였습니다.

- window.screen.width 폭값과 window.screen.height높이값을 변수로 저장 합니다.

-  indexOf를 사용해 문자열에 해당 값이 있으면  그값의 위치값을 반환 하지만, 없을때는 -1을 반환 하는 것을 이용하여 

조건문을 만들어 그값에 해당할때  #footer .info에 그에 해당하는 os를 값을 과 화면의 크기를 보여줍니다.

 

아이콘 드래그 시 해더 배경 체인지, 현재 듣는 뮤직를 알려주기

        $(".icon1").draggable({
            containment:".icon__box", scroll: false,
            start: function() {
                
                $(".cursor img").attr("src", "img/game_mouse01.png");
                // $("header").removeClass().addClass("red");
                $("header").css("background-color","rgba(233, 65, 65, 0.582)");
                $("header").css("transition","all 0.3s");
                $("#footer .info").html("현재 빨강 음악 듣기를 클릭 하셨습니다.");
            },
            stop: function() {
                setTimeout(function() {
                    printAgent();
                }, 7000); // 7초 후에 실행
            }
        });

- jquery를 사용하여 draggable() 메서드를 호출하고 요소를 원하는곳에 배치 할수 있게 설정합니다.

- containment 속성을 통해 드래그 가능한 영역을 ".icon__box" 클래스가 붙은 요소로 제한하고, scroll 속성을 false로 설정하여 스크롤을 막습니다.

- start 속성에 콜백 함수를 등록하여 아이콘을 드래그 할 때의 동작을 정의합니다.

- 마우스의 커서를 "img/game_mouse01.png"로 변경하고, "header" 요소의 배경색을 빨간색으로 변경합니다. 그리고 "footer" 요소 안에 있는 "info" 클래스를 가진 요소의 내용을 변경합니다.

- stop 속성에 콜백 함수를 등록하여 드래그를 멈췄을 때의 동작을 정의합니다. 해당 함수에서는 7초 후에 printAgent() 함수를 실행하도록 설정합니다.

 

 jQuery의 다른 메서드들은 다음과 같습니다.

attr() : 속성을 변경합니다.
css() : CSS 속성을 변경합니다.
html() : HTML 내용을 변경합니다.

 

new Date() 날짜와 시간 정보를 생성하기 위해 사용되는 내장 객체입니다.
toLocaleString() 하나로, 숫자, 날짜, 시간 등의 값을 지정한 언어와 형식으로 문자열로 반환해주는 함수입니다.
navigator 현재 브라우저와 운영체제에 대한 정보를 제공합니다.
userAgent 현재 브라우저가 사용하는 User Agent 문자열을 반환합니다.
toLowerCase() 문자열을 소문자로 변환하여 반환합니다.
window.screen.width 현재 디바이스의 화면 너비를 픽셀 단위로 반환합니다.
window.screen.height 현재 디바이스의 화면 높이를 픽셀 단위로 반환합니다.
indexOf() 문자열에서 특정 문자열이 위치한 인덱스를 반환합니다. 만약 찾고자 하는 문자열이 없을 경우 -1을 반환합니다.
draggable HTML5의 특정 기능 중 하나로, 웹 페이지 요소들을 드래그하여 이동시킬 수 있게 해주는 JavaScript 메서드입니다.