전체 소스 보기
<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>우선 jquery와 gsap의 라이브 러리를 가져와 줍니다.
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="../game/css/bg.css">
<link rel="stylesheet" href="../game/css/game.css">
<link rel="stylesheet" href="../game/css/reset.css">
</head>
<body>
<div class="cursor">
<img src="img/game_mouse06.png" alt>
</div>
<header id="header">
<h1>WEBS GAME WORLD</h1>
<div class="time"></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>
마우스 변경하기
window.onload = function(){
window.addEventListener("mousemove", e => {
gsap.to(".cursor", {
duration: 0,
left: e.pageX -5,
top: e.pageY -10
});
});
}gsap를 사용하면서 addEventListener로인해 마우스가 움직일때 .cursor가 마우스를 대신하게 됩니다.
시간 구현
//현재 시간
const printTime = () => {
const now = new Date();
const options = {
year: 'numeric',
month: 'long', //month 옵션에서는 'numeric'이 아닌 'long' 값을 사용하면 해당 월을 한글로 표현할 수 있다.
day: '2-digit', //long,2-digit로 바꾸면 한글이 나온다.
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
hour12: false, // 24시간제로 표시
};
const dateTimeString = now.toLocaleString('ko-KR', options);
document.querySelector(".time").innerHTML = dateTimeString
};
printTime();
setInterval(printTime, 1000);
- new Date()를 이용하여 현시간을 가져왔습니다.
- 상수 options를 만들어 년, 월, 일, 시, 분, 초 를 가져와 주고 시간은 24시로 표시합니다. (이때 월(month)의 값을 long으로 해주지 않으면 숫자만 나오게 됩니다.)
- toLocaleString() 을 사용하여 지정언어를 한국어로 하여 options에 있는 값을 한국어로 나오게 합니다.
- setInterval 을 이용해 1초마다 한번씩 반복하게 해줍니다.
OS, 크기 구현
//현재 사용중인 OS와 화면크기
const printAgent = () => {
let os = navigator.userAgent.toLowerCase();
let osWdith = window.screen.width
let osHeight = window.screen.height
if(os.indexOf("macintosh") > -1){
document.querySelector("#footer .info").innerHTML = "현재 맥을 사용중 이며, 화면 크기는 "+osWdith+" X "+osHeight+" 입니다."
} else if(os.indexOf("windows") > -1){
document.querySelector("#footer .info").innerHTML = "현재 윈도우를 사용중 이며, 화면 크기는 "+osWdith+" X "+osHeight+" 입니다."
} else if(os.indexOf("iphone") > -1){
document.querySelector("#footer .info").innerHTML = "현재 아이폰을 사용중 이며, 화면 크기는 "+osWdith+" X "+osHeight+" 입니다."
} else if(os.indexOf("android") > -1){
document.querySelector("#footer .info").innerHTML = "현재 안드로이드폰을 사용중 이며, 화면 크기는 "+osWdith+" X "+osHeight+" 입니다."
}
}
printAgent();- 사용중인 os를 가져오려면 navigator.userAgent 을 사용해야하며, 그값을 toLowerCase()을 이용해 소문자로만 나오게 하였습니다.
- window.screen.width 폭값과 window.screen.height높이값을 변수로 저장 합니다.
- indexOf를 사용해 문자열에 해당 값이 있으면 그값의 위치값을 반환 하지만, 없을때는 -1을 반환 하는 것을 이용하여
조건문을 만들어 그값에 해당할때 #footer .info에 그에 해당하는 os를 값을 과 화면의 크기를 보여줍니다.
아이콘 드래그 시 해더 배경 체인지, 현재 듣는 뮤직를 알려주기
$(".icon1").draggable({
containment:".icon__box", scroll: false,
start: function() {
$(".cursor img").attr("src", "img/game_mouse01.png");
// $("header").removeClass().addClass("red");
$("header").css("background-color","rgba(233, 65, 65, 0.582)");
$("header").css("transition","all 0.3s");
$("#footer .info").html("현재 빨강 음악 듣기를 클릭 하셨습니다.");
},
stop: function() {
setTimeout(function() {
printAgent();
}, 7000); // 7초 후에 실행
}
});- jquery를 사용하여 draggable() 메서드를 호출하고 요소를 원하는곳에 배치 할수 있게 설정합니다.
- containment 속성을 통해 드래그 가능한 영역을 ".icon__box" 클래스가 붙은 요소로 제한하고, scroll 속성을 false로 설정하여 스크롤을 막습니다.
- start 속성에 콜백 함수를 등록하여 아이콘을 드래그 할 때의 동작을 정의합니다.
- 마우스의 커서를 "img/game_mouse01.png"로 변경하고, "header" 요소의 배경색을 빨간색으로 변경합니다. 그리고 "footer" 요소 안에 있는 "info" 클래스를 가진 요소의 내용을 변경합니다.
- stop 속성에 콜백 함수를 등록하여 드래그를 멈췄을 때의 동작을 정의합니다. 해당 함수에서는 7초 후에 printAgent() 함수를 실행하도록 설정합니다.
jQuery의 다른 메서드들은 다음과 같습니다.
attr() : 속성을 변경합니다.
css() : CSS 속성을 변경합니다.
html() : HTML 내용을 변경합니다.
| new Date() | 날짜와 시간 정보를 생성하기 위해 사용되는 내장 객체입니다. |
| toLocaleString() | 하나로, 숫자, 날짜, 시간 등의 값을 지정한 언어와 형식으로 문자열로 반환해주는 함수입니다. |
| navigator | 현재 브라우저와 운영체제에 대한 정보를 제공합니다. |
| userAgent | 현재 브라우저가 사용하는 User Agent 문자열을 반환합니다. |
| toLowerCase() | 문자열을 소문자로 변환하여 반환합니다. |
| window.screen.width | 현재 디바이스의 화면 너비를 픽셀 단위로 반환합니다. |
| window.screen.height | 현재 디바이스의 화면 높이를 픽셀 단위로 반환합니다. |
| indexOf() | 문자열에서 특정 문자열이 위치한 인덱스를 반환합니다. 만약 찾고자 하는 문자열이 없을 경우 -1을 반환합니다. |
| draggable | HTML5의 특정 기능 중 하나로, 웹 페이지 요소들을 드래그하여 이동시킬 수 있게 해주는 JavaScript 메서드입니다. |