필요없는 목록/CSS 스타일

간단한 게임 만들기 전에 메인 페이지 꾸며보기 1 / 5

비밀안 2023. 4. 24. 19:10
클릭

버튼을 클릭하면 명언이 나와요

-

이름이 나와요

최종 완성된 모습

이번에는 테트리기나 지렁이 게임을 만들기 전에 메인 페이지를 만드는 작업을 했습니다.

그리고 학원에서 다시 미션을 주네요. -_-;

1.시간 구현

2 OS 크기 구현

3. 아이콘 클릭 + 해더 배경 체인지

4. 현재 뮤직듣기를 클릭했습니다.

HTML코드

<div class="cursor">
    <img src="img/game_mouse01.png" alt="">
</div>
<header id="header">
    <h1>WEBS GAME WORLD</h1>
    <div class="os">
        <p class="you__OS"></p>
    </div>
    <div class="time">
        <p id="al"></p>
        <!-- 2023년 4월 24일 <em class="hour">09</em>시 <em class="minut">30</em>분 <em class="second">00</em>초 -->
    </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">
        현재 맥을 사용하고 있으면, 화면 크기는 1920X760입니다.

    </div>
</footer>

코드 설명

1.div태그 .cursor은 화면에서 움직이는 마우스 모양이 들어갑니다.

2.div태그 #header에는 로고, 드래그시 메시지, 현재 시간이 나옵니다.

3.div태그 .icon__box은 4개의 이미지 파일이 들어갑니다.

4.footer태그 #footer은 현재 사용하고 있는 OS와 사양이 나옵니다.

 

JQuery + JAVASCRIPT 코드

<!-- jquery 스니펫 -->
<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>
    // 시간 변경
    let Hour = document.querySelector(".hour");
    let Minut = document.querySelector(".minut");
    let Second = document.querySelector(".second");

    setInterval(() => {
        let now = new Date();
        let hur = now.getHours();
        let min = now.getMinutes();
        let sec = now.getSeconds();

        let timeBoard = document.getElementById("al");
        let time = "현재 시간: " + hur + "시 " + min + "분 " + sec + "초";

        timeBoard.innerHTML = time;
    });

    // 마우스 이동시
    // $( "#draggable3" ).draggable({ containment: "#containment-wrapper", scroll: false });
    $(".icon1").draggable({container: ".icon__box", scroll:false,
        start: function() {
            $(".cursor img").attr("src","img/game_mouse01.png");
            $(".you__OS").text("뮤직 듣기를 클릭했습니다.(빨강)");
        },
    });
    $(".icon2").draggable({container: ".icon__box", scroll:false,
        start: function() {
            $(".cursor img").attr("src","img/game_mouse02.png");
            $(".you__OS").text("뮤직 듣기를 클릭했습니다.(파랑)");
        },
    });
    $(".icon3").draggable({container: ".icon__box", scroll:false,
        start: function() {
            $(".cursor img").attr("src","img/game_mouse03.png");
            $(".you__OS").text("뮤직 듣기를 클릭했습니다.(초록)");
        },
    }); $(".icon4").draggable({container: ".icon__box", scroll:false,
        start: function() {
            $(".cursor img").attr("src","img/game_mouse04.png");
            $(".you__OS").text("뮤직 듣기를 클릭했습니다.(노랑)");
        },
    });

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

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

    // 아이콘 클릭
    $(".icon1").click(() => {
        $("#header").css("background-color","red");
    });
    $(".icon2").click(() => {
        $("#header").css("background-color","blue");
    });
    $(".icon3").click(() => {
        $("#header").css("background-color","green");
    });
    $(".icon4").click(() => {
        $("#header").css("background-color","yellow");
    });

    // 운영체제 정보 알아내기
    let you = document.querySelector(".you__OS");
    let os = navigator.userAgent.toLowerCase();
    // 현재 맥을 사용하고 있으면, 화면 크기는 1920X760입니다.
    if(os.indexOf("macintosh") > -1){
        $(".info").text("현재 macintosh 사용하고 있으면, 화면 크기는"+ screen.width+ "X"+ screen.height +"입니다.");
    } else if(os.indexOf("windows") > -1){
        console.log(screen.width, screen.height );
        $(".info").text("현재 windows을 사용하고 있으면, 화면 크기는"+ screen.width+ "X"+ screen.height +"입니다.");
    } else if(os.indexOf("iphone") > -1){
        $(".info").text("현재 iphone 사용하고 있으면, 화면 크기는"+ screen.width+ "X"+ screen.height +"입니다.");
    } else if(os.indexOf("android") > -1){
        $(".info").text("현재 android 사용하고 있으면, 화면 크기는"+ screen.width+ "X"+ screen.height +"입니다.");
    }
