午休忽然想起我奶奶喜欢下的一种古老的五子棋游戏，于是花了半小时开发出来了～
源代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>棋盘图案</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #faf1c0;
}
canvas {
background-color: #DAA520; /* 黄棕色 */
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="chessboard" width="600" height="600"></canvas>
<script>
const canvas = document.getElementById('chessboard');
const ctx = canvas.getContext('2d');
// 棋子信息存储
let pieces = [];
// 棋盘信息存储
let board = { size: canvas.width, margin: canvas.width * 0.05, step: (canvas.width - canvas.width * 0.1) / 4 };
board.drawableSize = board.size - 2 * board.margin;
// 当前拖拽的棋子
let currentPiece = null;
function drawPiece(x, y, color, isDragging = false) {
const radius = board.size / 28; // 棋子的半径，可以根据需要调整
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.fillStyle = color;
ctx.fill();
if (isDragging) {
ctx.strokeStyle = 'red';
ctx.stroke();
}
ctx.closePath();
return { x, y, radius, color };
}
function drawChessboard() {
ctx.clearRect(0, 0, board.size, board.size);
for (let i = 0; i <= 4; i++) {
ctx.moveTo(board.margin, board.margin + i * board.step);
ctx.lineTo(board.margin + board.drawableSize, board.margin + i * board.step);
ctx.moveTo(board.margin + i * board.step, board.margin);
ctx.lineTo(board.margin + i * board.step, board.margin + board.drawableSize);
}
let size = board.size
let step = board.step
let margin = board.margin
// 画对角线
ctx.moveTo(margin, margin);
ctx.lineTo(size-margin, size-margin);
ctx.moveTo(margin, size-margin);
ctx.lineTo(size-margin, margin);
ctx.moveTo(margin, 2*step+margin);
ctx.lineTo(2 * step+margin, size-margin);
ctx.moveTo(2*step+margin, margin);
ctx.lineTo(size-margin, 2 * step+margin);
ctx.moveTo(margin, 2 * step+margin);
ctx.lineTo(2 * step+margin, margin);
ctx.moveTo(2*step+margin, size-margin);
ctx.lineTo(size-margin, 2*step+margin);
ctx.stroke();
ctx.stroke();
}
// 初始化棋子
function initPieces() {
pieces = [];
// 画白色棋子
for (let i = 0; i <= 4; i++) {
pieces.push(drawPiece(i * board.step + board.margin, board.margin, 'white'));
}
// 画黑色棋子
for (let i = 0; i <= 4; i++) {
pieces.push(drawPiece(i * board.step + board.margin, board.size - board.margin, 'black'));
}
}
// 检测坐标是否在棋子上
function isPieceUnderCoordinate(x, y, piece) {
const distance = Math.sqrt((x - piece.x) ** 2 + (y - piece.y) ** 2);
return distance < piece.radius;
}
// 开始拖拽
canvas.onmousedown = function(event) {
const rect = canvas.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
for (const piece of pieces) {
if (isPieceUnderCoordinate(x, y, piece)) {
currentPiece = piece;
break;
}
}
};
// 拖拽移动
canvas.onmousemove = function(event) {
if (currentPiece) {
const rect = canvas.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
drawChessboard();
for (const piece of pieces) {
if (piece === currentPiece) {
drawPiece(x, y, piece.color, true);
} else {
drawPiece(piece.x, piece.y, piece.color);
}
}
}
};
// 放下棋子
canvas.onmouseup = function(event) {
if (currentPiece) {
const rect = canvas.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
// 计算最接近的交点
const closestX = Math.round((x - board.margin) / board.step) * board.step + board.margin;
const closestY = Math.round((y - board.margin) / board.step) * board.step + board.margin;
// 更新棋子位置
currentPiece.x = closestX;
currentPiece.y = closestY;
drawChessboard();
for (const piece of pieces) {
drawPiece(piece.x, piece.y, piece.color);
}
}
currentPiece = null;
};
// 双击切换棋子颜色
canvas.ondblclick = function(event) {
const rect = canvas.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
for (const piece of pieces) {
if (isPieceUnderCoordinate(x, y, piece)) {
// 切换颜色
piece.color = piece.color === 'white' ? 'black' : 'white';
// 重新绘制棋盘和棋子
drawChessboard();
for (const piece of pieces) {
drawPiece(piece.x, piece.y, piece.color);
}
break;
}
}
};
drawChessboard();
initPieces();
</script>
</body>
</html>
效果图：
