벽돌깨기 게임 - 마우스로 패들 조종하기

마우스 이동 감지하기 [ lesson09 단계의 설명 ]

마우스 움직임을 감지하는 것은 키 누름을 감지하는 것보다 더욱 쉽다.
필요한 것은 mousemove (en-US) 이벤트에 대한 리스너이니, 이 keyup event 바로 아래에 이 행을 추가

document.addEventListener("mousemove", mouseMoveHandler, false);

 

마우스 움직임에 따라 패들 이동하기

포인터 좌표에 따라 패들 위치를 업데이트할 수 있다. 다음의 핸들러 함수가 이것을 해주는것이고, 추가한 이전 줄 아래에 다음 함수를 추가해준다.

function mouseMoveHandler(e) {
    var relativeX = e.clientX - canvas.offsetLeft;
    if(relativeX > 0 && relativeX < canvas.width) {
        paddleX = relativeX - paddleWidth/2;
    }
}

이 함수에서 우리는 첫번째로 relativeX 값을 계산하는데, 이는 뷰포트 (e.clientX) 안에 있는 가로 마우스 위치에 캔버스의 좌측 끝과 뷰포트 (canvas.offsetLeft) 의 좌측 끝 사이의 거리를 뺀 값과 같습니다.

이는 캔버스의 좌측 끝과 마우스 포인터 사이의 거리와 같습니다. 상대적인 X 포인터 위치가 0보다 크고 캔버스 폭보다 적으면 포인터가 경계 내에 있게 되고, paddleX의 위치(패들 왼쪽 가장자리에 배치되어 있습니다)는 패들 폭의 반을 뺀 relativeX의 값으로 설정되므로 이동은 패들의 중앙과 연관될수밖에 없습니다.

 

이제 패들은 마우스 커서의 움직임을 따르겠지만, 움직임을 캔버스 크기로 제한하고 있기 때문에 어느 쪽에서도 완전히 사라지지 않게 되는것.