자바스크립트 게임 이펙트 01

- Frederick Philips Brooks
Mythical Man-Month 저자

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/reset.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/bg.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css">
    <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>
</head>
<body>
    <div class="cursor">
        <img src="img/game_mouse01.png" alt>
    </div>
    <header id="header">
        <h1>hello Game World</h1>
        <div class="time">2023년 4월 24일 16시 50분</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>

css 코드입니다.

* {
    cursor: none;
}
body {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
.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: #000;    
    width: 100%;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
}
#header h1 {
    font-size: 14px;
    line-height: 1;
    padding-top: 4px;
    font-size: 20px;
}
.icon_box {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    padding: 50px 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: #410b0b;
    display: inline-block;
    padding: 5px 2px 3px;
    border-radius: 4px;
}

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

JS코드입니다.

const Header = document.querySelector("#header");
const Time1 = document.querySelector(".time");
const info = document.querySelector(".info");
const iconBox = document.querySelectorAll(".icon_box  div");
const icon1 = document.querySelector(".icon1");

iconBox[0].addEventListener('dragstart', () => {
    console.log('dragstart 이벤트 발생!');
});

iconBox[0].addEventListener('drag', () => {
    console.log('drag 이벤트 발생!');
});

iconBox[0].addEventListener('dragend', () => {
    console.log('dragend 이벤트 발생!');
});


$(".icon1").draggable({ 
    containment: ".icon_box", 
    scroll: false ,
    start: function() {
        $(".cursor img").attr("src", "img/game_mouse01.png")
        $(".info").html("뮤직듣기가 드래그가 실행 되었습니다.");
        $("#header").css("background-color", "#EC3A8B");
    },
    drag :function() {
        $(".info").html("뮤직듣기가 드래그가 실행 중입니다..");
    },
    stop : function() {
        $(".info").html("뮤직듣기가 드래그가 중지되었습니다..");
        $("#header").css("background-color", "#000");
        setTimeout(()=>{
            const width = window.screen.width;
            const height = window.screen.height;
            const os = navigator.userAgent.toLocaleLowerCase();
            if (os.includes('win')) {
                $(".info").html(`현재 window을 사용하고 있으면, 화면크기는 ${width} X ${height} 입니다.`);
            } else if (os.includes('mac')) {
                $(".info").html(`현재 mac을 사용하고 있으면, 화면크기는 ${width} X ${height} 입니다.`);
            } else if (os.includes('android')) {
                $(".info").html(`현재 android을 사용하고 있으면, 화면크기는 ${width} X ${height} 입니다.`);
            } else {
                $(".info").html(`현재 unknown을 사용하고 있으면, 화면크기는 ${width} X ${height} 입니다.`);
            }
        },10000);
    }
});
$(".icon2").draggable({ 
    containment: ".icon_box", 
    scroll: false,  
    start: function() {
        $(".cursor img").attr("src", "img/game_mouse02.png")
        $(".info").html("뮤직듣기가 드래그가 실행 되었습니다.");
        $("#header").css("background-color", "#3B5EC3")
    },
    drag :function() {
        $(".info").html("뮤직듣기가 드래그가 실행 중입니다..");
    },
    stop : function() {
        $(".info").html("뮤직듣기가 드래그가 중지되었습니다..");
        $("#header").css("background-color", "#000");
        setTimeout(()=>{
            const width = window.screen.width;
            const height = window.screen.height;
            const os = navigator.userAgent.toLocaleLowerCase();
            if (os.includes('win')) {
                $(".info").html(`현재 window을 사용하고 있으면, 화면크기는 ${width} X ${height} 입니다.`);
            } else if (os.includes('mac')) {
                $(".info").html(`현재 mac을 사용하고 있으면, 화면크기는 ${width} X ${height} 입니다.`);
            } else if (os.includes('android')) {
                $(".info").html(`현재 android을 사용하고 있으면, 화면크기는 ${width} X ${height} 입니다.`);
            } else {
                $(".info").html(`현재 unknown을 사용하고 있으면, 화면크기는 ${width} X ${height} 입니다.`);
            }
        },10000);
    }
});
$(".icon3").draggable({ 
    containment: ".icon_box", 
    scroll: false,  
    start: function() {
        $(".cursor img").attr("src", "img/game_mouse03.png")
        $(".info").html("뮤직듣기가 드래그가 실행 되었습니다.");
        $("#header").css("background-color", "#7FFF5B")
    },
    drag :function() {
        $(".info").html("뮤직듣기가 드래그가 실행 중입니다..");
    },
    stop : function() {
        $(".info").html("뮤직듣기가 드래그가 중지되었습니다..");
        $("#header").css("background-color", "#000");
        setTimeout(()=>{
            const width = window.screen.width;
            const height = window.screen.height;
            const os = navigator.userAgent.toLocaleLowerCase();
            if (os.includes('win')) {
                $(".info").html(`현재 window을 사용하고 있으면, 화면크기는 ${width} X ${height} 입니다.`);
            } else if (os.includes('mac')) {
                $(".info").html(`현재 mac을 사용하고 있으면, 화면크기는 ${width} X ${height} 입니다.`);
            } else if (os.includes('android')) {
                $(".info").html(`현재 android을 사용하고 있으면, 화면크기는 ${width} X ${height} 입니다.`);
            } else {
                $(".info").html(`현재 unknown을 사용하고 있으면, 화면크기는 ${width} X ${height} 입니다.`);
            }
        },10000);
    },
});
$(".icon4").draggable({ 
    containment: ".icon_box", 
    scroll: false, 
    start: function() {
        $(".cursor img").attr("src", "img/game_mouse02.png")
        $(".info").html("뮤직듣기가 드래그가 실행 되었습니다.");
        $("#header").css("background-color", "#FFFF50")
    },
    drag :function() {
        $(".info").html("뮤직듣기가 드래그가 실행 중입니다..");
    },
    stop : function() {
        $(".info").html("뮤직듣기가 드래그가 중지되었습니다..");
        $("#header").css("background-color", "#000");
        setTimeout(()=>{
            const width = window.screen.width;
            const height = window.screen.height;
            const os = navigator.userAgent.toLocaleLowerCase();
            if (os.includes('win')) {
                $(".info").html(`현재 window을 사용하고 있으면, 화면크기는 ${width} X ${height} 입니다.`);
            } else if (os.includes('mac')) {
                $(".info").html(`현재 mac을 사용하고 있으면, 화면크기는 ${width} X ${height} 입니다.`);
            } else if (os.includes('android')) {
                $(".info").html(`현재 android을 사용하고 있으면, 화면크기는 ${width} X ${height} 입니다.`);
            } else {
                $(".info").html(`현재 unknown을 사용하고 있으면, 화면크기는 ${width} X ${height} 입니다.`);
            }
        },10000);
    },
});

