js实现棋盘
使用HTML和JavaScript实现棋盘
创建一个棋盘可以通过HTML表格结合JavaScript动态生成。以下是一个简单的实现方法：
<!DOCTYPE html>
<html>
<head>
<title>棋盘</title>
<style>
table {
border-collapse: collapse;
}
td {
width: 50px;
height: 50px;
border: 1px solid black;
}
.black {
background-color: black;
}
.white {
background-color: white;
}
</style>
</head>
<body>
<div id="chessboard"></div>
<script>
const boardSize = 8;
const chessboard = document.getElementById('chessboard');
const table = document.createElement('table');
for (let i = 0; i < boardSize; i++) {
const row = document.createElement('tr');
for (let j = 0; j < boardSize; j++) {
const cell = document.createElement('td');
cell.className = (i + j) % 2 === 0 ? 'white' : 'black';
row.appendChild(cell);
}
table.appendChild(row);
}
chessboard.appendChild(table);
</script>
</body>
</html>添加交互功能
可以为棋盘添加点击事件，让用户能够与棋盘交互：
// 在上面的script标签内添加
table.addEventListener('click', function(event) {
if (event.target.tagName === 'TD') {
event.target.style.backgroundColor = 'red';
}
});使用Canvas绘制棋盘
另一种方法是使用HTML5 Canvas元素绘制棋盘：
<canvas id="canvas" width="400" height="400"></canvas>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const size = 8;
const cellSize = canvas.width / size;
for (let i = 0; i < size; i++) {
for (let j = 0; j < size; j++) {
ctx.fillStyle = (i + j) % 2 === 0 ? 'white' : 'black';
ctx.fillRect(j * cellSize, i * cellSize, cellSize, cellSize);
ctx.strokeRect(j * cellSize, i * cellSize, cellSize, cellSize);
}
}
</script>实现可拖动的棋子
在Canvas棋盘上添加可拖动的棋子：
// 在上面的script标签内添加
const pieces = [];
// 添加棋子
function addPiece(x, y, color) {
pieces.push({x, y, color});
drawBoard();
}
// 重绘棋盘和棋子
function drawBoard() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制棋盘
for (let i = 0; i < size; i++) {
for (let j = 0; j < size; j++) {
ctx.fillStyle = (i + j) % 2 === 0 ? 'white' : 'black';
ctx.fillRect(j * cellSize, i * cellSize, cellSize, cellSize);
ctx.strokeRect(j * cellSize, i * cellSize, cellSize, cellSize);
}
}
// 绘制棋子
pieces.forEach(piece => {
ctx.beginPath();
ctx.arc(
piece.x * cellSize + cellSize/2,
piece.y * cellSize + cellSize/2,
cellSize/2 - 5,
0,
Math.PI * 2
);
ctx.fillStyle = piece.color;
ctx.fill();
ctx.stroke();
});
}
// 添加初始棋子
addPiece(3, 3, 'red');
addPiece(4, 4, 'blue');
// 实现拖动功能
let selectedPiece = null;
canvas.addEventListener('mousedown', e => {
const rect = canvas.getBoundingClientRect();
const x = (e.clientX - rect.left) / cellSize;
const y = (e.clientY - rect.top) / cellSize;
selectedPiece = pieces.find(p =>
Math.abs(p.x - Math.floor(x)) < 0.5 &&
Math.abs(p.y - Math.floor(y)) < 0.5
);
});
canvas.addEventListener('mousemove', e => {
if (selectedPiece) {
const rect = canvas.getBoundingClientRect();
selectedPiece.x = (e.clientX - rect.left) / cellSize;
selectedPiece.y = (e.clientY - rect.top) / cellSize;
drawBoard();
}
});
canvas.addEventListener('mouseup', () => {
if (selectedPiece) {
selectedPiece.x = Math.round(selectedPiece.x);
selectedPiece.y = Math.round(selectedPiece.y);
selectedPiece = null;
drawBoard();
}
});使用SVG创建棋盘
还可以使用SVG来创建棋盘：
<svg id="svgBoard" width="400" height="400"></svg>
<script>
const svg = document.getElementById('svgBoard');
const svgSize = 8;
const svgCellSize = 400 / svgSize;
for (let i = 0; i < svgSize; i++) {
for (let j = 0; j < svgSize; j++) {
const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute('x', j * svgCellSize);
rect.setAttribute('y', i * svgCellSize);
rect.setAttribute('width', svgCellSize);
rect.setAttribute('height', svgCellSize);
rect.setAttribute('fill', (i + j) % 2 === 0 ? 'white' : 'black');
rect.setAttribute('stroke', 'black');
svg.appendChild(rect);
}
}
</script>这些方法提供了不同技术实现棋盘的方式，可以根据项目需求选择最适合的方案。
