한번씩 읽고 가세요.
“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
GGGGAME효과 + 미션 1,2,3,4
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="assets/css/bg.css">
<link rel="stylesheet" href="assets/css/reset.css">
<link rel="stylesheet" href="assets/css/game.css">
</head>
<body>
<div class="cursor">
<img src="assets/img/game_mouse01.png" alt="">
</div>
<header id="header">
<h1>HB GAME WORLD</h1>
<div class="time"></div>
</header>
<main>
<div class="icon__box">
<div class="icon1">
<img src="assets/img/game_icon01.png" alt>
<span>뮤직 듣기1</span>
</div>
<div class="icon2">
<img src="assets/img/game_icon02.png" alt="뮤직">
<span>뮤직 듣기2</span>
</div>
<div class="icon3">
<img src="assets/img/game_icon03.png" alt="뮤직">
<span>뮤직 듣기3</span>
</div>
<div class="icon4">
<img src="assets/img/game_icon04.png" alt="뮤직">
<span>뮤직 듣기4</span>
</div>
</div>
</main>
<!-- 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>jquery와 gsap를 둘 다 사용하기 위해 라이브러를 둘 다 가져왔습니다.
$(".icon1").draggable({
containment: ".icon__box", scroll: false,
start: function () {
$(".cursor img").attr("src", "assets/img/game_mouse01.png")
}라이브러를 가져와 가능한 효과이다.
$(선택자).draggble 에 containment icon__box,scroll: false, 이 경우, 드래그 가능한 요소는 클래스가 "icon__box"인 요소 내에서만 이동할 수 있습니다. scroll 옵션은 드래그 가능한 요소가 containment 영역을 벗어날 때 스크롤이 발생하지 않도록 설정합니다.
제이쿼리( jQuery)에서 containment 옵션은 드래그 가능한 요소가 이동할 수 있는 영역을 제한하는 데 사용됩니다. containment 옵션은 드래그 가능한 요소의 이동 경로를 제한하고, 부모 요소, 문서 전체 또는 다른 요소를 포함하는 요소를 지정하여 드래그 가능한 요소가 이동할 수 있는 영역을 제한합니다.
start: function () {
$(".cursor img").attr("src", "assets/img/game_mouse01.png")
}드래그를 시작하면 $(.cursor img (선택자))에 attr을 사용하여 .src요소를 mouse01.png로 바꿔줍니다.
제이쿼리( jQuery)의 attr() 메서드는 HTML 요소의 속성(attribute) 값을 가져오거나 설정하는 데 사용됩니다. 이 메서드를 사용하여 속성 값을 가져올 때는 선택한 요소 중 첫 번째 요소의 속성 값을 반환하며, 속성 값을 설정할 때는 선택한 모든 요소의 속성 값을 일괄적으로 설정합니다.
마우스를 화면에 오버할시 마우스가 바뀌는 효과
window.onload = function () {
window.addEventListener("mousemove", e => {
gsap.to(".cursor", {
duration: 0,
left: e.pageX - 5,
top: e.pageY - 10
})
});GSAP를 사용하여 window.onload에 함수를 사용하여 window에 마우스오버 이벤트를 넣어줍니다.
gsap.to(".cursor"(선택자)) duration를 사용해 효과가 나타나는 속도를 설정하고 , left와 top으로 마우스 위치와 맞춰 줍니다.
* {
cursor: none;
}css로 전체에 cursor none을 주어 마우스를 없애줍니다! 그리고
<img src="assets/img/game_mouse01.png" alt="">html코드에 넣고 싶은 마우스 커서 이미지를 넣어줍니다.
미션
1번 미션 : 시간 구현
window.onload 함수 안에
function updateClock() {
// 현재 시간을 생성
const now = new Date();
// 시, 분, 초를 추출
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();
const year = now.getFullYear();
const month = now.getMonth() + 1;
const day = now.getDate();
// 시간을 표시할 형식을 설정
const timeFormat = `${year}년 ${month}월 ${day}일 ${hours} : ${minutes} : ${seconds}`;
// 시간을 요소의 내용으로 설정
clock.innerHTML = timeFormat;
}함수 updateClock을 만들어 주고 그안에 변수 now를 만들어 줍니다. 변수 now는 new Date()를 만듭니다.
그 후 또 변수
를 만들어줍니다.
- getHours() : Date 객체에서 시간 값(0 ~ 23)을 반환합니다.
- getMinutes() : Date 객체에서 분 값(0 ~ 59)을 반환합니다.
- getSeconds() : Date 객체에서 초 값(0 ~ 59)을 반환합니다.
- getFullYear() : Date 객체에서 년도 값을 반환합니다.
- getMonth() : Date 객체에서 월 값(0 ~ 11)을 반환합니다. 0이 1월을 나타내고, 11이 12월을 나타냅니다.
- getDate() : Date 객체에서 날짜 값(1 ~ 31)을 반환합니다.
시간을 표시할 형식을 설정
const timeFormat = `${year}년 ${month}월 ${day}일 ${hours} : ${minutes} : ${seconds}`;
그 후 출력해줍니다.
clock.innerHTML = timeFormat;
2번 미션 : OS 크기 구현
window.onload 함수 안에 os를 구하는 함수도 넣어줍니다.
// 사용자 운영체제 정보를 가져오는 함수
function UserOSInfo() {
// navigator.platform 값을 이용하여 사용자 운영체제 정보를 가져옴
const osInfo = navigator.platform;
const width = window.innerWidth;
const height = window.innerHeight;
// 결과를 출력
document.querySelector('.info').innerHTML = `Your OS is ${osInfo} ${width} x ${height} pixels.`;
}
UserOSInfo()함수 UserOSInfo를 만들어줍니다. 그 안에 사용자의 os를 구한 값인 변수 osinfo와 높이 넓이 값을 구한 변수 wiidth와 height를 만들어줍니다.
navigator.platform 값을 이용하여 사용자 운영체제 정보를 가져옵니다.
- navigator.appCodeName : 웹브라우저 코드이름
- navigator.appName : 웹브라우저 이름
- navigator.appVersion : 웹브라우저 버전
- navigator.cookieEnabled : 웹브라우저 쿠키 사용 가능 유무
- navigator.language : 웹브라우저 언어
- navigator.onLine : 사용자 온라인 상태 여부
- navigator.platform : 플랫폼
- navigator.userAgent : 브라우저 구분값(웹브라우저 이름 전체)
그 후 결과 값을('.info')에 출력해줍니다.
document.querySelector('.info').innerHTML = `Your OS is ${osInfo} ${width} x ${height} pixels.`;
3번 4번 미션 : 아이콘 클릭 해더 배경 체인지,현재 뮤직듣기를 클릭했습니다.
$(".icon1").draggable({
containment: ".icon__box", scroll: false,
start: function () {
$(".cursor img").attr("src", "assets/img/game_mouse01.png")
},
drag: function () {
$("#header").attr("style", "background:red")
$("#header h1").attr("style", "transform: rotate(20deg)")
$(".info").html("뮤직듣기1이 드래그 중 입니다.")
},
stop: function () {
$("#header").removeAttr("style");
$("#header h1").removeAttr("style");
$(".info").html("");
function UserOSInfo() {
// navigator.platform 값을 이용하여 사용자 운영체제 정보를 가져옴
const osInfo = navigator.platform;
const width = window.innerWidth;
const height = window.innerHeight;
// 결과를 출력
document.querySelector('.info').innerHTML = `Your OS is ${osInfo} ${width} x ${height} pixels.`;
}
UserOSInfo()
}
});3번은 제이쿼리문 안에 start다음 drag도 만들어줍니다. 그럼 드래그가 진행중일때 효과를 주며
$("#header").attr("style", "background:red")
$(".info").html("뮤직듣기1이 드래그 중 입니다.")헤더에.attr을 사용하여 스타일 백그라운드 를 바꿔줍니다.
그리고 운영체제가 나오는 info에 .html을 사용하여 문구도 바꿔줍니다.
그 후
stop도 만들어주면 드래그 stop할때 나타나는 효과를 정해줍니다.
$("#header").removeAttr("style");
$("#header h1").removeAttr("style");
$(".info").html("");헤더에 준 style을 removeAttr을 이용해 지워줍니다.
info에 넣어준 문구도 빈문자열로 바꿔주고,
함수 UserOSInfo()를 넣어주어 다시 os가 나오게 해줍니다.
function UserOSInfo() {
// navigator.platform 값을 이용하여 사용자 운영체제 정보를 가져옴
const osInfo = navigator.platform;
const width = window.innerWidth;
const height = window.innerHeight;
// 결과를 출력
document.querySelector('.info').innerHTML = `Your OS is ${osInfo} ${width} x ${height} pixels.`;
}
UserOSInfo()
}