✅ 문제
게임을 좋아하는 재우는 이번에 배운 자바스크립트를 활용해서 청기 백기 게임을 만들어 보려고 합니다.
마우스를 이용해서 마우스 왼쪽 버튼을 누르면 청기(flagBlue)가 올라가고, 마우스 오른쪽 버튼을 누르면 백기(flagWhite)가 올라가도록 기획을 했는데요.
나름대로 열심히 고민해서 코드를 작성해봤지만 좀처럼 구현하기가 쉽지 않고 자꾸만 오른쪽 클릭을 할 때 브라우저의 메뉴창이 나타나서 어떻게 해야할지 막막해 하는 중입니다.
재우를 위해서
마우스 왼쪽 버튼을 누른 순간 청기(flagBlue)에 'up'이라는 클래스 속성값이 추가되고, 마우스 오른쪽 버튼을 누른 순간 백기(flagWhite)에 'up'이라는 클래스 속성값이 추가되는 flagUp 함수를 완성해 주세요.
웹 페이지에서 contextmenu 이벤트가 발생하면 브라우저의 메뉴창이 나타나지 않도록 막아주세요.
참고로 flagUp 함수 안에 있는 setTimeout 함수는 두 번째 파라미터로 전달한 값의 밀리초 만큼의 시간 이후에 첫 번째 파라미터로 전달한 함수를 실행시켜주는 함수입니다.
✅ 기본 설정
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>청기 백기</title>
</head>
<body>
<div class="container">
<img src="imgs/flag-blue.png" alt="flag" class="flag flag-blue">
<img src="imgs/flag-white.png" alt="flag" class="flag flag-white">
</div>
<script src="index.js"></script>
</body>
</html>* {
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-size: cover;
background-position: center;
background-image: url('imgs/bg.png');
background-repeat: no-repeat;
}
body::before {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #333333;
opacity: 0.5;
content: '';
}
.container {
display: flex;
justify-content: space-around;
align-items: center;
width: 80%;
height: 500px;
max-width: 1000px;
}
.flag {
width: 35%;
transition-duration: .3s;
}
.flag-blue {
transform: rotate(25deg);
}
.flag-white {
transform: rotate(-25deg) scaleX(-1);
}
.flag-blue.up {
transform: rotate(-25deg) translateY(-40%);
}
.flag-white.up {
transform: rotate(25deg) scaleX(-1) translateY(-40%);
}+이미지 파일도 있음
☑️ JS 코드 분석
const flagBlue = document.querySelector('.flag-blue');
const flagWhite = document.querySelector('.flag-white');청기 및 백기에 해당하는 값을 가져옵니다.
function reset() {
document.querySelector('.up').classList.remove('up');
}해당 함수는 리셋 함수로,
up이라는 클래스가 지워짐을 의미
// 1. flagUp 함수를 완성해 주세요.
function flagUp(e) {
if(e.button === 0) {
flagBlue.classList.add('up');
}
else if(e.button === 2) {
flagWhite.classList.add('up');
}
setTimeout(reset, 500);
}
click이나contextmenu등의 이벤트가 발생할 경우에 해당 청기백기 태그에up클래스를 추가함
그리고 0.5초 뒤에 해당 클래스 사라지면서, 이벤트 함수 기능도 사라짐
// 2. 마우스 오른쪽 버튼 클릭시 나타나는 메뉴창을 막아주세요.
document.addEventListener('contextmenu', function(event){
event.preventDefault();
});마우스 오른쪽 클릭할 때, 기존의 브라우저 메뉴가 뜨는 이벤트 효과를 제거한다.
document.addEventListener('mousedown', flagUp);마우스를 누르는 순간 해당
flagUp함수의 기능이 작동!
결과물
이미지 파일은 없으니까 따로 다운 받아야 함.
