gameEffect01 애니메이션 구현하기

“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”

- Frederick Philips Brooks
Mythical Man-Month 저자

728x90

안녕하세요 ヾ(≧▽≦*)o 오늘은 자바스크립트를 이용해 gameEffect01을 만들어보도록 하겠습니다.

기능은 마우스 커서 바꾸기 , 시간 구현 , OS 크기 구현 기능을 추가해 넣어주었습니다.

gsap, jquery도 사용해 주었습니다 ! 🙌

💛 완성화면 입니다. 마우스 커서를 이용해 폴더를 이동시키면 마우스 커서 색도 그에 맞춰 변경됩니다 .

우측 상단엔 현재 날짜와 시간이 표시 돼 있고, 하단엔 운영체제 정보가 나와 있으며 파일을 끌어당길 수 있고 파일을 끌어당길 때 마우스 커서의 색상이 파일과 동일한 색깔로 변경됩니다 !

폰트는 마이쮸체, import로 폰트어썸에서 가져왔습니다 !!!

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_mouse01.png" alt>
    </div>
    <header id="header">
        <h1>🎮Yuna Game World🎮</h1>
        <div class="time">2023-04-24 09:37 15s</div>
    </header >

완성화면 헤더에 들어갈 멘트와 time을 임시로 지정해 줍니다.

bg css에는 배경 애니메이션을 넣어주도록 합니다.

마지막 git 주소에 CSS 첨부 돼 있습니다 !

<main>
    <div class="icon___box">
        <div class="icon1">
            <img src="img/game_icon01.png" alt="뮤직">
            <span>Music🎵</span>
        </div>
        <div class="icon2">
            <img src="img/game_icon02.png" alt="뮤직">
            <span>Music🎵</span>
        </div>
        <div class="icon3">
            <img src="img/game_icon03.png" alt="뮤직">
            <span>Music🎵</span>
        </div>
        <div class="icon4">
            <img src="img/game_icon04.png" alt="뮤직">
            <span>Music🎵</span>
        </div>
    </div>
</main>

아이콘 박스를 지정해 주면서 이미지와 멘트를 각각 네 개 생성해 줍니다.

푸터

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

푸터엔 운영체제 정보가 들어가야 하니 임시로 운영체제를 작성해 위치만 지정해 주도록 합니다.

GSAP , jQuery

이번엔 GSAP , jQuery를 사용해주어야 하기 때문에 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")
        }, drag:function(){
            $(".info").html("현재 <em style='color:red'>빨간색</em> 폴더를 드래그 하고 있습니다.");
            $("#header").addClass("red");
        }, stop : function(){
            setTimeout(os,3000);
            setTimeout(classRemove, 3000);
        }
    });

    $(".icon2").draggable({
            containment: ".icon___box", scroll:false,

        start:function(){
            $(".cursor img").attr("src", "img/game_mouse02.png")
        },drag:function(){
            $(".info").html("현재 <em style='color:blue'>파란색</em> 폴더를 드래그 하고 있습니다.");
            $("#header").addClass("blue");
        }, stop : function(){
            setTimeout(os,3000);
            setTimeout(classRemove, 3000);
        }
    });

    $(".icon3").draggable({
            containment: ".icon___box", scroll:false,

        start:function(){
            $(".cursor img").attr("src", "img/game_mouse03.png")
        },drag:function(){
            $(".info").html("현재 <em style='color:green'>초록색</em> 폴더를 드래그 하고 있습니다.");
            $("#header").addClass("green");
        }, stop : function(){
            setTimeout(os,3000);
            setTimeout(classRemove, 3000);
        }
    });

    $(".icon4").draggable({
            containment: ".icon___box", scroll:false,

        start:function(){
            $(".cursor img").attr("src", "img/game_mouse04.png")
        },drag:function(){
            $(".info").html("현재 <em style='color:yellow'>노란색</em> 폴더를 드래그 하고 있습니다.");
            $("#header").addClass("yellow");
        }, stop : function(){
            setTimeout(os,3000);
            setTimeout(classRemove, 3000);
        }
    });

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

같은 파일 네 개가 존재하니 이번 작업은 반복작업입니다.

con1을 예시로 보여드리도록 하겠습니다.

위 코드는 jQuery 라이브러리를 이용해 만들어진 드래그 가능한 아이콘을 구현하는 코드입니다.

선택한 요소를 드래그할 때 containment 속성을 사용해 드래그 가능한 영역을 제한하고 , scroll 속성을 false로

지정해 스크롤바가 생성되지 않도록 작업해 줍니다.

특정 아이콘을 드래그 하면 cursor img 요소의 속성을 변경해 마우스 커서 색상을 바꿔주도록 합니다.