window.onload = function(){
    window.addEventListener("mousemove", e=>{
    gsap.to(".cursor", {
        duration: 0, 
        left : e.pageX -5,
        top: e.pageY -5
        })
    });
    setInterval(printTime,1000)
    printAgent(); // 하단 중앙
}

function printTime(){
    let now = new Date();
    let year = now.getFullYear().toString();
    let month = (now.getMonth() + 1).toString().padStart(2, '0');
    let date = now.getDate().toString().padStart(2, '0'); 
    let hours = now.getHours().toString().padStart(2, '0');
    let minutes = now.getMinutes().toString().padStart(2, '0');
    let seconds = now.getSeconds().toString().padStart(2, '0');
    Time1.innerHTML = `${year}년 ${month}월 ${date}일 ${hours}시 ${minutes}분 ${seconds}초`;
}

function printAgent() {
    const width = window.screen.width;
    const height = window.screen.height;
    const os = navigator.userAgent.toLocaleLowerCase();
    if (os.includes('win')) {
        $(".info").html(`현재 window을 사용하고 있으면, 화면크기는 ${width} X ${height} 입니다.`);
    } else if (os.includes('mac')) {
        $(".info").html(`현재 mac을 사용하고 있으면, 화면크기는 ${width} X ${height} 입니다.`);
    } else if (os.includes('android')) {
        $(".info").html(`현재 android을 사용하고 있으면, 화면크기는 ${width} X ${height} 입니다.`);
    } else {
        $(".info").html(`현재 unknown을 사용하고 있으면, 화면크기는 ${width} X ${height} 입니다.`);
    }
}



iconBox.forEach((icon, index) => {
    icon.addEventListener("click", () => {
        const colors = ["#EC3A8B", "#3B5EC3", "#7FFF5B", "#FFFF50"];
        Header.style.backgroundColor = colors[index];
        if (index === 3) {
        Header.style.color = "#FFFF50";
        } else {
        Header.style.color = "";
        }
    });
});

자바스크립트 및 제이쿼리

먼저 선언자에 dom을 가져옵니다.
제이쿼리는 써서 icon1에 드래그를 했을때 containment을 써서 icon_box안에서만 작동되게 설정했습니다.
스크롤 기능은 false로 해놔서 동작안하게 했습니다.
이제 start 를 써서 콜백함수를 섰습니다. 그안에 cursor img에 attr를 써서 불러온다음 src의 값을 변경을 했습니다.
info안에 html을 넣었습니다. 그후 header를 불러와서 backgroundColor를 변경을 했습니다.
그다음 드래그 중일때 글자를 넣었습니다. stop을 써서 콜백함수 안에 글자를 출력했습니다.
#header 안에 backgroundColor를 넣어줬습니다. 그리고 드래그가 끝나면 setTimeOut을 써서 원복을 시켜줬습니다.
그리고 winodw.onload가 될떄 마우스가 움직일때 gsap를 써서 마우스 포인터를 주었습니다.
그안에 printTime 과 pirintAgent를 실행해 주었습니다.
printTime 안에 new Data함수를 가져와서 year,month,date,hours,minutes,seconds 를 받아서 innerHTML을 써서 적용했습니다.
printAgent 안에 안에 해당 컴퓨터에 해상도를 가져오는것을 입력했습니다.
window.screen.width 와 height 를 가져와서 include를 써서 값을 가져와서 적용을 시켰고
os를 불러오는 navigator.userAgent.toLocaleLowerCase() 썼습니다.
그리고 icon을 클릭했을떄 색깔을 변경해주는 코드를 작성했습니다.
각 아이콘을 클릭했을때 backgroundCOlor를 변경해주는 style을 줬습니다.

june blog

자바스크립트 게임 이펙트 01

- Frederick Philips Brooks

완성된 화면 입니다.

HTML 화면입니다.

css 코드입니다.

JS코드입니다.

자바스크립트 및 제이쿼리

'JAVASCRIPT'의 다른글

티스토리툴바

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

자바스크립트 게임 이펙트 01

- Frederick Philips Brooks

완성된 화면 입니다.

HTML 화면입니다.

css 코드입니다.

JS코드입니다.

자바스크립트 및 제이쿼리

'JAVASCRIPT'의 다른글

관련글

티스토리툴바