코딩 공부/JAVASCRIPT

자바스크립트 게임 이펙트(Game Effect)01

천서리 2023. 4. 24. 23:00
QUOTE THE DAY

“ 당신이 6개월 이상 한 번도 보지 않은 코드는 다른 사람이 다시 만드는 게 훨씬 더 나을 수 있다. ”

- 이글슨 (Eagleson)
반응형

게임 이펙트(Game Effect)란?

자바스크립트를 사용하여 구현된 게임에서의 이펙트는 일반적으로 다양한 애니메이션 기술과 그래픽 처리 기술을 사용하여 구현됩니다. 이를 통해 게임에 동적이고 생동감 있는 느낌을 부여할 수 있습니다.

 

 

 

 

 

 

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="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>SEOLHEE GAME WORLD</h1>
        <div class="time">2023년 4월 24일 09시 30분 15초</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="music">🎵 현재 뮤직 듣기가 중지되었습니다. 🎵</div>
        <div class="info">현재 윈도우를 사용하고 있으며, 화면 크기는 1920 X 760입니다.</div>
    </footer>

 

 

 

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
    //드래그
    $(".icon1").draggable({
        containment: ".icon__box", scroll: false,
        //드래그시 마우스 이미지(색) 바꾸기
        start: function() {
            $(".cursor img").attr("src", "img/game_mouse01.png");
        },

        //드래그 할 때 헤더 색 바꾸기
        drag: function() {
            $("header").css("background-color", "#f99191b6");
        },
    });
    //클릭
    $(".icon1").click(function() {
    let music = $(".music");
        if (music.text() == "🎵 현재 뮤직 듣기가 중지되었습니다. 🎵") {
            music.text("🎵 현재 뮤직 듣기가 실행되었습니다. 🎵");
        } else {
            music.text("🎵 현재 뮤직 듣기가 중지되었습니다. 🎵");
        }
    });


    //icon2
    //드래그
    $(".icon2").draggable({
        //드래그시 마우스 이미지(색) 바꾸기
        start: function() {
            $(".cursor img").attr("src", "img/game_mouse02.png");
        },

        //드래그 할 때 헤더 색 바꾸기
        drag: function() {
            $("header").css("background-color", "#919df9b0");
        },
    });
    //클릭
    $(".icon2").click(function() {
        let music = $(".music");
        if (music.text() == "🎵 현재 뮤직 듣기가 중지되었습니다. 🎵") {
            music.text("🎵 현재 뮤직 듣기가 실행되었습니다. 🎵");
        } else {
            music.text("🎵 현재 뮤직 듣기가 중지되었습니다. 🎵");
        }
    });

    //icon3
    //드래그
    $(".icon3").draggable({
         //드래그시 마우스 이미지(색) 바꾸기
        start: function() {
            $(".cursor img").attr("src", "img/game_mouse03.png");
        },

        //드래그 할 때 헤더 색 바꾸기
        drag: function() {
            $("header").css("background-color", "#c3ff98b9");
        },
    });
    //클릭
    $(".icon3").click(function() {
        let music = $(".music");
        if (music.text() == "🎵 현재 뮤직 듣기가 중지되었습니다. 🎵") {
            music.text("🎵 현재 뮤직 듣기가 실행되었습니다. 🎵");
        } else {
            music.text("🎵 현재 뮤직 듣기가 중지되었습니다. 🎵");
        }
    });

    //icon4
    //드래그
    $(".icon4").draggable({
        containment: ".icon__box", scroll: false,
        //드래그시 마우스 이미지(색) 바꾸기
        start: function() {
            $(".cursor img").attr("src", "img/game_mouse04.png");
        },

        //드래그 할 때 헤더 색 바꾸기
        drag: function() {
            $("header").css("background-color", "#fbf58bb6");
        }
    });
    //클릭
    $(".icon4").click(function() {
        let music = $(".music");
        if (music.text() == "🎵 현재 뮤직 듣기가 중지되었습니다. 🎵") {
            music.text("🎵 현재 뮤직 듣기가 실행되었습니다. 🎵");
        } else {
            music.text("🎵 현재 뮤직 듣기가 중지되었습니다. 🎵");
        }
    });

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

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


    //시간 출력
    function printTime() {
        const clock = document.querySelector(".time");
        const now = new Date();
        let hour = now.getHours();
        let minute = now.getMinutes();
        let second = now.getSeconds();
        if (hour > 12) hour = hour - 12;
        if (hour < 10) hour = `0${hour}`;
        if (minute < 10) minute = `0${minute}`;
        if (second < 10) second = `0${second}`;
        const nowTime =
            now.getFullYear() + "년 " + (now.getMonth() + 1) + "월 " +
            now.getDate() +
            "일 " +
            hour +
            ":" +
            minute +
            ":" +
            second;
        clock.innerText = nowTime;
        setTimeout("printTime()", 1000);
    }

    //os 화면 출력
    function printAgent() {
        const agent = document.querySelector(".info");
        const os = navigator.userAgent.toLocaleLowerCase();

        if (os.indexOf("window") >= 0) {
            agent.innerText = "현재 windows를 사용하고 있으며, 화면 크기는 " + screen.width + " * " + screen.height + "입니다.";
            document.querySelector(".info").classList.add("window");
        } else if (os.indexOf("macintosh") >= 0) {
            agent.innerText = "현재 mac을 사용하고 있으며, 화면 크기는 " + screen.width + " * " + screen.height + "입니다.";
            document.querySelector("body").classList.add("mac");
        } else if (os.indexOf("iphone") >= 0) {
            agent.innerText = "현재 IPhone을 사용하고 있으며, 화면 크기는 " + screen.width + " * " + screen.height + "입니다.";
            document.querySelector("body").classList.add("iphone");
        } else if (os.indexOf("android") >= 0) {
            agent.innerText = "현재 Android를 사용하고 있으며, 화면 크기는 " + screen.width + " * " + screen.height + "입니다.";
            document.querySelector("body").classList.add("android");
        }
    }
