[CANVAS - 체스] 3. 체스말 이동하기

체스말을 클릭하여 이동을 해보자.

 

1. 이동의 정의

 

일단 여기서 이동이란 아래로 정의해보겠다.

 

1. 클릭한 체스말 이미지를 기억해두고

2. 그다음 클릭한 캔버스 내 지점으로 해당 이미지를 이동한다.

 

캔버스의 기능으로 생각해보면 이미지를 그리고, 이미지를 지우는 것이다. (내 생각은 일단 그렇다.)

 

일단 hover 부터 해보자. 

 

 

 

https://velog.io/@pandati0710/html-canvas-%EB%8B%A4%EA%B0%81%ED%98%95-hover-event-%EA%B5%AC%ED%98%84

html canvas 다각형 hover event 구현

 

https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event

Element: mousemove event - Web APIs | MDN

젤 빡센 부분이네. 이거는 이해하고 넘어가야 할 것 같다.

 

지금 부딪힌 부분은 내가 실제로 마우스를 위치해둔 곳이랑 캔버스 위의 마우스 위치랑 차이나는 부분이다. offset이 이상하게 잡힌듯..

 

offset 프로퍼티를 잘못잡았네. offsetLeft와 offsetTop으로 변경

 

2. 움직이기 위해서 미리 칸과 말이 1:1로 대응되는 2차원 배열이 필요할 것 같아서 만들어준다.

말을 옮길때마다 어차피 그림은 새로 그려줘야 하기때문에 배열 자체를 항상 그려주는 함수를 만들고자 함이다.

 

만들어줬다. 이제 클릭하면 해당 객체정보를 콘솔에 찍는것 까지 해보자.

 

find 함수를 이용해서 클릭한 좌표와 block의 좌표를 비교해서 찾아줄 수 있도록 했다.

 

결과는 아래 영상으로 첨부한다.

 

이로써 체스말 옮기는 것 까지 완료~