캔버스3 [판교고 - 기술체크] 1-3. 동일한 타일 여부 확인 해당 내용은 판교고 사이드 프로젝트 진행시에 사용할 캔버스에 대한 학습 내용을 정리하였습니다. 동일한 타일 여부 확인 이전 게시물에서 타일을 마우스를 통해 드래그하는 기능까지 완료하였습니다. 이번에는 타일을 목표 타일에 인접하게 이동시켰을 때 동일한 타일인 경우 자동으로 목표 타일로 이동되는 기능을 추가해 보겠습니다. 타일을 이동시킬때마다 아래의 두가지를 확인합니다. 드래그 중인 타일이 타겟에 인접했는가 동일한 타일인가 조건 두가지를 모두 만족하는 경우 타일을 타겟의 위치로 이동시켜주면 완성됩니다. 두가지 조건을 타일을 이동시키는 코드에 추가하도록 하겠습니다. 먼저 두개의 타일이 동일한지 여부를 확인하는 isEqual 함수를 만들어보겠습니다. 타일은 사각형이기 때문에 가로와 세로의 길이가 동일하다면 같은.. 2023. 5. 15. [판교고 - 기술체크] 1-2. 캔버스에 타일 드래그로 이동 해당 내용은 판교고 사이드 프로젝트 진행시에 사용할 캔버스에 대한 학습 내용을 정리하였습니다. 타일을 마우스 드래그로 위치 이동 저번 게시물에서는 타일을 배치하는것까지 완료하였습니다. 이번 게시물에서는 배치된 타일을 마우스 드래그로 이동하는 것을 알아보았습니다. 이번에 진행 순서는 아래와 같습니다. document에 마우스 이벤트 등록 이벤트 좌표를 이용해서 클릭한 타일의 위치 이동 먼저 이벤트를 등록해보겠습니다. 캔버스에 마우스를 클릭했을 때 대상이 존재하는지 여부를 확인하여 존재하는 경우 마우스 드래그를 했을 때 클릭 지점과 마우스 드래그 지점 사이만큼 대상의 위치를 옮겨주면 됩니다. 이번에 추가한 전체 코드는 아래와 같습니다. 하나씩 알아보도록 하겠습니다. const update = false; c.. 2023. 4. 25. [판교고 - 기술체크] 1-1. 캔버스에 타일 배치 해당 내용은 판교고 사이드 프로젝트 진행시에 사용할 캔버스에 대한 학습 내용을 정리하였습니다. 🎮 게임 소개 판교고는 우봉고 보드게임과 동일한 규칙을 가지고 플레이할 수 있습니다. 게임 라운드마다 점수를 획득하여 최종적으로 가장 많은 점수를 획득한 사람이 우승하며 우승자에게는 판교로 이직할 수 있는 기회를 제공한다는 컨셉의 게임입니다. 🛠 기술 체크 판교고는 우봉고 보드게임과 동일한 규칙을 가지고 있습니다. 규칙에 대한 설명은 아래와 같습니다. 각자 개인판을 가지고 게임을 시작합니다. 개인판에서 주사위를 굴려 나온 값에 해당하는 칸에 그려진 타일 모양을 가져옵니다. 가져온 타일을 개인판의 빈칸에 알맞은 형태로 배치합니다. 먼저 배치한 사람이 해당 라운드에 승리합니다. 위의 규칙을 자바스크립트로 구현하기 .. 2023. 4. 21. 이전 1 다음
