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

728x90

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

수업 시간에 배운 내용을 복습하면서 해보겠습니다.

코드 보기(HTML, JAVASCRIPT / CSS1 / CSS2) / 완성화면

코드 블럭

<!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 class="header__title">WEBS 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> 
        <div class="music__box hide">
            <p>현재 뮤직듣기를 클릭했습니다.</p>
        </div>
    </main>

    <footer id="footer">
        <div class="info"></div>
    </footer>
</body>
</html>

구성

header 태그를 사용해서 제목과 목록을 태그를 사용해 각각 만들어줍니다.
main 태그를 사용해서 구역 안에 div 태그를 사용해서 각각 알맞는 구성의 이미지와 태그를 입력해줍니다.
footer 태그를 사용해서 현재 정보를 입력해줄 태그를 사용해줍니다.

CSS

CSS1 참고(https://github.com/dongjin6539/web2023/blob/main/javascript/game/css/reset.css)
CSS1에서는 코드를 작성하면 기본적인 태그들을 리셋시키는 스타일을 작성했습니다.
CSS2 참고 (https://github.com/dongjin6539/web2023/blob/main/javascript/game/css/game.css)
CSS2에서는 이번 코드에서 각각의 태그 및 class 및 id를 가져와서 각각의 알맞는 스타일을 작성했습니다.

JAVASCRIPT

<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")
            $('#header').animate({backgroundColor: "red"})             
        },
        drag: function(){
            $(".info").html("드래그 중입니다.") 
        },
        stop: function(){
            $(".info").html("드래그가 끝났습니다.");
            $('#header').animate({backgroundColor: "#f08e33"});
            setInterval(() => {
                if(screenInfo.indexOf('Windows')>=0){
                    info.innerHTML = `현재 윈도우를 사용하고 있으며, 화면 크기는 ${screenWidth} X ${screegHeight} 입니다.`
                } else if(screenInfo.indexOf('Macintosh')>=0){
                    info.innerHTML = `현재 맥을 사용하고 있으며, 화면 크기는 ${screenWidth} X ${screegHeight} 입니다.`
                } else if(screenInfo.indexOf('Android')>=0){
                    info.innerHTML = `현재 안드로이드 폰을 사용하고 있으며, 화면 크기는 ${screenWidth} X ${screegHeight} 입니다.`
                } else if(screenInfo.indexOf('iPhone')>=0){
                    info.innerHTML = `현재 아이폰을 사용하고 있으며, 화면 크기는 ${screenWidth} X ${screegHeight} 입니다.`
                }
            }, 5000)
        }
    });
    $(".icon2").draggable({
        containment: ".icon__box", scroll: false,

        start: function(){
            $(".cursor img").attr("src", "img/game_mouse02.png")
            $('#header').animate({backgroundColor: "blue"})
        },
        drag: function(){
            $(".info").html("드래그 중입니다.") 
        },
        stop: function(){
            $(".info").html("드래그가 끝났습니다.");
            $('#header').animate({backgroundColor: "#f08e33"});
            setInterval(() => {
                if(screenInfo.indexOf('Windows')>=0){
                    info.innerHTML = `현재 윈도우를 사용하고 있으며, 화면 크기는 ${screenWidth} X ${screegHeight} 입니다.`
                } else if(screenInfo.indexOf('Macintosh')>=0){
                    info.innerHTML = `현재 맥을 사용하고 있으며, 화면 크기는 ${screenWidth} X ${screegHeight} 입니다.`
                } else if(screenInfo.indexOf('Android')>=0){
                    info.innerHTML = `현재 안드로이드 폰을 사용하고 있으며, 화면 크기는 ${screenWidth} X ${screegHeight} 입니다.`
                } else if(screenInfo.indexOf('iPhone')>=0){
                    info.innerHTML = `현재 아이폰을 사용하고 있으며, 화면 크기는 ${screenWidth} X ${screegHeight} 입니다.`
                }
            }, 5000)
        }
    });
    $(".icon3").draggable({
        containment: ".icon__box", scroll: false,

        start: function(){
            $(".cursor img").attr("src", "img/game_mouse03.png")
            $('#header').animate({backgroundColor: "green"})
        },
        drag: function(){
            $(".info").html("드래그 중입니다.") 
        },
        stop: function(){
            $(".info").html("드래그가 끝났습니다.");
            $('#header').animate({backgroundColor: "#f08e33"});
            setInterval(() => {
                if(screenInfo.indexOf('Windows')>=0){
                    info.innerHTML = `현재 윈도우를 사용하고 있으며, 화면 크기는 ${screenWidth} X ${screegHeight} 입니다.`
                } else if(screenInfo.indexOf('Macintosh')>=0){
                    info.innerHTML = `현재 맥을 사용하고 있으며, 화면 크기는 ${screenWidth} X ${screegHeight} 입니다.`
                } else if(screenInfo.indexOf('Android')>=0){
                    info.innerHTML = `현재 안드로이드 폰을 사용하고 있으며, 화면 크기는 ${screenWidth} X ${screegHeight} 입니다.`
                } else if(screenInfo.indexOf('iPhone')>=0){
                    info.innerHTML = `현재 아이폰을 사용하고 있으며, 화면 크기는 ${screenWidth} X ${screegHeight} 입니다.`
                }
            }, 5000)
        }
    });
    $(".icon4").draggable({
        containment: ".icon__box", scroll: false,

        start: function(){
            $(".cursor img").attr("src", "img/game_mouse04.png")
            $('#header').animate({backgroundColor: "#aeae00"})
        },
        drag: function(){
            $(".info").html("드래그 중입니다.") 
        },
        stop: function(){
            $(".info").html("드래그가 끝났습니다.");
            $('#header').animate({backgroundColor: "#f08e33"});
            setInterval(() => {
                if(screenInfo.indexOf('Windows')>=0){
                    info.innerHTML = `현재 윈도우를 사용하고 있으며, 화면 크기는 ${screenWidth} X ${screegHeight} 입니다.`
                } else if(screenInfo.indexOf('Macintosh')>=0){
                    info.innerHTML = `현재 맥을 사용하고 있으며, 화면 크기는 ${screenWidth} X ${screegHeight} 입니다.`
                } else if(screenInfo.indexOf('Android')>=0){
                    info.innerHTML = `현재 안드로이드 폰을 사용하고 있으며, 화면 크기는 ${screenWidth} X ${screegHeight} 입니다.`
                } else if(screenInfo.indexOf('iPhone')>=0){
                    info.innerHTML = `현재 아이폰을 사용하고 있으며, 화면 크기는 ${screenWidth} X ${screegHeight} 입니다.`
                }
            }, 5000)
        }
    });

    $(".icon1").on("click", function(){
        $('#header').animate({backgroundColor: "red"});
        $('.music__box').removeClass("hide");
        $(".cursor img").attr("src", "img/game_mouse01.png");
    });
    $(".icon2").on("click", function(){
        $('#header').animate({backgroundColor: "blue"});
        $('.music__box').addClass("hide");
        $(".cursor img").attr("src", "img/game_mouse02.png");
    });
    $(".icon3").on("click", function(){
        $('#header').animate({backgroundColor: "green"});
        $('.music__box').addClass("hide");
        $(".cursor img").attr("src", "img/game_mouse03.png");
    });
    $(".icon4").on("click", function(){
        $('#header').animate({backgroundColor: "#aeae00"});
        $('.music__box').addClass("hide");
        $(".cursor img").attr("src", "img/game_mouse04.png");
    }); 
    $("#header").on("click", function(){
        $('#header').animate({backgroundColor: "#f08e33"});
        $('.music__box').addClass("hide");
    });

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

        printTime();    // 오른쪽 상단 시간
        printAgent();  // 하단 중앙 모니터 정보
    }

    // 시간 표현
    const time = document.querySelector(".time");

    setInterval(function () {
        time.innerHTML = new Date().toLocaleTimeString();
    }, 1000);

    // 운영체제 정보
    const info = document.querySelector(".info");
    const screenInfo = navigator.appVersion.toString();
    const screenWidth = window.screen.width;
    const screegHeight = window.screen.height;

    if(screenInfo.indexOf('Windows')>=0){
        info.innerHTML = `현재 윈도우를 사용하고 있으며, 화면 크기는 ${screenWidth} X ${screegHeight} 입니다.`
    } else if(screenInfo.indexOf('Macintosh')>=0){
        info.innerHTML = `현재 맥을 사용하고 있으며, 화면 크기는 ${screenWidth} X ${screegHeight} 입니다.`
    } else if(screenInfo.indexOf('Android')>=0){
        info.innerHTML = `현재 안드로이드 폰을 사용하고 있으며, 화면 크기는 ${screenWidth} X ${screegHeight} 입니다.`
    } else if(screenInfo.indexOf('iPhone')>=0){
        info.innerHTML = `현재 아이폰을 사용하고 있으며, 화면 크기는 ${screenWidth} X ${screegHeight} 입니다.`
    }