드래그 중일 땐 .info 요소의 내용을 변경해 현재 드래그 중인 요소의 정보를 표시하고 , #header 요소에 red 클래스를 추가합니다.

드래그가 끝난 후 setTimeout 함수를 사용해 다시 os 운영체제가 하단에 뜨게 실행되도록 지연시키고 , classRemove 함수를 3초 후에 실행해 #header 요소에서 red 클래스를 제거합니다.

이렇게 네 가지의 아이콘을 동일하게 작업해 주면 끝이납니다.

마지막으로 마우스의 움직임에 따라 .cursor의 요소를 움직이는 코드를 짜줍니다.

윈도우 객체의 addEventListener 메서드를 새용해 mousemove 이벤트를 감지하고 콜백함수를 등록합니다.

콜백함수는 이벤트 객체 e를 매개변수로 받아 gsap 라이브러리의 to 메서드를 사용해 .cursor 요소를 움직입니다.

to 메서드는 다음과 같은 인자를 받습니다.

duration : 애니메이션의 지속 시간을 설정합니다. 여기선 0초로 설정해 즉시 완료되도록 합니다.

left : .cursor 요소의 left 속성값을 e.pageX-5 로 설정해 마우스 위치에서 왼쪽으로 5픽셀만큼 이동합니다.

top : cursor 요소의 top 속성값을 e.pageY -10으로 설정해 마우스 위치에서 위쪽으로 10픽셀만큼 이동합니다.

이렇게 하면 마우스가 움직일 때마다 .cursor 요소가 마우스 위치를 따라다니게 됩니다.

우측 상단 시간 설정

let clock = document.querySelector(".time");

setInterval(function () {
clock.innerHTML = new Date().toLocaleString();
}, 1000);

현재 시간이 나오게 하도록 작업해 주도록 하겠습니다.

변수를 설정한 뒤 document를 사용해 화면에 출력을 해주도록 합니다.

setInterval로 함수를 만든 뒤 innerHTML로 새로운 데이터와 toLocaleString를 사용해 작업해 줍니다.

1초마다 초단위가 움직이도록 작업해 주기 위해 1000이라고 설정해 주면 우측 상단의 시간이 1초마다 변화하게 됩니다.

🐣 여기서 잠깐 ! toLocaleString란 ?
숫자를 현지화된 문자열로 변환합니다. 이 메서드를 사용하면 언어, 통화 등의 지역화 정보를 기반으로 숫자를 문자열로 변환할 수 있습니다.

toLocaleString() 메서드는 다음과 같은 인자를 받을 수 있습니다.

locales : 문자열로 변환할 때 사용할 로케일(언어 및 지역 설정)을 나타내는 문자열 또는 문자열 배열입니다. 생략하면 기본 로케일이

사용됩니다.

options : 로케일별 옵션을 설정하는 객체입니다. 숫자를 표시할 때 천 단위 구분 기호, 소수점 표시 등을 설정할 수 있습니다. 🐣

운영체제 정보

//운영체제 정보 알아내기
const os = () => {
let os = navigator.userAgent.toLowerCase();
let sw = screen.width;
let sh = screen.height;
let info = document.querySelector(".info");

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

마지막으로 운영체제 정보입니다.

navigator.userAgent 속성을 사용해 유저의 에이전트 정보를 가져옵니다.

이 정보는 브라우저가 사용하는 운영체제, 브라우저 종류, 버전 등의 정보를 담고있습니다.

screen.width와 screen.height 속성을 사용해 현재 디스플레이의 가로 , 세로 길이를 가져옵니다.

가져온 userAgent 정보를 토대로 사용자가 사용하는 운영체제와 기기를 판별하고 , 이 정보를 info 변수에 할당합니다.

info 변수를 이용해 HTML 요소 중 클래스가 info인 요소를 찾아 그 내부 HTML을 업데이트 합니다.

이 때 현재 사용자의 운영 체제와 기기 정보, 화면 크기 정보를 포함한 문자열을 innerHTML을 이용해 화면에 문자열로 출력합니다.

https://github.com/leeyouna21/web2023/tree/master/javascript/game

GitHub - leeyouna21/web2023: 수업시간에 배운 사이트입니다.

수업시간에 배운 사이트입니다. Contribute to leeyouna21/web2023 development by creating an account on GitHub.

github.com

🥰 오늘도 감사합니다 ! 자주 들러주세요 .

'javascript' 카테고리의 다른 글

gameEffect01 뮤직 플레이어 만들기 (15)	2023.04.27
자바스크립트 문자열 객체 정리 (9)	2023.04.23
패럴렉스 효과 1 (포트폴리오 참고용) (17)	2023.04.18
명언 자동 반복 사이트 만들기 2 (17)	2023.04.17
슬라이드이펙트 일곱 번째 (11)	2023.04.16

xoouxa