[CANVAS - 체스] 5. 내가 클릭한 말 or 칸에 효과주기 현재 상태는 내가 제대로 말을 클릭 했는지 잘 모르는 상황이다. 효과를 좀 줘보자. 살짝 형광색(?) 같은 느낌으로 테두리를 칠하면 어떨까 한다. 클릭하면 네모칸 나오는 것 까지는 그렸다. strokeRect를 이용해서 그린것 까진 되었는데.. 다른 말을 클릭할 때 이전 stroke를 어떻게 없애는지가 핵심.. strokeStyle = 'transparent'는 없는건가... 일단 그냥 해당 칸의 색으로 다시 칠하는 방식으로 대체 했다. 결과는 아래와 같다. 더보기 [CANVAS - 체스] 4. 말 잡아먹기 이제 말 잡아먹는 기능을 구현하고자 한다. 일단 각 말이 갈수 있는 범위 구현은 나중에 하고, 한 말을 선택한 다음 다른 진영을 말을 클릭할 경우 그 말이 있는 위치로 가서 해당 말을 잡는 것으로 진행해보자. 이전에 이동했던 거랑 비슷해서 금방 적용시켰다. 다만 엉망진창으로 가는데 이건 나중에 수정하고, 현재 단점이 지금 내가 뭘 클릭했는지 모른다는 것이다. 이제 내가 클릭했을때 해당 말 또는 칸에 대해 효과를 주려고 한다. 더보기 [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 구현 서론 cavas에서 다각형 그리기 다각형 hover event 구현하기 결론 velog.io https://developer.mozilla.org/.. 더보기 이전 1 ··· 6 7 8 9 10 11 12 ··· 72 다음
