五子棋 177 行代码打造沉浸式游戏体验

2023-12-03 18:36:58

用 177 行简洁明快的代码，我们踏上了一段打造令人着迷的五子棋游戏之旅。从基础的 SVG 和 JS 到直观的 CSS，我们将手把手地实现每一个步骤，让您在本地轻松享受对战的乐趣。无需依赖或素材，这款五子棋游戏将带给您无与伦比的沉浸式体验。

代码起点：一张空白画布

我们的代码之旅从一张空白的 SVG 画布开始。使用简洁的代码，我们绘制了一个 15×15 的棋盘格，为五子棋的博弈奠定了基础。每个方格都等待着棋子的落子，随着棋局的展开，它们将被黑白两色填充。

const gridSize = 15;
const cellSize = 50;
const svg = document.querySelector('svg');

for (let row = 0; row < gridSize; row++) {
  for (let col = 0; col < gridSize; col++) {
    const cell = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
    cell.setAttribute('width', cellSize);
    cell.setAttribute('height', cellSize);
    cell.setAttribute('x', row * cellSize);
    cell.setAttribute('y', col * cellSize);
    cell.classList.add('cell');
    svg.appendChild(cell);
  }
}

赋予棋子生命：响应点击

空白的棋盘等待着棋子的降临。我们使用事件监听器，让棋盘格响应用户的点击。当某一格被点击时，我们通过创建和放置一个棋子元素来响应这一动作。棋子将被赋予与玩家相对应的颜色，黑白交替。

const cells = document.querySelectorAll('.cell');
let currentPlayer = 'white';

cells.forEach(cell => {
  cell.addEventListener('click', () => {
    if (cell.classList.contains('white') || cell.classList.contains('black')) {
      return;
    }
    
    const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
    circle.setAttribute('r', 20);
    circle.setAttribute('cx', parseInt(cell.getAttribute('x')) + cellSize / 2);
    circle.setAttribute('cy', parseInt(cell.getAttribute('y')) + cellSize / 2);
    circle.classList.add(currentPlayer);
    svg.appendChild(circle);
    
    if (currentPlayer === 'white') {
      currentPlayer = 'black';
    } else {
      currentPlayer = 'white';
    }
    
    checkWinner();
  });
});

胜负判定：五子连珠的荣耀

随着棋盘上棋子的不断落子，我们引入了一项至关重要的功能：胜负判定。我们扫描棋盘，检查水平、垂直和对角线方向上是否有五子连珠的情况。当五子连成一线时，获胜方将被宣布。

function checkWinner() {
  const winningCombinations = [
    [0, 1, 2, 3, 4],
    [5, 6, 7, 8, 9],
    [10, 11, 12, 13, 14],
    [15, 16, 17, 18, 19],
    [20, 21, 22, 23, 24],
    
    [0, 5, 10, 15, 20],
    [1, 6, 11, 16, 21],
    [2, 7, 12, 17, 22],
    [3, 8, 13, 18, 23],
    [4, 9, 14, 19, 24],
    
    [0, 6, 12, 18, 24],
    [4, 8, 12, 16, 20]
  ];
  
  for (let i = 0; i < winningCombinations.length; i++) {
    const combination = winningCombinations[i];
    const cells = combination.map(index => document.querySelector(`.cell:nth-child(${index + 1})`));
    const classes = cells.map(cell => cell.classList).flat();
    
    if (classes.includes('white') && !classes.includes('black') || classes.includes('black') && !classes.includes('white')) {
      alert(`${currentPlayer} wins!`);
      break;
    }
  }
}

美化棋盘：视觉享受

为了提升游戏的视觉体验，我们为棋盘和棋子添加了 CSS 样式。棋盘采用深棕色，营造出传统棋盘的氛围。棋子则采用黑白两色，醒目且易于区分。

svg {
  background-color: #8b4513;
}

.cell {
  fill: none;
  stroke: #333;
  stroke-width: 1;
}

.white {
  fill: white;
}

.black {
  fill: black;
}