728x90
JAVASCRIPT로 GAME 효과를 줘볼게요 !
먼저 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="css/bg.css">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/game.css">
</head>
<body>
<div class="cursor">
<img src="image/game_mouse01.png" alt>
</div>
<header id="header">
<h1>grovy game word</h1>
<div class="time"></div>
</header>
<main>
<div class="icon__box">
<div class="icon1">
<img src="image/game_icon01.png" alt="뮤직">
<span>뮤직듣기</span>
</div>
<div class="icon2">
<img src="image/game_icon02.png" alt="뮤직">
<span>뮤직듣기</span>
</div>
<div class="icon3">
<img src="image/game_icon03.png" alt="뮤직">
<span>뮤직듣기</span>
</div>
<div class="icon4">
<img src="image/game_icon04.png" alt="뮤직">
<span>뮤직듣기</span>
</div>
</div>
</main>
<footer id="footer">
<div class="info"><span id="infoData"></span></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>
</body>
</html>JQUERY와 GSAP 스크립트를 이용하려고 하단에 추가했구요
GAME느낌을 내기위해 SVG 파일을 백그라운드에 넣었어요 !
스크립트 부분 볼게요 !
<script>
let nowTime = document.querySelector(".time") ;
let footerInfo = "";
let infor = document.getElementById("infoData");
// $(".icon__box").click((e)=>{
// // console.log(e.children);
// // var id_check = $(this).attr("id");
// $("#header").attr('class','blue')
// })
$(".icon1").mousedown (()=>{
$("#header").attr('class','red');
infor.innerHTML = "빨간음악을 클릭하셨습니다";
$("#infoData").attr('class','red');
changeFooter();
});
$(".icon2").mousedown(()=>{
$("#header").attr('class','blue')
infor.innerHTML = "파란음악을 클릭하셨습니다";
$("#infoData").attr('class','blue');
changeFooter();
});
$(".icon3").mousedown(()=>{
$("#header").attr('class','green')
infor.innerHTML = "초록음악을 클릭하셨습니다";
$("#infoData").attr('class','green');
changeFooter();
});
$(".icon4").mousedown(()=>{
$("#header").attr('class','yellow')
infor.innerHTML = "노란음악을 클릭하셨습니다";
$("#infoData").attr('class','yellow');
changeFooter();
});
$(".icon1").draggable({
containment: ".icon_box", scroll: false ,
start: function() {
$(".cursor img").attr("src" , "image/game_mouse01.png"),
infor.innerHTML = "빨간음악을 드레그 시작했습니다";
$("#infoData").attr('class','red');
},
drag : function(){
infor.innerHTML = "빨간음악을 드레그 하고있습니다.";
},
stop : function(){
infor.innerHTML = "빨간음악을 드레그 끝났습니다",
changeFooter()
}
});
$(".icon2").draggable({containment: ".icon__box", scroll: false ,
start: function() {
$(".cursor img").attr("src" , "image/game_mouse02.png"),
$("#infoData").attr('class','blue')
},
drag : function(){
infor.innerHTML = "파란음악을 드레그 하고있습니다.";
},
stop : function(){
infor.innerHTML = "파란음악을 드레그 끝났습니다",
changeFooter()
}
});
$(".icon3").draggable({containment: ".icon__box", scroll: false ,
start: function() {
$(".cursor img").attr("src" , "image/game_mouse03.png"),
$("#infoData").attr('class','green')
},
drag : function(){
infor.innerHTML = "초록음악을 드레그 하고있습니다.";
},
stop : function(){
infor.innerHTML = "초록음악을 드레그 끝났습니다",
changeFooter()
}
});
$(".icon4").draggable({containment: ".icon__box", scroll: false ,
start: function() {
$(".cursor img").attr("src" , "image/game_mouse04.png"),
$("#infoData").attr('class','yellow');
},
drag : function(){
infor.innerHTML = "노란음악을 드레그 하고있습니다.";
},
stop : function(){
infor.innerHTML = "노란음악을 드레그 끝났습니다",
changeFooter()
}
});
window.onload = function(){
window.addEventListener("mousemove",e=>{
gsap.to(".cursor", {
duration : 0.1,
left : e.pageX-5,
top : e.pageY-10
})
})
printTime();
printAgent();
// 1. 시간출력 printTime();
// 2. 하단 정보 출력 printAgent();
// 3. 아이콘 클릭시 해더 배경색 변경
// 4. 현재 뮤직듣기를 드래그 끝났습니다. 10초이후 2번으로 변경 changeFooter()
}
function printTime() {
setInterval(()=>{
const chkTime = new Date();
nowTime.innerHTML = `<span> ${chkTime.getFullYear()}년 ${chkTime.getMonth()+1}월 ${chkTime.getDate()}일 ${chkTime.getHours()}시 ${chkTime.getMinutes()}분 ${chkTime.getSeconds()}초 </span>`;
}, 1000);
}
function printAgent(){
if(!("navigator" in window)){
return "unknown";
}
//운영체제 정보 알아내기
let os = navigator.userAgent.toLowerCase();
let sw = screen.width;
let sh = screen.height;
if (os.indexOf("windows") >= 0) {
footerInfo = "현재 윈도우를 사용하고 있으며, 화면 크기는 " + sw + "x" + sh + " 입니다."
infor.innerHTML = footerInfo;
}else if (os.indexOf("macintosh") >= 0) {
footerInfo = "현재 맥을 사용하고 있으며, 화면 크기는 " + sw + "x" + sh + " 입니다."
infor.innerHTML = footerInfo;
} else if (os.indexOf("iphone") >= 0) {
footerInfo = "현재 아이폰을 사용하고 있으며, 화면 크기는 " + sw + "x" + sh + " 입니다."
infor.innerHTML = footerInfo;
} else if (os.indexOf("android") >= 0) {
footerInfo = "현재 안드로이드 폰을 사용하고 있으며, 화면 크기는 " + sw + "x" + sh + " 입니다."
infor.innerHTML = footerInfo;
}
}
function changeFooter(){
let changeColor = setInterval(() => {
// $("#header").removeClass('red blue green yellow');
$("#infoData").removeClass('red blue green yellow');
infor.innerHTML = footerInfo;
}, 5000);
function stopInterval (changeColor) {
clearInterval(changeColor);
}
setTimeout(stopInterval, 10000, changeColor)
}
</script>자바스크립트 부분을 볼게요 !
1. 온로드시 마우스 이미지를 변경하여 따라다니게 했어요 !
window.onload = function(){
window.addEventListener("mousemove",e=>{
gsap.to(".cursor", {
duration : 0.1,
left : e.pageX-5,
top : e.pageY-10
});
});
}2. 시간을 우측상단에서 매초 바뀌게끔 했습니다.
function printTime() {
setInterval(()=>{
const chkTime = new Date();
nowTime.innerHTML = `<span> ${chkTime.getFullYear()}년 ${chkTime.getMonth()+1}월 ${chkTime.getDate()}일 ${chkTime.getHours()}시 ${chkTime.getMinutes()}분 ${chkTime.getSeconds()}초 </span>`;
}, 1000);
}
3. 하단에 브라우저 & 화면크기를 출력했어요
function printAgent(){
if(!("navigator" in window)){
return "unknown";
}
//운영체제 정보 알아내기
let os = navigator.userAgent.toLowerCase();
let sw = screen.width;
let sh = screen.height;
if (os.indexOf("windows") >= 0) {
footerInfo = "현재 윈도우를 사용하고 있으며, 화면 크기는 " + sw + "x" + sh + " 입니다."
infor.innerHTML = footerInfo;
}else if (os.indexOf("macintosh") >= 0) {
footerInfo = "현재 맥을 사용하고 있으며, 화면 크기는 " + sw + "x" + sh + " 입니다."
infor.innerHTML = footerInfo;
} else if (os.indexOf("iphone") >= 0) {
footerInfo = "현재 아이폰을 사용하고 있으며, 화면 크기는 " + sw + "x" + sh + " 입니다."
infor.innerHTML = footerInfo;
} else if (os.indexOf("android") >= 0) {
footerInfo = "현재 안드로이드 폰을 사용하고 있으며, 화면 크기는 " + sw + "x" + sh + " 입니다."
infor.innerHTML = footerInfo;
}
}navigator.userAgent.toLowerCase() 구문을 이용해 사용하고있는 기기의 정보를 받아옵니다.
3. 아이콘 클릭시 해더 배경색 변경 & 뮤직듣기를 드래그발생시 이벤트
$(".icon1").mousedown (()=>{
$("#header").attr('class','red');
infor.innerHTML = "빨간음악을 클릭하셨습니다";
$("#infoData").attr('class','red');
changeFooter();
});
$(".icon1").draggable({
containment: ".icon_box", scroll: false ,
start: function() {
$(".cursor img").attr("src" , "image/game_mouse01.png"),
infor.innerHTML = "빨간음악을 드레그 시작했습니다";
$("#infoData").attr('class','red');
},
drag : function(){
infor.innerHTML = "빨간음악을 드레그 하고있습니다.";
},
stop : function(){
infor.innerHTML = "빨간음악을 드레그 끝났습니다",
changeFooter()
}
});위 이벤트를 통해서 mousedown 마우스 버튼을 눌렀을때 하단에 빨간음악을 클릭했습니다. 라고 바꿔줬어요~
그리고 드래그를 할땐 start, drag, stop 시작 중간 끝 부분에서 하단 메시지를 변경해 줍니다.
4. 변경된 하단메시지 초기화
function changeFooter(){
let changeColor = setInterval(() => {
// $("#header").removeClass('red blue green yellow');
$("#infoData").removeClass('red blue green yellow');
infor.innerHTML = footerInfo;
}, 10000);
function stopInterval (changeColor) {
clearInterval(changeColor);
}
setTimeout(stopInterval, 11000, changeColor)
}메세지를 변경할때마다 위 함수를 실행시켜줬어요 .
맨위 부분의 changeColor()를 setInterval()함수로 셋시켜줬구요
10초 있다가 기존 기기정보를 입력하고
setInterval함수를 종료시켜줬어요 !
보완사항!
$(".icon__box").click((e)=>{
// console.log(e.children);
// var id_check = $(this).attr("id");
$("#header").attr('class','blue')
})처음 코드를 짰을땐 이런식으로 음악 icon__box를 클릭했을때
자식이 가지고 있는 id 또는 class 를 가져와
header에 넣어주면
같은 소스르 반복하지 않고도 코드를 작성할수 있었는데 블로그 작성하고 보니 기억나네요 ! ㅜㅜ
다음엔 구조를 먼저 잡고 스크립트를 짜도록 해야겠어요