MouseEvent screenX 속성이란?
HTML DOM의 MouseEvent screenX 속성은 마우스 이벤트가 발생했을 때, 사용자의 화면(모니터)을 기준으로 한 마우스 포인터의 수평(X) 좌표를 픽셀 단위로 반환합니다.
이 속성은 일반적으로 screenY 속성과 함께 사용됩니다. screenX가 수평 좌표를 담당한다면, screenY는 수직(Y) 좌표를 반환하여 두 값을 조합하면 마우스 포인터의 정확한 화면상 위치를 파악할 수 있습니다.
참고로 screenX/screenY는 브라우저 창이 아닌 물리적 화면 전체를 기준으로 좌표를 계산한다는 점에서, 브라우저 뷰포트 기준의 clientX/clientY와 차이가 있습니다.
구문(Syntax)
screenX 값에 대한 참조를 반환하는 기본 문법은 다음과 같습니다.
MouseEventObject.screenX
예제
다음 예제는 screenX와 screenY 속성을 활용해 간단한 미니 게임을 구현한 것입니다. 사용자가 초록색(안전) 영역 안에서만 마우스를 이동시키고, 지정된 목표 지점에 도달하면 성공 메시지가 표시되며, 빨간색(위험) 영역에 진입하면 게임에서 패배합니다.
<!DOCTYPE html>
<html>
<head>
<title>MouseEvent screenX</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-screenX</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>코드 설명
위 코드의 핵심 로직은 다음과 같습니다.
1. 게임 시작: 'Start' 버튼을 클릭하면 gameStart() 함수가 실행되어 초록색 영역(#outer)에 mousemove 이벤트 리스너가 등록됩니다.
2. 좌표 추적: 마우스가 움직일 때마다 event.screenX와 event.screenY로 현재 마우스 위치의 화면 좌표를 가져옵니다.
3. 승패 판정: Y 좌표가 안전 구간(330~345)에 있으면 "Keep Going!" 메시지가 표시되고, 그 상태에서 X 좌표가 목표값(1171)에 도달하면 성공 처리 후 이벤트 리스너가 제거됩니다. 반면 위험 영역(빨간색)에 진입하면 패배 메시지와 함께 게임이 종료됩니다.
실행 결과
'Start' 버튼을 클릭하고 커서가 초록색(안전) 영역에 있는 경우
'Start' 버튼을 클릭하고 커서가 초록색(안전) 영역 끝에 도달한 경우
'Start' 버튼을 클릭하고 커서가 빨간색(위험) 영역에 진입한 경우