</script>

자바스크립트 구성

시간 표현

먼저 시간 표현을 해줍니다. 시간을 입력할 class명을 선택자로 만들어서 setInterval( )을 사용해서 선택자.innerHTML = new Date( ).toLocaleTimeString( );을 입력해주고 1000밀리초를 입력해주면 1초마다 선택자.innerHTML = new Date( ).toLocaleTimeString( );가 실행됩니다.
new Date( )는 자바스크립트에서 제공하는 내장 객체 중 하나로, 현재 시간을 나타내는 Date 객체를 생성합니다. 이를 통해 시간 관련 연산을 수행하거나 시간을 표시하는 등 다양한 기능을 수행할 수 있습니다.
toLocaleTimeString( )는 자바스크립트에서 제공하는 함수 중 하나로, 날짜와 시간을 표시하는 문자열을 반환합니다. 이 함수는 언어, 국가 등에 맞춰서 시간을 표시하는 문자열을 반환합니다. 이 함수는 매개변수로 로케일 설정 객체를 받아들일 수 있으며, 이 객체를 사용하여 반환하는 문자열의 형식을 지정할 수 있습니다

운영체제 정보

각각 선택자를 정리해서 입력해줍니다. 먼저 운영체제 정보를 입력할 부분에 class명을 선택자로 만들어줍니다.
다음 사용자가 사용하고 있는 버전의 정보를 문자열로 가져오는 문자열을 선택자로 만들어줍니다.
다음 윈도우 스크린의 너비를 선택자로 만들어주고, 윈도우 스크린의 높이를 선택자로 만들어줍니다.
if문을 사용해서 만약에 사용자의 운영체제 정보의 문자열에 해당하는 글씨가 있는지 확인하기 위해 indexOf( )를 사용해줍니다. 사용해서 indexOf( )의 값이 0이상이 나오면 운영체제 정보를 입력할 부분에 innerHTML을 사용해서 텍스트를 입력해줍니다.