</script>

 

 

이제 위 코드들을 설명하여 보겠습니다.

 

 

jquery

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

제이쿼리를 연동시켜 주었습니다.

 

 

 

icon 드래그와 클릭

//icon1
//드래그
$(".icon1").draggable({
    containment: ".icon__box", scroll: false,
    //드래그시 마우스 이미지(색) 바꾸기
    start: function() {
        $(".cursor img").attr("src", "img/game_mouse01.png");
    },

    //드래그 할 때 헤더 색 바꾸기
    drag: function() {
        $("header").css("background-color", "#f99191b6");
    },
});
//클릭
$(".icon1").click(function() {
let music = $(".music");
    if (music.text() == "🎵 현재 뮤직 듣기가 중지되었습니다. 🎵") {
        music.text("🎵 현재 뮤직 듣기가 실행되었습니다. 🎵");
    } else {
        music.text("🎵 현재 뮤직 듣기가 중지되었습니다. 🎵");
    }
});

 

jQuery를 사용하여, 아이콘1(.icon1)을 드래그 및 클릭할 때 발생하는 이벤트를 처리합니다.

 

드래그

먼저, 아이콘1을 드래그 가능하도록 만들기 위해 $(".icon1").draggable() 함수를 사용합니다. 이 함수는 드래그 가능한 요소를 선택하고, containment 속성으로 드래그 가능한 범위를 제한하며, scroll 속성으로 스크롤 기능을 끄거나 켤 수 있습니다.

 

드래그가 시작될 때는 start 옵션에서 정의한 콜백 함수가 실행됩니다. 이 예시에서는 드래그가 시작되면 마우스 이미지(색)를 바꾸는 기능이 구현되어 있습니다. 마우스 이미지는 .cursor img 선택자를 사용하여 변경합니다.

 

또한 드래그 중에는 drag 옵션에서 정의한 콜백 함수가 실행됩니다. 이 예시에서는 드래그 중에 헤더의 배경색을 변경하는 기능이 구현되어 있습니다.

 

클릭

아이콘1을 클릭할 때는 $(".icon1").click() 함수가 실행됩니다. 이 함수는 클릭할 때 실행될 콜백 함수를 지정합니다. 이 예시에서는 클릭할 때마다 뮤직 텍스트를 변경하는 기능이 구현되어 있습니다. 만약 뮤직 텍스트가 "🎵 현재 뮤직 듣기가 중지되었습니다. 🎵"인 경우, 클릭 시 "🎵 현재 뮤직 듣기가 실행되었습니다. 🎵"으로 변경되고, 그 반대의 경우에는 "🎵 현재 뮤직 듣기가 중지되었습니다. 🎵"로 변경됩니다.

 

 

