cm-chessboard 项目教程
1. 项目的目录结构及介绍
cm-chessboard 项目的目录结构如下:
cm-chessboard/
├── assets/
│ └── chessboard.css
├── examples/
│ ├── simple-boards.html
│ ├── responsive-board.html
│ ├── enable-input.html
│ ├── validate-moves.html
│ ├── pieces-animation.html
│ ├── extensions/
│ │ ├── markers-extension.html
│ │ ├── arrows-extension.html
│ │ ├── html-layer-extension.html
│ │ ├── promotion-dialog-extension.html
│ │ └── accessibility-extension.html
│ ├── different-styles.html
│ ├── pointer-events.html
│ └── destroy-many-boards.html
├── src/
│ ├── Chessboard.js
│ ├── model/
│ │ └── Position.js
│ └── utils/
│ └── ...
├── index.html
├── README.md
└── package.json
目录介绍
assets/
: 包含项目的样式文件,如chessboard.css
。examples/
: 包含多个示例文件,展示如何使用 cm-chessboard。src/
: 包含项目的主要源代码文件,如Chessboard.js
和Position.js
。index.html
: 项目的主页面。README.md
: 项目的说明文档。package.json
: 项目的配置文件,包含依赖和脚本信息。
2. 项目的启动文件介绍
项目的启动文件是 index.html
,它包含了项目的入口点和基本配置。以下是 index.html
的主要内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cm-chessboard</title>
<link rel="stylesheet" href="assets/chessboard.css"/>
<link rel="stylesheet" href="examples/styles/examples.css"/>
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0"/>
</head>
<body>
<h1>cm-chessboard</h1>
<p><i>A JavaScript chessboard which is lightweight, ES6 module based, responsive, SVG rendered, and without dependencies.</i></p>
<p>cm-chessboard is the chessboard of <a href="https://www.chessmail.de">chessmail</a> and is used every day by thousands of players. It works, it is cool, and it is easy to use 👍</p>
<p><a href="https://github.com/shaack/cm-chessboard">Repository and documentation on GitHub</a></p>
<div>
<h2>Examples</h2>
<ul>
<li><a href="examples/simple-boards.html">Simple chessboards (view only)</a></li>
<li><a href="examples/responsive-board.html">Responsive chessboard</a></li>
<li><a href="examples/enable-input.html">Input enabled without validation</a></li>
<li><a href="examples/validate-moves.html">Input enabled with move validation and promotion dialog</a> 🔥</li>
<li><a href="examples/pieces-animation.html">Set different positions with animation</a></li>
<li><a href="examples/extensions/markers-extension.html">Context input mark squares and detect clicks on fields</a></li>
<li><a href="examples/different-styles.html">Different styles and piece sets</a> 🎨</li>
<li><a href="examples/pointer-events.html">Pointer events on squares</a> 🆕</li>
<li><a href="examples/destroy-many-boards.html">Stress test 5000 boards created and destroyed</a> 🤓 👍</li>
</ul>
<h3>Examples using the cm-chessboard extensions</h3>
<ul>
<li><a href="examples/extensions/markers-extension.html">Markers extension</a></