게임 이펙트01_드레그 액션,음악재생

html

<div class="cursor">
    <img src="img/game_mouse01.png" alt>
</div>
<header id="header">
    <h1>ARARA GAME WORLD</h1>
    <div class="time">2023년 04월 24이 09시 30분</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">roading...</div>
</footer>

• <div class="cursor">: 마우스 커서를 나타내는 요소입니다. img 태그를 포함하고 있어 이미지를 표시하고 있습니다.
• <header id="header">: 웹 페이지의 헤더를 나타내는 요소입니다. h1 태그를 포함하고 있어 제목을 표시하고 있습니다. 또한 현재 시간을 나타내는 div 요소도 포함하고 있습니다.
• <main>: 웹 페이지의 주요 콘텐츠를 나타내는 요소입니다. icon_box 클래스를 가진 div 요소를 포함하고 있습니다.
• <div class="icon_box">: 아이콘 박스를 나타내는 요소입니다. icon1~icon4 클래스를 가진 div 요소를 포함하고 있으며, 각각의 아이콘과 텍스트를 표시하고 있습니다.
• <footer id="footer">: 웹 페이지의 푸터를 나타내는 요소입니다. div 요소를 포함하고 있으며, 현재 로딩 중임을 나타내는 텍스트를 표시하고 있습니다.

 

css

printAgent()

운영체제와 화면 해상도를 저장하여 화면에 불러내는 스크립트입니다.

 

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


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

• navigator.userAgent.toLowerCase()를 사용하여 현재 사용자의 운영체제 정보를 소문자로 가져옵니다.
• screen.width와 screen.height를 사용하여 현재 사용자의 화면 크기를 가져옵니다.
• document.querySelector(".info")를 사용하여 HTML에서 클래스가 info인 요소를 가져옵니다.
• 조건문(if, else if)을 사용하여 현재 사용자의 운영체제 정보를 판별하고, 해당 운영체제 정보에 맞는 문자열을 innerHTML을 사용하여 출력합니다.

 

아이콘 드레그 액션으로  마우스 색과 헤더 색 변경하기

  // $( "#draggable3" ).draggable({ containment: ".icon_box", scroll: false });
        $(".icon1").draggable({
            containment: ".icon_box", scroll: false,
            start: function() {
                $(".cursor img").attr("src", "img/game_mouse01.png");
                $("#header").css("background-color", "#ff3e3e63");
            },
        });
        $(".icon2").draggable({
            containment: ".icon_box", scroll: false,
            start: function() {
                $(".cursor img").attr("src", "img/game_mouse02.png")
                $("#header").css("background-color", "#415dff63");
            },
        });
        $(".icon3").draggable({
            containment: ".icon_box", scroll: false,
            start: function() {
                $(".cursor img").attr("src", "img/game_mouse03.png")
                $("#header").css("background-color", "#41ff4b63");
            },
        });
        $(".icon4").draggable({
            containment: ".icon_box", scroll: false,
            start: function() {
                $(".cursor img").attr("src", "img/game_mouse04.png")
                $("#header").css("background-color", "#ffeb3b63");
            },
        });

draggable() 메서드를 사용하여 #draggable3 요소를 선택하고, containment 속성을 .icon_box로 설정하여 드래그 영역을 .icon_box로 제한하고, scroll 속성을 false로 설정하여 스크롤바를 허용하지 않습니다.

그 다음, $(".icon1"), $(".icon2"), $(".icon3"), $(".icon4") 요소들에 대해서도 draggable() 메서드를 사용하여 드래그 가능한 아이콘을 만듭니다. 이들 요소들도 containment 속성을 .icon_box로 설정하여 드래그 영역을 .icon_box로 제한하고, scroll 속성을 false로 설정하여 스크롤바를 허용하지 않습니다.

각각의 드래그 시작 시에는 해당 아이콘의 클래스 이름을 사용하여 .cursor img 요소의 이미지 소스를 변경하고, #header 요소의 배경색을 변경합니다. 

 

 

실시간 시간 받기

function printTime(){
    let now = new Date();
    document.querySelector(".time").innerHTML 
        = now.getFullYear()+"년 " +
        (now.getMonth()+1)+"월 " +
        now.getDate()+"일 " +
        now.getHours()+"시 " +
        now.getMinutes()+"분" +
        now.getSeconds()+"초";
}


// 페이지 로딩 후
window.onload = function(){
    window.addEventListener("mousemove", e =>{
        gsap.to (".cursor", {
            duration: 0,
            left: e.pageX -7,
            top: e.pageY -10
        })
    })

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

}

이 코드는 현재 시간을 출력하는 함수 printTime()을 정의하는 JavaScript 코드입니다.

Date 객체의 now 변수를 만듭니다. Date 객체는 현재 날짜와 시간을 나타내는 내장 객체입니다.

document.querySelector(".time")은 HTML 문서에서 class 속성이 "time"인 요소를 선택합니다. 선택된 요소에 현재 시간을 삽입하기 위해 innerHTML 속성에 할당합니다.

now 객체의 메소드를 사용하여 현재 년, 월, 일, 시, 분, 초를 가져와서 문자열로 결합합니다. getYear() 대신 getFullYear()를 사용하여 4자리 연도를 가져오는 것에 주의해야 합니다.

마지막으로, 현재 시간을 포함한 문자열을 선택된 요소의 innerHTML에 할당하여 현재 시간을 출력합니다.

 

스크립트 마무리와 음악 재생액션

// 페이지 로딩 후
window.onload = function(){
    window.addEventListener("mousemove", e =>{
        gsap.to (".cursor", {
            duration: 0,
            left: e.pageX -7,
            top: e.pageY -10
        })
    })

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

}

document.querySelector(".icon1").addEventListener("click", ()=>{
    let audio = new Audio('./audio/1.wav');
    audio.play();
});
document.querySelector(".icon2").addEventListener("click", ()=>{
    let audio = new Audio('./audio/2.wav');
    audio.play();
});
document.querySelector(".icon3").addEventListener("click", ()=>{
    let audio = new Audio('./audio/3.wav');
    audio.play();
});
document.querySelector(".icon4").addEventListener("click", ()=>{
    let audio = new Audio('./audio/4.mp3');
    audio.play();
});

window.onload 이벤트 핸들러 함수는 페이지가 로드된 후에 실행됩니다. 이 핸들러 함수는 마우스 이벤트를 감지하여 커서의 위치에 따라 .cursor 클래스를 가진 요소를 이동시킵니다. 이 때, gsap 라이브러리의 to 메서드를 사용하여 애니메이션을 적용합니다.

printTime() 함수를 호출하여 현재 시간을 출력합니다. 이 함수는 위에서 설명한대로 Date 객체를 사용하여 현재 시간을 문자열로 변환하고, .time 클래스를 가진 요소에 해당 문자열을 삽입합니다.

printAgent() 함수를 호출하여 에이전트 정보를 출력합니다. 이 함수는 페이지에서 사용되지 않았으므로, 코드에서는 해당 함수의 내용이 생략되어 있습니다.

마우스 클릭 이벤트에 대한 각각의 이벤트 핸들러 함수를 등록합니다. 이 함수들은 해당 아이콘을 클릭했을 때, 각각 다른 오디오 파일을 재생합니다. 이 때, Audio 객체를 생성하고 play() 메서드를 사용하여 오디오를 재생합니다.