</script>

코드 설명

1.미션 1번인 시간 변경은 JAVASCRIPT코드를 사용해봤습니다.(나머지는 jquery입니다.)

let Hour = document.querySelector(".hour");
let Minut = document.querySelector(".minut");
let Second = document.querySelector(".second");

querySelector()로 아이디, 태그, 클래스를 찾습니다.

 

2.

setInterval(() => {
    let now = new Date();
    let hur = now.getHours();
    let min = now.getMinutes();
    let sec = now.getSeconds();

    let timeBoard = document.getElementById("al");
    let time = "현재 시간: " + hur + "시 " + min + "분 " + sec + "초";

    timeBoard.innerHTML = time;
});

new Date()로 시간과 관련된 데이터를 불러옵니다.

getHours()는 "시"  //  getMinutes()는 "분"  //  getSeconds()은 "초" 입니다.

innerHTML로 "현재시간 시:분:초"를 넣습니다.

 

3.jQuery를 이용했습니다.

// 마우스 이동시
// $( "#draggable3" ).draggable({ containment: "#containment-wrapper", scroll: false });
$(".icon1").draggable({container: ".icon__box", scroll:false,
    start: function() {
        $(".cursor img").attr("src","img/game_mouse01.png");
        $(".you__OS").text("뮤직 듣기를 클릭했습니다.(빨강)");
    },
});
$(".icon2").draggable({container: ".icon__box", scroll:false,
    start: function() {
        $(".cursor img").attr("src","img/game_mouse02.png");
        $(".you__OS").text("뮤직 듣기를 클릭했습니다.(파랑)");
    },
});
$(".icon3").draggable({container: ".icon__box", scroll:false,
    start: function() {
        $(".cursor img").attr("src","img/game_mouse03.png");
        $(".you__OS").text("뮤직 듣기를 클릭했습니다.(초록)");
    },
}); $(".icon4").draggable({container: ".icon__box", scroll:false,
    start: function() {
        $(".cursor img").attr("src","img/game_mouse04.png");
        $(".you__OS").text("뮤직 듣기를 클릭했습니다.(노랑)");
    },
});
  • draggable은 클릭해서 드래그하면 실행이 됩니다.
  • draggable에서 container은 해당 영역 안에서 이동하도록 설정을 합니다.
  • scroll이 false면 드래그 하고 밑으로 이동시 스크롤이 넘어가지 않습니다.
  • scroll이 true면 드래그 하고 밑으로 이동시 스크롤이 무한으로 넘어갑니다.
  • $().text()는 해당 영역의 텍스트를 변경합니다.

4.jQuery 사용했습니당

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

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

window.onload은 window.onload : 웹브라우저 내의 모든 요소가 준비가 되면 실행한다는 의미입니다.

window.addEventListener("mousemove")는 화면에서 마우스를 움직일때 실행이 됩니다.

gsap.to("대상", {속성:값}); 입니다

gsap.to로 div태그인 .cursor(마우스 이미지)가 마우스를 따라오게 만들어줍니당~~

 

5.jquery 사용했습니다.

// 운영체제 정보 알아내기
let you = document.querySelector(".you__OS");
let os = navigator.userAgent.toLowerCase();
// 현재 맥을 사용하고 있으면, 화면 크기는 1920X760입니다.
if(os.indexOf("macintosh") > -1){
    $(".info").text("현재 macintosh 사용하고 있으면, 화면 크기는"+ screen.width+ "X"+ screen.height +"입니다.");
} else if(os.indexOf("windows") > -1){
    console.log(screen.width, screen.height );
    $(".info").text("현재 windows을 사용하고 있으면, 화면 크기는"+ screen.width+ "X"+ screen.height +"입니다.");
} else if(os.indexOf("iphone") > -1){
    $(".info").text("현재 iphone 사용하고 있으면, 화면 크기는"+ screen.width+ "X"+ screen.height +"입니다.");
} else if(os.indexOf("android") > -1){
    $(".info").text("현재 android 사용하고 있으면, 화면 크기는"+ screen.width+ "X"+ screen.height +"입니다.");
}

운영체제 정보를 가져 옵니다. 그리고 각 운영체제의 정보에 맞게 

width와 height값을 가져와서 화면에 보이게 해줬습니다.

 

드디어 월요일이 끝났네요..

얼릉 토요일이 왔으면 좋겠어요

'필요없는 목록/CSS 스타일'의 다른글

  • 현재글간단한 게임 만들기 전에 메인 페이지 꾸며보기 1 / 5

관련글

댓글

티스토리툴바