위 과정을 (".icon2"), $(".icon3"), $(".icon4") 아이콘에도 적용하여 줍니다.

 

 

마우스 커서

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

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

 

window.addEventListener()를 사용하여 마우스의 움직임 이벤트(mousemove)를 감지하고, 해당 이벤트가 발생할 때마다 .cursor 클래스를 가진 요소의 위치를 마우스 위치로 이동시키는 기능이 구현되어 있습니다.

이를 위해 gsap.to() 함수를 사용하며, duration 속성에 0을 지정하여 애니메이션 없이 즉시 이동합니다. 마우스 위치는 e.pageX와 e.pageY로 계산되며, .cursor 요소의 위치를 조정합니다.

 

 

 

시간 구현

//시간 출력
function printTime() {
    const clock = document.querySelector(".time");
    const now = new Date();
    let hour = now.getHours();
    let minute = now.getMinutes();
    let second = now.getSeconds();
    if (hour > 12) hour = hour - 12;
    if (hour < 10) hour = `0${hour}`;
    if (minute < 10) minute = `0${minute}`;
    if (second < 10) second = `0${second}`;
    const nowTime =
        now.getFullYear() + "년 " + (now.getMonth() + 1) + "월 " +
        now.getDate() +
        "일 " +
        hour +
        ":" +
        minute +
        ":" +
        second;
    clock.innerText = nowTime;
    setTimeout("printTime()", 1000);
}
  1. const now = new Date()를 사용하여 현재 시간을 가져옵니다.
  2. getHours(), getMinutes(), getSeconds() 메서드를 사용하여 시간, 분, 초 값을 변수에 저장합니다.
  3. 현재 시간이 12보다 크다면, 12를 빼줌으로써 12시간 기준으로 변환합니다.
  4. 시, 분, 초가 10보다 작으면 앞에 0을 붙여서 두 자리수로 표현합니다.
  5. const nowTime = 을 사용하여 현재 시간을 now 객체의 메서드를 사용하여 문자열로 구성합니다. 이 문자열은 "년", "월", "일", ":", " " 등의 구분자를 사용하여 구성됩니다.
  6. 구성된 현재 시간 문자열을 clock.innerText에 할당하여 HTML 문서에서 .time 클래스를 가진 요소의 내용으로 출력합니다.
  7. setTimeout() 함수를 사용하여 1초마다 printTime() 함수를 호출하도록 설정하였습니다.

 

 

OS 정보 화면 출력

//os 화면 출력
function printAgent() {
    const agent = document.querySelector(".info");
    const os = navigator.userAgent.toLocaleLowerCase();

    if (os.indexOf("window") >= 0) {
        agent.innerText = "현재 windows를 사용하고 있으며, 화면 크기는 " + screen.width + " * " + screen.height + "입니다.";
        document.querySelector(".info").classList.add("window");
    } else if (os.indexOf("macintosh") >= 0) {
        agent.innerText = "현재 mac을 사용하고 있으며, 화면 크기는 " + screen.width + " * " + screen.height + "입니다.";
        document.querySelector("body").classList.add("mac");
    } else if (os.indexOf("iphone") >= 0) {
        agent.innerText = "현재 IPhone을 사용하고 있으며, 화면 크기는 " + screen.width + " * " + screen.height + "입니다.";
        document.querySelector("body").classList.add("iphone");
    } else if (os.indexOf("android") >= 0) {
        agent.innerText = "현재 Android를 사용하고 있으며, 화면 크기는 " + screen.width + " * " + screen.height + "입니다.";
        document.querySelector("body").classList.add("android");
    }
}
  1. navigator.userAgent.toLocaleLowerCase()를 사용하여 현재 브라우저에서 사용되고 있는 User Agent 문자열을 소문자로 변환하여 가져옵니다.
  2. if-else문을 사용하여 현재 사용중인 디바이스의 OS가 무엇인지 판별합니다.
  3. OS 판별 조건문을 각각 실행하면, innerText를 사용하여 출력될 텍스트를 지정합니다.
  4. 디바이스별로 다른 스타일을 적용하기 위해 classList를 사용하여 window, mac, iphone, android 클래스를 각각 추가합니다.
반응형

'코딩 공부/JAVASCRIPT'의 다른글

  • 현재글자바스크립트 게임 이펙트(Game Effect)01

관련글

댓글
Adventure Time - BMO

티스토리툴바