게임 이펙트 01

게임 이펙트 01

💜 게임 이펙트

코드 보기 / 완성 화면

 

 

 

HTML

<div class="cursor">
    <img src="img/game_mouse01.png" alt>
</div>
<header id="header">
    <h1>JIN 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="info">현재 맥을 사용하고 있으면, 화면 크기는 1920 X 760입니다.</div>
</footer>

헤더에 사이트 제목과 시간을 설정해줄거고,

메인에 아이콘을 설정해줄 구간을 정해줍니다.

푸터엔 OS크기를 구현해줄 위치를 잡아줍니다.

 

 

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>

jQuery, jQuery UI, 그리고 GSAP 라이브러리를 사용해 컨테이너 내에 있는 아이콘을 드래그 가능하게 만드는 코드를 가져옵니다. 

 

jQuery 는 javascript를 기반으로 한 오픈 소스의 빠르고 가볍고 기능적으로 강력한  javascript 라이브러리 입니다.

웹 개발에서 HTML문서의 조작, 이벤트 처리, 애니메이션 조작등을 간편하게 처리할 수 있습니다.

 

GSAP는 다양한 애니메이션 기능을 제공해 DOM요소의 이동, 회전, 크기 조절 등의 애니메이션 효과를 구현할 수 있습니다.

또한 시간 기반 애니메이션 이징 및 트윈 기능 등을 제공해 웹 애니메이션을 더욱 효과적으로 제어할 수 있습니다.

 

 

드래그

$(".icon1").draggable({
    containment: ".icon__box", scroll: false,

    start: function () {
        $(".cursor img").attr("src", "img/game_mouse01.png");
        $("#header").css("background-color", "#ff33007e");
    },
    drag: function () {
        $(".info").html("지금은 빨간색 폴더를 드래그중입니다.")
    },
    stop: function () {
        $(".info").html("드래그가 멈췄습니다."); 
    }
});
$(".icon2").draggable({
    containment: ".icon__box", scroll: false,

    start: function () {
        $(".cursor img").attr("src", "img/game_mouse02.png");
        $("#header").css("background-color", "#5100ff7e");
    },
    drag: function () {
        $(".info").html("지금은 파란색 폴더를 드래그중입니다.")
    },
    stop: function () {
        $(".info").html("드래그가 멈췄습니다.");
    }
});
$(".icon3").draggable({
    containment: ".icon__box", scroll: false,

    start: function () {
        $(".cursor img").attr("src", "img/game_mouse03.png");
        $("#header").css("background-color", "#04ff007e");
    },
    drag: function () {
        $(".info").html("지금은 녹색 폴더를 드래그중입니다.")
    },
    stop: function () {
        $(".info").html("드래그가 멈췄습니다.");
    }
});
$(".icon4").draggable({
    containment: ".icon__box", scroll: false,

    start: function () {
        $(".cursor img").attr("src", "img/game_mouse04.png");
        $("#header").css("background-color", "#eeff007e");
    },
    drag: function () {
        $(".info").html("지금은 노란색 폴더를 드래그중입니다.")
    },
    stop: function () {
        $(".info").html("드래그가 멈췄습니다.");
    }
});

icon을 드래그가 시작됐을때 이미지가 변경되고

헤더의 배경 컬러가 바뀌게 작업해줬습니다.

 

드래그 중일 때 드래그중입니다 라는 메세지가 뜨게 했고,

드래그가 멈췄을때 드래그가 멈췄다는 메세지가 뜨게 했습니다.

 

attr : let srcValue = $("#myImage").attr("src");

 

마우스커서

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

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

페이지의 로딩이 완료되면 실행됩니다.

window.onload 이벤트에 의해 페이지가 로드될 때 실행되는 함수입니다.

 

마우스가 움직일때 cursor가 부드럽게 움직일 수 있도록 설정해줬습니다.

 

오른쪽 상단에 현재 시간을 출력하는 함수와 하단 중앙에 무언가 출력하는 기능을 가진 함수를 넣어줬습니다.

 

 

시간

function updateTime() {
    const now = new Date();
    const year = now.getFullYear();
    const month = now.getMonth() + 1;
    const day = now.getDate();
    const hour = now.getHours();
    const minute = now.getMinutes();
    const second = now.getSeconds();

    const timeElem = document.querySelector(".time");
    timeElem.textContent = `${year}년 ${month}월 ${day}일 ${hour}시 ${minute}분 ${second}초`;
};
setInterval(updateTime, 1000);

new Date() : 현재 날짜와 시간

getFullYear() : 년도

getMonth() : 월

getDate() : 일

getHours() : 시간

getMinutes() :  분

getSeconds() : 초

메서드를 통해 각 요소들을 가져올 수 있습니다.

 

setInterval(updateTime, 1000)은 updateTime()함수를 1초 마다 호출해 현재 시간을 갱신하는 기능을 넣어줬습니다.

 

운영체제

//운영 체제 정보 가져오기
let osName = window.navigator.platform.toLowerCase();

//현재 화면 크기 가져오기
let screenWidth = window.innerWidth || documentElement.body.clientWidth;
let screenHeight = window.innerHeight || documentElement.body.clientHeight;

//운영체제에 따라 메세지 출력
function os() {
    if (osName.includes('mac')) {
        document.getElementById('osName').innerText = 'masOS (맥)';
    } else if (osName.includes('win')) {
        document.getElementById('osName').innerText = 'Windows';
    } else if (osName.includes('iphone')) {
        document.getElementById('osName').innerText = 'iPhone';
    } else if (osName.includes('galaxy')) {
        document.getElementById('osName').innerText = 'Galaxy';
    } else {
        document.getElementById('osName').innerText = '다른 운영체제';
    }
}
document.getElementById('screenSize').innerText = screenWidth + 'X' + screenHeight;

window.navigator.platform : 브라우저가 동작하는 운영체제 정보를 제공

toLowerCase() 메서드를 호출해 운영 체제 정보를 소문자로 변환

osName 변수에 저장

 

window.innerWidth, Height : 현재 창의 내부 너비와 높이를 가져오는 속성

documentElement.body.clientWidth

documentElement.body.clientHeight : 뷰포트의 너비와 높이를 가져오는 속성

0인 값도 가져올 수 있다.

 

getElementById() 를 사용해 해당 메세지를 웹 페이지의 특정 요소에 출력