[javascript] 게임 이펙트 웹페이지 만들기 1

게임 이펙트 웹 페이지 만들기

 

완성화면

 

 

 

 

script

✈. 운영체제 정보 보여주기(하단)

        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 + " 입니다."
            }
        }

✈. 현재시간 보여주기(상단)

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

 

 

✈. 실행

      // 페이지 로딩 후
            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.mp3');
            audio.play();
        });
        document.querySelector(".icon2").addEventListener("click", ()=>{
            let audio = new Audio('audio/2.mp3');
            audio.play();
        });
        document.querySelector(".icon3").addEventListener("click", ()=>{
            let audio = new Audio('audio/3.mp3');
            audio.play();
        });
        document.querySelector(".icon4").addEventListener("click", ()=>{
            let audio = new Audio('audio/4.mp3');
            audio.play();
        });

 

✈. 아이콘 클릭하면 상단 메뉴 컬러와 아이콘 컬러 바꾸기

        $(".icon1").draggable({
            containment: ".icon_box", scroll: false,
            start: function() {
                $(".cursor img").attr("src", "img/game_mouse01.png");
                $("#header").css("background-color", "#ff5c5c");
            },
        });
        $(".icon2").draggable({
            containment: ".icon_box", scroll: false,
            start: function() {
                $(".cursor img").attr("src", "img/game_mouse02.png")
                $("#header").css("background-color", "#4d7bff");
            },
        });
        $(".icon3").draggable({
            containment: ".icon_box", scroll: false,
            start: function() {
                $(".cursor img").attr("src", "img/game_mouse03.png")
                $("#header").css("background-color", "#7fff5b");
                $("#header").css("background", "opacity: 0.7");
            },
        });
        $(".icon4").draggable({
            containment: ".icon_box", scroll: false,
            start: function() {
                $(".cursor img").attr("src", "img/game_mouse04.png")
                $("#header").css("background-color", "#ffff50");
            },
        });