완성된 화면 입니다.
html코드 입니다.
<title>GAME Effect</title>
<link rel="stylesheet" href="css/bg.css">
<link rel="stylesheet" href="css/resset.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>JIN 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"></div>
</footer>
스크립트 입니다.
<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").css("background-color","red");
$("#footer .info").html("현재 빨간 뮤직듣기를 클릭했습니다.")
},
stop: function() {
setTimeout(function() {
printAgent();
}, 1000); // 1초 후에 실행
}
});
$(".icon2").draggable({
containment: ".icon__box", scroll: false,
start: function() {
$(".cursor img").attr("src", "img/game_mouse02.png")
$("#header").css("background-color","blue");
$("#footer .info").html("현재 빨간 뮤직듣기를 클릭했습니다.")
},
stop: function() {
setTimeout(function() {
printAgent();
}, 1000); // 1초 후에 실행
}
});
$(".icon3").draggable({containment: ".icon__box", scroll: false,
containment: ".icon__box", scroll: false,
start: function() {
$(".cursor img").attr("src", "img/game_mouse03.png")
$("#header").css("background-color","green");
$("#footer .info").html("현재 빨간 뮤직듣기를 클릭했습니다.")
},
stop: function() {
setTimeout(function() {
printAgent();
}, 1000); // 1초 후에 실행
}
});
$(".icon4").draggable({containment: ".icon__box", scroll: false,
containment: ".icon__box", scroll: false,
start: function() {
$(".cursor img").attr("src", "img/game_mouse04.png")
$("#header").css("background-color","yellow");
$("#footer .info").html("현재 빨간 뮤직듣기를 클릭했습니다.")
},
stop: function() {
setTimeout(function() {
printAgent();
}, 1000); // 1초 후에 실행
}
});
window.onload = function (){
window.addEventListener("mousemove", e => {
gsap.to(".cursor", {
duration: 0,
left: e.pageX - 5,
top: e.pageY -10
})
});
}
function printTime(){
const clock = document.querySelector(".time");
const now = new Date();
let nowDate = now.getDate();
if (nowDate < 10) nowDate = `0${nowDate}`;
let nowHours = now.getHours();
if (nowHours > 12) {nowHours = `오후 ${nowHours - 12}`} else {nowHours = `오전 ${nowHours}`};
let nowMinutes = now.getMinutes();
if (nowMinutes < 10) nowMinutes = `0${nowMinutes}`;
let nowSeconds = now.getSeconds();
if (nowSeconds < 10) nowSeconds = `0${nowSeconds}`;
const nowTime = now.getFullYear() + "년 " + (now.getMonth()+1) + "월 " + nowDate + "일 "+ nowHours +"시 "+ nowMinutes +"분 "+ nowSeconds +"초";
clock.innerText = nowTime;
setTimeout("printTime()", 1000);
}
printTime(); // 오른쪽 상단 시간
let os = navigator.userAgent.toLowerCase();
let sw = screen.width;
let sh = screen.height;
let info = document.querySelector("#footer .info");
function printAgent(){
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 + " 입니다."
}
}
printAgent(); // 하단 중앙 모니터 정보
</script>$(".icon1").draggable({
containment: ".icon__box", scroll: false,
start: function() {
$(".cursor img").attr("src", "img/game_mouse01.png");
$("#header").css("background-color","red");
$("#footer .info").html("현재 빨간 뮤직듣기를 클릭했습니다.")
},
stop: function() {
setTimeout(function() {
printAgent();
}, 1000); // 1초 후에 실행
}
});위 코드는 jQuery UI의 draggable() 메서드를 사용하여 클래스가 "icon1"인 요소를 드래그 가능하게 만드는 코드입니다.
containment 속성은 드래그가 가능한 영역을 지정합니다. 위 코드에서는 "icon__box" 클래스를 가진 요소 안에서만 드래그 가능하도록 설정되어 있습니다.
scroll 속성은 드래그할 때 스크롤이 생기지 않도록 설정합니다.
start 함수는 드래그 시작 시 실행되는 콜백 함수입니다. $(".cursor img").attr("src", "img/game_mouse01.png") 코드는 커서 이미지를 변경합니다. $("#header").css("background-color","red") 코드는 헤더 배경색을 빨간색으로 변경합니다. $("#footer .info").html("현재 빨간 뮤직듣기를 클릭했습니다.") 코드는 footer 요소 내부에 있는 클래스가 "info"인 요소의 텍스트를 변경합니다.
stop 함수는 드래그가 멈추면 실행되는 콜백 함수입니다. setTimeout() 함수를 사용하여 printAgent() 함수를 1초 후에 실행합니다.
window.onload = function (){
window.addEventListener("mousemove", e => {
gsap.to(".cursor", {
duration: 0,
left: e.pageX - 5,
top: e.pageY -10
})
});
}위 코드는 윈도우가 로드될 때 실행되는 콜백 함수를 등록하고, 마우스가 움직일 때마다 커서 위치를 업데이트하는 코드입니다.
윈도우가 로드될 때 onload 이벤트가 발생하고, 이벤트 핸들러로 등록된 함수가 실행됩니다. 이 함수는 addEventListener() 메서드를 사용하여 "mousemove" 이벤트를 등록합니다. 즉, 마우스가 움직일 때마다 이벤트가 발생합니다.
이벤트 핸들러 함수는 gsap.to() 메서드를 사용하여 .cursor 클래스를 가진 요소의 위치를 변경합니다. duration 속성은 애니메이션의 지속 시간을 0초로 설정하여 즉시 업데이트합니다. left 속성은 마우스 X 좌표에서 5px를 뺀 값으로, top 속성은 마우스 Y 좌표에서 10px를 뺀 값으로 설정됩니다. 이렇게 설정된 속성 값은 gsap 라이브러리의 TweenMax 엔진에 의해 애니메이션으로 처리됩니다.
즉, 이 코드는 마우스의 위치를 추적하여 .cursor 클래스를 가진 요소의 위치를 변경함으로써 커서를 구현하는 것입니다.
stop 함수는 드래그가 멈추면 실행되는 콜백 함수입니다. setTimeout() 함수를 사용하여 printAgent() 함수를 1초 후에 실행합니다.
printAgent() 함수는 위 코드에서는 나타나지 않았기 때문에, 해당 함수가 어떤 역할을 하는지 알 수 없습니다. 다만, stop 함수 내에서 setTimeout() 함수를 사용하여 1초 후에 실행하도록 설정되어 있습니다.
function printTime(){
const clock = document.querySelector(".time");
const now = new Date();
let nowDate = now.getDate();
if (nowDate < 10) nowDate = `0${nowDate}`;
let nowHours = now.getHours();
if (nowHours > 12) {nowHours = `오후 ${nowHours - 12}`} else {nowHours = `오전 ${nowHours}`};
let nowMinutes = now.getMinutes();
if (nowMinutes < 10) nowMinutes = `0${nowMinutes}`;
let nowSeconds = now.getSeconds();
if (nowSeconds < 10) nowSeconds = `0${nowSeconds}`;
const nowTime = now.getFullYear() + "년 " + (now.getMonth()+1) + "월 " + nowDate + "일 "+ nowHours +"시 "+ nowMinutes +"분 "+ nowSeconds +"초";
clock.innerText = nowTime;
setTimeout("printTime()", 1000);
}
printTime(); // 오른쪽 상단 시간 설명위 코드는 현재 시간을 출력하는 함수 printTime()을 구현한 코드입니다.
printTime() 함수에서는 document.querySelector() 메서드를 사용하여 HTML에서 .time 클래스를 가진 요소를 찾아옵니다. const now = new Date(); 코드는 현재 시간을 나타내는 Date() 객체를 생성합니다.
그 다음에는 now 객체의 getDate(), getHours(), getMinutes(), getSeconds() 메서드를 사용하여 현재 날짜, 시간, 분, 초 값을 추출합니다. 이 값들을 각각 변수에 저장하고, 필요한 경우에는 문자열을 조작하여 포맷을 맞춥니다.
const nowTime = now.getFullYear() + "년 " + (now.getMonth()+1) + "월 " + nowDate + "일 "+ nowHours +"시 "+ nowMinutes +"분 "+ nowSeconds +"초"; 코드는 포맷을 맞춘 문자열을 만들어 변수에 저장합니다.
clock.innerText = nowTime; 코드는 .time 클래스를 가진 요소의 텍스트를 nowTime 변수에 저장된 문자열로 업데이트합니다.
마지막으로 setTimeout() 함수를 사용하여 1초 후에 printTime() 함수를 재귀적으로 호출합니다. 이를 통해 1초마다 현재 시간이 업데이트되도록 합니다. printTime() 함수 호출이 마지막 줄에 위치하므로, 페이지가 로드되면 즉시 시간이 출력됩니다.
let os = navigator.userAgent.toLowerCase();
let sw = screen.width;
let sh = screen.height;
let info = document.querySelector("#footer .info");
function printAgent(){
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 + " 입니다."
}
}
printAgent(); // 하단 중앙 모니터 정보해당 코드는 현재 사용자의 운영체제와 화면 크기를 파악하는 함수 printAgent()를 구현한 코드입니다.
let os = navigator.userAgent.toLowerCase(); 코드는 사용자의 브라우저 정보를 담고 있는 navigator.userAgent 속성을 가져와 소문자로 변환한 후 os 변수에 저장합니다.
let sw = screen.width; 코드는 현재 화면의 가로 크기를 나타내는 screen.width 값을 가져와 sw 변수에 저장합니다.
let sh = screen.height; 코드는 현재 화면의 세로 크기를 나타내는 screen.height 값을 가져와 sh 변수에 저장합니다.
let info = document.querySelector("#footer .info"); 코드는 HTML에서 #footer .info 선택자에 해당하는 요소를 찾아와 info 변수에 저장합니다.
printAgent() 함수에서는 os 변수의 값을 참조하여 현재 운영체제가 어떤 것인지 파악합니다. info.innerHTML 코드는 if문에서 조건에 해당하는 운영체제에 따라서 #footer .info 요소의 텍스트를 업데이트합니다.
마지막으로 printAgent() 함수 호출이 마지막 줄에 위치하므로, 페이지가 로드되면 즉시 사용자의 운영체제와 화면 크기가 출력됩니다.
댓글