HTML DOM MouseEvent screenY 속성이란?
HTML DOM에서 MouseEvent 객체의 screenY 속성은 마우스 이벤트가 발생한 순간, 마우스 포인터가 사용자의 물리적 화면(모니터)을 기준으로 한 세로(Y) 좌표를 픽셀 값으로 반환합니다. 브라우저 창이 아닌 실제 화면 전체를 기준으로 하기 때문에, 브라우저 창의 위치나 크기와 관계없이 일관된 좌표를 얻을 수 있다는 특징이 있습니다.
세로 좌표만으로는 위치를 특정할 수 없으므로, 일반적으로 가로(X) 좌표를 반환하는 screenX 속성과 함께 사용하는 것이 좋습니다.
문법(Syntax)
screenY 속성 값을 참조하는 방법은 다음과 같습니다.
MouseEventObject.screenY반환값은 마우스 포인터의 화면 기준 Y좌표에 해당하는 숫자(Number)입니다.
예제: screenY로 간단한 미니 게임 만들기
다음 예제는 mousemove 이벤트와 함께 screenY, screenX 속성을 활용한 간단한 미니 게임입니다. 초록색 '안전 구역' 안에서 커서를 목표 좌표까지 이동시키면 성공하고, 빨간색 '위험 구역'에 들어가면 게임이 종료됩니다.
<!DOCTYPE html>
<html>
<head>
<title>MouseEvent screenY</title>
<style>
* {
padding: 2px;
margin: 5px;
}
form {
width: 70%;
margin: 0 auto;
text-align: center;
}
#outer {
width: 70%;
margin: 0 auto;
padding: 0;
text-align: center;
border: 1px solid black;
height: 105px;
background-color: #28a745;
}
input[type="button"] {
border-radius: 10px;
}
#upper {
border-bottom: 1px solid black;
height: 40px;
margin: 0 0 15px 0;
background-color: #DC3545;
}
#lower {
border-top: 1px solid black;
height: 40px;
margin: 15px 0 0 0;
background-color: #DC3545;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>MouseEvent-screenY</legend>
<div id="outer">
<div id="upper"><h2>Danger</h2></div>
<div id="lower"><h2>Danger</h2></div>
</div>
<input type="button" id="start" value="Start" onclick="gameStart()">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById('divDisplay');
var gameDisplay = document.getElementById('outer');
function playGame(event) {
var x = event.screenX;
var y = event.screenY;
if (y > 330 && y < 345) {
divDisplay.textContent = 'Keep Going!';
if (x === 1171) {
divDisplay.textContent = 'Congrats! You Did it!';
gameDisplay.removeEventListener('mousemove', playGame);
}
} else {
divDisplay.textContent = 'You moved to DANGER area. You loose!';
gameDisplay.removeEventListener('mousemove', playGame);
}
}
function gameStart() {
gameDisplay.addEventListener('mousemove', playGame);
}
</script>
</body>
</html>실행 결과
① Start 버튼 클릭 후 커서가 초록색(안전) 영역에 있을 때 − 화면에 "Keep Going!" 메시지가 표시되며 게임이 진행됩니다.
② Start 버튼 클릭 후 커서가 초록색(안전) 영역 끝에 도달했을 때 − 목표 좌표에 도달하면 "Congrats! You Did it!" 메시지가 출력되고 게임이 성공적으로 종료됩니다.
③ Start 버튼 클릭 후 커서가 빨간색(위험) 영역으로 이동했을 때 − 위험 구역에 진입하면 실패 메시지가 표시되며 게임이 즉시 종료됩니다.
정리 및 참고 사항
- screenY: 사용자 화면(모니터) 기준 마우스 포인터의 세로(Y) 좌표
- screenX: 사용자 화면(모니터) 기준 마우스 포인터의 가로(X) 좌표
- clientX / clientY: 브라우저 뷰포트(화면 표시 영역) 기준 좌표
- pageX / pageY: 문서 전체(스크롤 영역 포함) 기준 좌표
즉, screenY는 브라우저 내부가 아닌 모니터 화면 전체를 기준으로 좌표를 계산한다는 점에서 clientY, pageY와 구별됩니다. 드래그 앤 드롭, 마우스 추적 게임, 화면 좌표 기반 UI 등 다양한 인터랙티브 요소를 구현할 때 유용하게 활용할 수 있습니다.