JQuery 체스판 구현 code_jquery

당시에는 아무 문제가 없다고 생각했는데 오늘 돌이켜보면 좀 재미있었다고 생각해서 모두에게 확인용으로 가져왔습니다.

먼저 체스 ​​말의 배열을 구현해야 하는데, 이는 의심할 바 없이 div CSS를 사용해야 합니다.

구체적인 코드는 Jquery로 만든 체스판을 보시면 됩니다(소스코드 보기).

처음에는 체스 말 유형별로 클래스를 작성했습니다. 사실 이는 비교적 어리석은 행동이었습니다. 우선, 이 CSS 코드는 중복됩니다. 둘째, 리스너를 체스 조각 div에 바인딩하는 것이 더 번거로울 것입니다. 체스 조각 div인지 확인하려면 클래스 이름에 -b 및 -w 접미사를 사용하여 체스인지 확인해야 합니다. 조각. 그러나 체스 말의 공통 속성을 추출하고 qizi 클래스를 지정하면 두 문제 모두 쉽게 해결될 수 있습니다.

코드에서 이전 코드를 일부러 삭제하지 않았는데, 댓글 달린 코드에서 보실 수 있습니다. 흑백 플래그를 모두 이동 가능하게 만들기 위해 양쪽에 메서드를 작성해야 했습니다. 이는 충분히 추상화하지 않은 결과입니다.

다음 단계는 드래그를 구현하는 것입니다. 이에 대해서는

패키지 다운로드 주소

콘텐츠 출처: http를 참조하세요. :/ /buhutuu.cn/?p=783