JQuery Chess Board Implementation Code _jquery

Source: Internet
Author: User
At that time did not feel anything, look back today, feel still a little meaning, bring to everyone to identify.

The first step is to implement the arrangement of the pieces, which no doubt have to use DIV+CSS.

The specific code can look at the chess board of jquery (see source code).

At first I wrote a class for every piece of chess, which was actually a stupid act. First, this CSS code will have redundancy. Second, in the pawn div binding listeners will be more trouble, to determine whether the pawn Div, I have to rely on the class name of the-B and-w suffix to judge whether the pieces. But if we extract the common attributes of the pieces and set up a class Qizi, then both of these problems can be solved.

In the code I deliberately did not remove the previous code, you can see in the code of the annotation. In order for black and white flags to move, I had to write a method on both sides, and you see, this is the consequence of not having enough abstraction.

The next step is to implement the drag, about this, you can refer to

Package Download Address

Content from: http://buhutuu.cn/?p=783

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.