...
728x90
반응형
Game Effect 페이지 만들기
여러가지 게임 효과들이 있는 페이지를 만들어보겠습니다. 이번 포스팅에는 메인 화면을 만들어보도록 하겠습니다.
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="img/game_mouse01.png" alt>
</div>
<header id="header" class="header neodungguenmo">
<h1>HOONG GAME ZONE</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>
</body>
</html>HTML 정리해보기
- html문서상의 구조는 아주 간단합니다.
- 헤더, 메인, 푸터 세 부분으로 구성되어있고 헤더에는 제목과 시간표시, 푸터에는 운영체제 정보와 화면크기를 나타냈습니다.
CSS 작성하기
* {
cursor: none;
}
body {
width: 100%;
height: 100vh;
overflow: hidden;
color: #fff;
}
.cursor {
width: 15px;
position: absolute;
left: 0;
top: 0;
z-index: 1000;
pointer-events: none;
}
#header.red {
background-color: #ffaeae;
}
#header.blue {
background-color: #a3a2ff;
}
#header.green {
background-color: #aeff8e;
}
#header.yellow {
background-color: #fdff89;
}
#header {
position: fixed;
left: 0;
top: 0;
background-color: #3f3f3f;
width: 100%;
padding: 10px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
}
#header {
font-size: 14px;
line-height: 1;
}
.icon__box {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100vh;
padding: 70px 20px;
}
.icon__box > div {
width: 50px;
margin-bottom: 20px;
text-align: center;
user-select: none;
}
.icon__box > div img {
margin-bottom: 10px;
}
.icon__box > div span {
background-color: rgba(231, 109, 93, 0.5);
display: inline-block;
padding: 5px 2px 3px;
border-radius: 10px;
}
/* footer */
#footer .info {
position: fixed;
left: 50%;
bottom: 10px;
font-size: 14px;
color: #fff;
transform: translateX(-50%);
text-align: center;
}CSS 정리해보기
- 배경에 들어가는 3D 배경요소는 따로 파일을 가져와 스타일시트 링크를 걸어주었습니다.
- pointer-events:none => 마우스 이벤트를 받지 않게하는 속성입니다.
- user-select:none => 해당 요소에서 텍스트가 선택이 되지 않는 속성입니다.
Javascript 작성하기
let os = navigator.userAgent.toLowerCase();
let sw = screen.width;
let sh = screen.height;
const inFo = document.querySelector("#footer .info");
const tiMe = document.querySelector(".time");
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 + " 입니다."
}
};
function printTime(){
setInterval(function () {
tiMe.innerHTML = new Date().toLocaleString();
}, 1000);
}
function classRemove(){
$(".header").removeClass("red blue green yellow")
}
$(".icon1").draggable({
containment: ".icon__box", scroll: false,
start: function() {
$(".cursor img").attr("src", "img/game_mouse01.png")
$(".header").removeClass("red blue green yellow")
},
drag : function() {
$(".info").html("<em style='color:red'>Red</em> 뮤직듣기를 드래그 중입니다 !")
$(".header").addClass("red")
},
stop : function() {
setTimeout(printAgent, 10000);
// $(".header").removeClass("red")
}
});
$(".icon2").draggable({
containment: ".icon__box", scroll: false,
start: function() {
$(".cursor img").attr("src", "img/game_mouse02.png")
$(".header").removeClass("red blue green yellow")
},
drag : function() {
$(".info").html("<em style='color:blue'>Blue</em> 뮤직듣기를 드래그 중입니다 !")
$(".header").addClass("blue")
},
stop : function() {
setTimeout(printAgent, 10000);
// $(".header").removeClass("blue")
}
});
$(".icon3").draggable({
containment: ".icon__box", scroll: false,
start: function() {
$(".cursor img").attr("src", "img/game_mouse03.png")
$(".header").removeClass("red blue green yellow")
},
drag : function() {
$(".info").html("<em style='color:green'>Green</em> 뮤직듣기를 드래그 중입니다 !")
$(".header").addClass("green")
},
stop : function() {
setTimeout(printAgent, 10000);
// $(".header").removeClass("green")
}
});
$(".icon4").draggable({
containment: ".icon__box", scroll: false,
start: function() {
$(".cursor img").attr("src", "img/game_mouse04.png")
$(".header").removeClass("red blue green yellow")
},
drag : function() {
$(".info").html("<em style='color:yellow'>Yellow</em> 뮤직듣기를 드래그 중입니다 !")
$(".header").addClass("yellow")
},
stop : function() {
setTimeout(printAgent, 10000);
// $(".header").removeClass("yellow")
}
});
window.onload = function(){
window.addEventListener("mousemove", e => {
gsap.to(".cursor", {
duration: 0,
left: e.pageX -2,
top: e.pageY -3
});
});
printAgent();
printTime();
// printTime(); //오른쪽 상단 시간
// printAgent(); //하단 중앙
};Javascript 정리해보기
- 변수 os에 navigator.userAgent를 모두 소문자로 받아 저장합니다.
- navigator.userAgent는 현재 브라우저의 이름, 버전, 운영체제, 브라우저 엔진 등과 같은 다양한 세부 정보를 포함할 수 있습니다.
- printAgent() 함수
- if문을 사용하여 os에 windows가 있다면 윈도우 출력을, macintosh가 있다면 맥 출력을, iphone이 있다면 아이폰 출력을, android가 있다면 안드로이드 출력을 하며, screen.width값과 screen.height 값도 같이 출력합니다.
- printTime() 함수
- setInterval()을 사용하여 현재 날짜와 시간을 1초마다 받아와 실행합니다. (출력)
- jQuery를 사용하여 draggable 사용. (icon__box)범위를 넘어가지 못하도록.
- start 함수
- cursor img의 src 속성을 바꿔줍니다.
- header에 있는 색 class를 모두 지워줍니다.
- drag 함수
- (info)부분에 뮤직듣기를 드래중이라는 문구를 출력합니다. ( script : innerHTML )
- header에 색이름으로 지은 class를 추가합니다. ( script : classList.add )
- stop 함수
- setTimeout() 을 사용하여 드래그가 종료되고 10초뒤에 printAgent함수를 실행합니다. ( os 출력 )
- window의 로딩이 끝나고 실행되는 함수에는 gsap를 사용하여 cursor 이미지가 마우스를 따라오도록 만들었습니다.
- printAgent 함수와 printTime 함수를 실행합니다.
728x90
반응형