Bomb Kirby Running

JAVASCRIPT

게임 이펙트 01 - 드레그

^. ̫ .^ 2023. 4. 24. 22:13

728x90

 

 

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>👾CYBER GAME WORLD👾</h1>
        <div class="time">2023년 4월 24일 09시 30분 29초</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>
</body>
</html>

각 요소들이 들어갈 영역을 만들고 들어갈 텍스트와 이미지를 넣어주었습니다.

 

css

reset.css

@import url('https://webfontworld.github.io/uto123RF/Uto123RF.css');
/* reset */
* {
    margin: 0;
    padding: 0;
    color: #fff;
    font-family: "Uto123RF";
}
*, *::before, *::after {
    box-sizing: border-box;
  }
a {
    text-decoration: none;
    color: #222;
}
h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
}
li, ul, ol {
    list-style: none;
}
img {
    vertical-align: top;
    width: 100%;
}
em {
    font-style: normal;
    font-weight: 300;
}

 

game.css

body {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
* {
    cursor: none;
}
.cursor {
    width: 20px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1000;
    pointer-events: none;
    user-select: none;
    cursor: none;
}
#header {
    position: fixed;
    left: 0;
    top: 0;
    background-color: #6fb7e7a6;
    width: 100%;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
}
#header.red {
    background-color: rgba(220, 20, 60, 0.685);
}
#header.blue {
    background-color: rgba(100, 148, 237, 0.685);
}
#header.green {
    background-color: rgba(168, 247, 65, 0.76);
}
#header.yellow {
    background-color: rgba(247, 250, 54, 0.822);
}
#header h1 {
    font-size: 14px;
    line-height: 1;
    padding-top: 4px;
}

.icon__box {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100vh;
    padding: 60px 10px 10px 10px;                                                                                                                             
}
.icon__box > div {
    width: 50px;
    margin-bottom: 20px;
    text-align: center;
}
.icon__box > div img {
    margin-bottom: 10px;
}
.icon__box > div span {
    background-color: #6fb7e7a6;
    display: inline-block;
    padding: 9px 2px 7px;
    border-radius: 4px;
}  

/* footer */
.info {
    position: fixed;
    left: 50%;
    bottom: 10px;
    font-size: 14px;
    color: #fff;
    transform: translateX(-50%);
    text-align: center;
}

각 영역의 CSS이며 배경은 CSS파일로 다운 받아 넣어주었습니다.

마우스커서는 이미지로 대체해서 사용할 것이기 때문에 cursor:none을 사용해주었습니다.

그리고body부분은 width값과 height값을 설정하지 않으면 무한으로 옆이나 아래로 움직이는 버그가 있으므로 값을 설정해주었습니다.

 

script

jQuery & gsap

    <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를 사용할 것이기 때문에 먼저 연동시켜주었습니다.

 

마우스 커서 설정

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

마우스 커서를 움직일때 gsap를 통해 이미지의 위치값을 설정해주고 duration에 다른 값이 들어가면 마우스가 뒤 늦게 따라오므로 0으로 해주었습니다.

 

