이 레슨은 Gamedev Canvas tutorial.의 10개 중 9 번째 단계입니다. 당신은 Gamedev-Canvas-workshop/lesson9.html. 이 소스코드에서 이 수업의 교훈을 찾을 수 있습니다.

경기 자체가 사실상 끝났으므로, 이를 다듬는 작업을 해봅시다. 우리는 이미 키보드로 조종하는 코드를 추가했지만 마우스 조종하는 코드를 쉽게 추가할 수 있습니다.

마우스 이동 감지하기

마우스 움직임을 감지하기 위해 감지를 하는 것은 키 감지를 하는 것보다 훨씬 더 쉽습니다. 우리가 필요한 것은 mousemove 이 이벤트 감지입니다. 이 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의 위치(패들 왼쪽 가장자리에 배치되어 있다)는 패들 width의 반을 뺀 relativeX의 값으로 설정되므로 이동은 실제로 패들 가운데 상대적으로 이동이 됩니다.

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

코드 비교하기

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

Exercise: 패들이 캔버스 양쪽 가장자리에서 반만 잘려나가 보일 것 입니다. 패들 이동 제한 경계를 조정해 보세요.

다음 단계

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

문서 태그 및 공헌자

태그: 
이 페이지의 공헌자: E.Chong_Ju_Noel
최종 변경자: E.Chong_Ju_Noel,