php实现国际棋盘

实现国际象棋棋盘的方法

使用PHP生成国际象棋棋盘可以通过HTML和CSS结合实现，利用表格或div布局来呈现黑白交替的方格。以下是两种常见方法：

使用HTML表格生成棋盘

通过嵌套循环创建8x8的表格，动态设置单元格背景色：

<?php
echo '<table border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">';
for ($row = 1; $row <= 8; $row++) {
    echo '<tr>';
    for ($col = 1; $col <= 8; $col++) {
        $color = ($row + $col) % 2 === 0 ? 'white' : 'black';
        echo '<td width="50" height="50" style="background-color: '.$color.';"></td>';
    }
    echo '</tr>';
}
echo '</table>';
?>

关键点：

• 外层循环控制行数（8行）
• 内层循环控制列数（8列）
• 通过($row + $col) % 2计算当前单元格颜色
• 设置固定宽高的单元格（示例为50px）

使用CSS Grid布局

通过PHP输出div元素结合CSS Grid实现更灵活的棋盘：

<?php
echo '<style>
.chess-board { 
    display: grid;
    grid-template-columns: repeat(8, 50px);
    width: 400px;
}
.square {
    height: 50px;
    width: 50px;
}
</style>';

echo '<div class="chess-board">';
for ($i = 0; $i < 64; $i++) {
    $color = (floor($i / 8) + $i % 8) % 2 ? 'black' : 'white';
    echo '<div class="square" style="background-color: '.$color.';"></div>';
}
echo '</div>';
?>

优势：

• 响应式布局更灵活
• 可通过CSS轻松调整样式
• 使用单层循环简化逻辑

添加棋子和坐标标记

增强版棋盘可加入坐标标识和棋子符号：

<?php
$pieces = [
    ['♜','♞','♝','♛','♚','♝','♞','♜'],
    array_fill(0, 8, '♟'),
    array_fill(0, 8, ''),
    // ...中间空行...
    array_fill(0, 8, '♙'),
    ['♖','♘','♗','♕','♔','♗','♘','♖']
];

echo '<table border="1" style="border-collapse: collapse; text-align: center; font-size: 32px;">';
for ($row = 0; $row < 8; $row++) {
    echo '<tr><td>'.(8-$row).'</td>';
    for ($col = 0; $col < 8; $col++) {
        $color = ($row + $col) % 2 ? '#EEEED2' : '#769656';
        echo '<td width="50" height="50" style="background: '.$color.';">'.$pieces[$row][$col].'</td>';
    }
    echo '</tr>';
}
echo '<tr><td></td>';
foreach (range('a','h') as $letter) echo '<td>'.$letter.'</td>';
echo '</tr></table>';
?>

特点：

• 使用Unicode象棋符号
• 添加行号（1-8）和列标（a-h）
• 采用真实棋盘配色（米色和绿色）

注意事项

1. Unicode符号需要确保页面编码为UTF-8
2. 实际项目中建议将样式分离到CSS文件
3. 棋子位置数据可存储在二维数组中便于逻辑处理
4. 考虑使用SVG或Canvas实现更复杂的交互功能

以上方法可根据实际需求选择，表格方案兼容性更好，CSS Grid方案更适合现代浏览器。