현재시간 구현하기

             function printTime() {
            const now = new Date();
            const year = now.getFullYear();
            const month = now.getMonth() + 1;
            const date = now.getDate();
            const hour = now.getHours();
            const minute = now.getMinutes();
            const second = now.getSeconds();
            const timeString = `${year}년 ${month}월 ${date}일 ${hour} : ${minute}: ${second}`;
            $(".time").text(timeString);
            setTimeout(printTime, 1000); // 1초마다 업데이트
            }
            $(document).ready(function() {
                printTime();

Date 객체를 사용하여 현재 날짜와 시간을 가져옵니다. 그런 다음 이 정보를 사용하여 년, 월, 일, 시, 분, 초 값을 추출하고  문자열로 조합하여 "timeString" 변수에 저장합니다.

setTimeout()함수를 이용하여 클래스가 "time"인 요소의 텍스트 내용으로 설정합니다. 1초마다 자기 자신을 호출하여 시간을 업데이트합니다.

, $(document).ready() 함수는 웹 페이지의 모든 요소가 로드되면 이 함수를 실행합니다.

printTime() 함수를 호출하여 시간을 출력하고, 그 다음부터는 1초마다 시간이 업데이트됩니다.

os 운영체제

        //운영체제
        const os = navigator.userAgent.toLowerCase();
        const screenWidth = window.innerWidth;
        const screenHeight = window.innerHeight;
        const Info = document.querySelector(".info");

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

navigator.userAgent 속성을 사용하여 사용자의 운영체제 정보를 가져옵니다. 

window.innerWidth와 window.innerHeight 속성을 사용하여 사용자의 브라우저 창의 너비와 높이를 가져옵니다.

선택자로 class info를 선택해줍니다. 

indexOf로 각각의 운영체제를 확인하고 innerHTML을 이용해 각각해당하는 os와 브라우저의 창과 너비를 출력합니다.

 

헤더 배경 체인지 & 현재 선택한 폴더

        $(".icon1").draggable({ 
            containment: ".icon__box", scroll: false,
            
            start: function() {
                $(".cursor img").attr("src", "img/game_mouse01.png");
                $("#header").attr("class", "red");
            },
            drag: function() {
                $(".info").html("현재 <span style='color:rgba(220, 20, 60, 0.76)'>빨간색</span> 폴더를 드래그하고 있습니다.");
                $("#header").addClass("red");
            },
            stop: function() {
                $(".info").html("드래그를 멈추었습니다.");
            }
        });
        $(".icon2").draggable({ 
            containment: ".icon__box", scroll: false,
            
            start: function() {
                $(".cursor img").attr("src", "img/game_mouse02.png");
                $("#header").attr("class", "blue");
            },drag: function() {
                $(".info").html("현재 <span style='color:rgba(100, 148, 237, 0.76)'>파랑색</span> 폴더를 드래그하고 있습니다.");
                $("#header").addClass("blue");
            },
            stop: function() {
                $(".info").html("드래그를 멈추었습니다.");
            }
        });
        $(".icon3").draggable({ 
            containment: ".icon__box", scroll: false,
            
            start: function() {
                $(".cursor img").attr("src", "img/game_mouse03.png");
                $("#header").attr("class", "green");

            },
            drag: function() {
                $(".info").html("현재 <span style='color:rgba(168, 247, 65, 0.76)'>초록색</span> 폴더를 드래그하고 있습니다.");
                $("#header").addClass("green");
            },
            stop: function() {
                $(".info").html("드래그를 멈추었습니다.");
            }
        });
        $(".icon4").draggable({ 
            containment: ".icon__box", scroll: false,
            
            start: function() {
                $(".cursor img").attr("src", "img/game_mouse04.png");
                $("#header").attr("class", "yellow");

            },
            drag: function() {
                $(".info").html("현재 <span style='color:rgba(247, 250, 54, 0.76)'>노란색</span> 폴더를 드래그하고 있습니다.");
                $("#header").addClass("yellow");
            },
            stop: function() {
                $(".info").html("드래그를 멈추었습니다.");
            }
        });

jQuery UI 라이브러리를 사용하여, 드래그 앤 드롭 기능을 구현했습니다

start, drag, stop 이벤트 리스너를 등록합니다.

드래그 시작 시에는 마우스 커서의 이미지와 헤더의 클래스를 바꿔 색이 바뀌도록 설정합니다.

해당 class의 css는 game.css에 있습니다.

드래그 중일 때는 드래그하는 폴더의 색상에 맞춰 헤더의 클래스를 추가합니다.

그리고 info를 선택하고 html을 통해 하단에 해당 폴더를 드레그 했다는 메세지를 나타내줍니다.

드래그를 멈췄을 때는 멈추었다는 메세지를 출력합니다.

'JAVASCRIPT'의 다른글

  • 현재글게임 이펙트 01 - 드레그

관련글

댓글

티스토리툴바