드래그 했을 때의 효과

jQuery를 사용해서 입력했습니다.
jQuery로 선택자를 가져오는 방법은 $( )를 사용해주시면 됩니다.
jQuery의 속성을 확인하기 위해 페이지에 접속을 해봤습니다.(https://jqueryui.com/)
먼저 드래그 했을 때의 효과는 .draggable( )를 사용했습니다. 다음 드래글 시작했을 때 커서의 이미지를 변경 시키기 위해 먼저 드래그 효과의 종류인 start를 사용하고 함수를 사용해줍니다. 다음 javascript에서 setAttribute를 사용하는 대신에 jQuery에서는 attr을 사용해서 이미지를 변경 시키기 위해 먼저 src를 가져오고 다음 이미지의 경로를 입력해줍니다. 그리고 header구역의 배경색상을 변경시키기 위해 animate를 사용하고 backgroundColor를 입력하고 색상을 입력해줍니다.
다음 드래그 중에 효과를 주기 위해 드래그 효과의 종류인 drag를 사용하고 함수를 사용해서 javascript에서 .innerHTML을 사용하는 대신에 jQuery에서는 .html을 사용해서 텍스트를 입력해줍니다.
다음 드래그를 멈췄을 때 효과를 주기 위해 드래그 효과의 종류인 stop를 사용하고 함수를 사용해줍니다. .html을 사용해서 입력했던 텍스트를 변경해주고 header구역의 색상을 원래대로 돌아오게 해줍니다. 일정 시간이 지나면 처음에 나오던 운영체제 정보를 다시 나오게 해줍니다. 그러기위해서는 setInterval( )를 사용해서 운영체제 정보에서 입력했던 것을 안에 그대로 입력해주고 시간을 5000밀리초를 입력해 5초 뒤에 다시 나오게 해줍니다.
이와 같은 것을 다른 이미지에도 똑같이 반복입력을 해줍니다.

이미지를 클릭했을 때의 효과

각각의 뮤직 아이콘을 클릭했을 때의 효과를 주기 위해 javascript에서 addEventListener를 사용하는 대신에 jQuery에서는 on을 사용해서 속성을 입력해줍니다. 다음 "click" 이벤트를 입력 후 함수를 사용해줍니다.
각각의 뮤직 아이콘을 클릭했을 때 header 구역의 배경 색상을 변경시키기 위해 animate를 사용하고 backgroundColor를 입력하고 색상을 입력해줍니다.
처음 뮤직 아이콘을 클릭했을 때 만들어둔 ".music__box"를 처음에 hide 속성을 해준 것을 hide 속성을 제거하기 위해 removeClass를 입력해서 hide 속성을 제거해서 나오게 해줍니다.
다음 커서 이미지를 변경하기 위해 javascript에서 setAttribute를 사용하는 대신에 jQuery에서는 attr을 사용해서 이미지를 변경 시키기 위해 먼저 src를 가져오고 다음 이미지의 경로를 입력해줍니다.
다른 뮤직 아이콘을 클릭했을 때 처음 뮤직 아이콘을 클릭 후 나온 ".music__box"를 다시 hide 속성을 입력해주기 위해 addClass를 사용해서 hide 속성을 입히게 해줍니다.

728x90

코딩 공부하기

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

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

코드 블럭

구성

CSS

JAVASCRIPT

자바스크립트 구성

티스토리툴바

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

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

코드 블럭

구성

CSS

JAVASCRIPT

자바스크립트 구성

관련글

티스토리툴바