PHP实现8行不同样式棋盘格循环的技术求助

Hey Ryan, awesome question! When you need to generate repeated elements with varying styles (like your 8-row chessboard), using arrays to store your style configurations and loops to render each row is hands down the cleanest and most efficient approach. Let's walk through how to pull this off, with practical examples for common tech stacks.

Core Approach: Centralize Styles + Loop Through Them #

The main goal is to avoid writing redundant code for each row. We’ll store all 8 unique line styles/colors in an array, then loop through that array to render each row with its corresponding style. This follows the DRY (Don't Repeat Yourself) principle, making your code easier to maintain and modify.

Example 1: Using JavaScript + Canvas #

If you’re drawing the chessboard directly with Canvas, this method keeps everything self-contained:

// Step 1: Define your 8 unique row styles in an array
const rowStyles = [
  { color: '#ff0000', lineWidth: 1, lineDash: [] },       // Red solid line
  { color: '#00ff00', lineWidth: 2, lineDash: [5, 5] },   // Green dashed line
  { color: '#0000ff', lineWidth: 1, lineDash: [10,2,2,2] },// Blue dash-dot line
  { color: '#ffcc00', lineWidth: 3, lineDash: [] },       // Yellow thick solid
  { color: '#9933ff', lineWidth: 2, lineDash: [8,3] },    // Purple long dash
  { color: '#ff6666', lineWidth: 1, lineDash: [3,1] },    // Pink tiny dash
  { color: '#00cccc', lineWidth: 2, lineDash: [12,4,4,4] },// Cyan double dash-dot
  { color: '#333333', lineWidth: 3, lineDash: [6,6] }     // Dark gray thick dash
];

// Step 2: Set up Canvas
const canvas = document.getElementById('chessboard');
const ctx = canvas.getContext('2d');
const squareSize = 50;
const totalRows = 8;
const totalCols = 8;

canvas.width = totalCols * squareSize;
canvas.height = totalRows * squareSize;

// Step 3: Loop through each row and render
for (let row = 0; row < totalRows; row++) {
  // Grab the style for the current row
  const { color, lineWidth, lineDash } = rowStyles[row];
  ctx.strokeStyle = color;
  ctx.lineWidth = lineWidth;
  ctx.setLineDash(lineDash);

  // Draw each square in the row
  for (let col = 0; col < totalCols; col++) {
    const x = col * squareSize;
    const y = row * squareSize;

    // Draw square border
    ctx.strokeRect(x, y, squareSize, squareSize);
    // Fill alternating chessboard background
    ctx.fillStyle = (row + col) % 2 === 0 ? '#f0f0f0' : '#ffffff';
    ctx.fillRect(x, y, squareSize, squareSize);
  }
}

Example 2: Using HTML/CSS + JavaScript #

If you’re building the chessboard with DOM elements, you can map styles to CSS classes and loop to create rows/squares:

<div id="chessboard"></div>

.chess-row {
  display: flex;
}
.chess-square {
  width: 50px;
  height: 50px;
}
/* Define your 8 unique line styles as CSS classes */
.style-0 { border: 1px solid #ff0000; }
.style-1 { border: 2px dashed #00ff00; }
.style-2 { border: 1px dotted #0000ff; }
.style-3 { border: 3px solid #ffcc00; }
.style-4 { border: 2px dashed #9933ff; }
.style-5 { border: 1px dotted #ff6666; }
.style-6 { border: 2px double #00cccc; }
.style-7 { border: 3px dashed #333333; }
/* Chessboard background colors */
.light-bg { background-color: #f0f0f0; }
.dark-bg { background-color: #ffffff; }

const chessboard = document.getElementById('chessboard');
const totalRows = 8;
const totalCols = 8;

for (let row = 0; row < totalRows; row++) {
  const rowElement = document.createElement('div');
  rowElement.classList.add('chess-row');

  for (let col = 0; col < totalCols; col++) {
    const square = document.createElement('div');
    // Apply the row's unique style class
    square.classList.add('chess-square', `style-${row}`);
    // Apply alternating background
    square.classList.add((row + col) % 2 === 0 ? 'light-bg' : 'dark-bg');
    rowElement.appendChild(square);
  }

  chessboard.appendChild(rowElement);
}

Why This Works #

By storing all styles in a single array (or mapped to CSS classes), you:

• Eliminate redundant code (no copying/pasting 8 nearly identical blocks)
• Make style changes trivial (update one entry in the array/CSS instead of 8 places)
• Keep your logic scalable (add a 9th row just by adding one more style object/class)

内容的提问来源于stack exchange，提问作者Ryan