마우스로 패들 조종하기

마우스 움직임을 감지하는 것은 키 누름을 감지하는 것보다 더욱 쉽습니다. 우리에게 필요한 모든 것은 mousemove 이벤트에 대한 리스너입니다. 이 keyup event 바로 아래에 이 행을 추가해보세요.

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

포인터 좌표에 따라 패들 위치를 업데이트할 수 있습니다. 다음의 핸들러 함수가 정확히 이것을 할 것입니다. 추가한 이전 줄 아래에 다음 함수를 추가해보세요.

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

이 함수에서 우리는 첫번째로 relativeX 값을 계산하는데, 이는 뷰포트 (e.clientX) 안에 있는 가로 마우스 위치에 캔버스의 좌측 끝과 뷰포트 (canvas.offsetLeft) 의 좌측 끝 사이의 거리를 뺀 값과 같습니다. 이는 캔버스의 좌측 끝과 마우스 포인터 사이의 거리와 같습니다. 상대적인 X 포인터 위치가 0보다 크고 캔버스 폭보다 적으면 포인터가 경계 내에 있게 되고, paddleX의 위치(패들 왼쪽 가장자리에 배치되어 있습니다)는 패들 폭의 반을 뺀 relativeX의 값으로 설정되므로 이동은 패들의 중앙과 관련될 것입니다.

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

지금까지 해왔던 코드를 한번 비교해보세요.

이제 우리는 완전한 게임을 할 수 있게 되었습니다. 우리는 몇 가지 작은 코드만으로 이 레슨을 마치게 될 것 입니다! — 마지막.

• 이전
• 다음