자바스크립트 내공기르기(8) -마우스이벤트 설치-

자바스크립트 내공기르기(8) 

-마우스이벤트 설치-

벽돌깨기 게임은 굳이 마우스를 사용하지 않더라도 즐거움을 느낄 수 있는 게임이다. 오히려 키보드로 게임을 조작하는 편이 안정적일 수 있다. 하지만 단순히 게임을 만들어보는 게 목표가 아니라 게임을 만들면서 내공을 키우는 것이 목표라면, 마우스 이벤트가 빠질 수 없다. 이번 포스팅에서는 마우스 이벤트를 만들어보자. 

1 『 마우스 이벤트 추가 』

> 이벤트 설정하는 부분에서 'mousemove'이벤트를 아래처럼 설정한다.

> document엘리먼트 하위로 addEventLister매서드에 'mousemove'를 인자값으로 넣어준다. 웹 브라우저의 기본 객체로써 mousemove,mouseup,mousedown 등.. 마우스 관련 이벤트가 탑재되어 있다. 사용자 마우스 움직임이 체크되면 mouseMoveHandler함수가 실행되도록 코드를 작성한다. 

 

2 『 mouseMoveHander 함수 추가 』

> 마우스움직임이 감지되면, 마우스무브핸들러 함수가 실행된다.

> mouseMoveHandler함수의 핵심은, paddle(게임에서 하단에 공을 받는 네모)의 X값과 사용자 마우스의 X값을 일치시키는 데에 있다.

 

> 우선 relativeX라는 변수값을 설정하고, 브라우저 내의 마우스X값이 아닌 브라우저 안에 있는 캔버스 속의 마우스의 좌표값을 구해야 한다. relativeX값을 위해서는 아래 그림을 보면 이해하기 쉽다.

> event.clientX는 웹 브라우저 창에서 좌측 상단( 0 , 0 )을 기준으로 사용자 마우스의 x축 거리를 의미한다.

 

> canvas.offsetLeft는, 웹 브라우저에서 canvas영역이 시작되기 전까지의 길이를 의미한다. 만일 event.clientX 값에서 canvas.offsetLeft 값을 뺀 값이 음수라면, 마우스는 웹 브라우저 좌측 시작점과 캔버스의 시작점 사이에 있다. 반대로 event.clentX 값에서 canvas.offsetLeft 값을 뺀 값이 양수라면, 마우스는 캔버스 내에 있거나 캔버스 우측에 있다.

> 위의 그림을 기본으로 캔버스 내의 마우스 위치를 알아내려면, 다음과 같은 계산이 필요하다. 만일, 마우스 위치가 캔버스 시작보다 우측에 있다면, ` e.clentX - canvas.offsetLeft > 0 `을 작성한다. 마우스 위치가 캔버스의 x축 크기보다 작은 좌측에 있다면, ' e.clientX - canvas.offsetLeft < canvas.width '을 코딩한다.

 

relativeX 값이, 위의 두 경우를 모두 만족하는 경우에 paddleX = relativeX값으로 일치시켜서 마우스의 움직임과 패달의 움직임이 같도록 만든다. 

 

paddleX = relativeX - paddleWidth/2 코드에서 paddleWidth/2를 빼는 이유는, relativeX값이 canvas.width와 같아지면, 페달이 보이지 않기 때문이다. 중복되는 paddleWidth값을 빼줘서 페달이 우측 끝에 사라지지 않도록 해준다.