当前位置：首页 > PHP

php实现国际棋盘

2026-02-15 12:20:04PHP

实现国际象棋棋盘的方法

使用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>';
?>

特点：

php实现国际棋盘