玩转CSS：打造属于你的纯CSS四子连珠游戏

2023-09-14 02:59:12

踏入CSS游戏开发的世界，我们开启一段奇妙的旅程，将创造一款风靡全球的经典游戏——四子连珠。这一次，我们将不使用任何编程语言，而是借助CSS的强大功能来实现。准备好了吗？让我们一起一探究竟！

一、布局游戏棋盘

首先，我们需要建立一个棋盘作为游戏的基础。使用HTML创建一个表格元素，设定合适的行数和列数来构建棋盘，并用CSS来设定棋盘的外观。

/* 棋盘容器 */
.board-container {
  width: 500px;
  height: 500px;
}

/* 棋盘网格 */
.board {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(6, 1fr);
  width: 100%;
  height: 100%;
}

二、设计棋子元素

接下来，我们需要创建棋子元素。使用一个HTML<div>元素来表示棋子，并用CSS来设定棋子的外观。这里，您可以自由选择棋子的形状和颜色，展现您的创意。

/* 棋子容器 */
.piece {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

/* 玩家1棋子 */
.piece--player1 {
  background-color: red;
}

/* 玩家2棋子 */
.piece--player2 {
  background-color: yellow;
}

三、实现棋子放置和游戏逻辑

现在，我们进入游戏逻辑部分。我们需要实现棋子的放置和判断胜负的逻辑。我们可以使用JavaScript来实现这些功能。

// 棋盘元素
const board = document.querySelector('.board');

// 玩家1和玩家2的棋子元素
const player1Pieces = document.querySelectorAll('.piece--player1');
const player2Pieces = document.querySelectorAll('.piece--player2');

// 当前玩家
let currentPlayer = 1;

// 棋子放置事件监听器
board.addEventListener('click', (event) => {
  // 获取点击的列
  const column = event.target.cellIndex;

  // 检查该列是否已满
  if (board.children[column].children.length >= 6) {
    alert('该列已满！');
    return;
  }

  // 创建新的棋子元素
  const newPiece = document.createElement('div');
  newPiece.classList.add('piece');
  currentPlayer === 1 ? newPiece.classList.add('piece--player1') : newPiece.classList.add('piece--player2');

  // 将棋子添加到棋盘上
  board.children[column].appendChild(newPiece);

  // 检查胜负
  checkWinner();

  // 切换玩家
  currentPlayer = currentPlayer === 1 ? 2 : 1;
});

// 检查胜负
function checkWinner() {
  // 检查水平方向是否有四子连珠
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 4; j++) {
      if (board.children[i].children[j].classList.contains('piece--player1') &&
          board.children[i].children[j+1].classList.contains('piece--player1') &&
          board.children[i].children[j+2].classList.contains('piece--player1') &&
          board.children[i].children[j+3].classList.contains('piece--player1')) {
        alert('玩家1获胜！');
        return;
      }

      if (board.children[i].children[j].classList.contains('piece--player2') &&
          board.children[i].children[j+1].classList.contains('piece--player2') &&
          board.children[i].children[j+2].classList.contains('piece--player2') &&
          board.children[i].children[j+3].classList.contains('piece--player2')) {
        alert('玩家2获胜！');
        return;
      }
    }
  }

  // 检查垂直方向是否有四子连珠
  for (let i = 0; i < 7; i++) {
    for (let j = 0; j < 3; j++) {
      if (board.children[j].children[i].classList.contains('piece--player1') &&
          board.children[j+1].children[i].classList.contains('piece--player1') &&
          board.children[j+2].children[i].classList.contains('piece--player1') &&
          board.children[j+3].children[i].classList.contains('piece--player1')) {
        alert('玩家1获胜！');
        return;
      }

      if (board.children[j].children[i].classList.contains('piece--player2') &&
          board.children[j+1].children[i].classList.contains('piece--player2') &&
          board.children[j+2].children[i].classList.contains('piece--player2') &&
          board.children[j+3].children[i].classList.contains('piece--player2')) {
        alert('玩家2获胜！');
        return;
      }
    }
  }

  // 检查右下到左上方向是否有四子连珠
  for (let i = 0; i < 3; i++) {
    for (let j = 0; j < 4; j++) {
      if (board.children[i].children[j].classList.contains('piece--player1') &&
          board.children[i+1].children[j+1].classList.contains('piece--player1') &&
          board.children[i+2].children[j+2].classList.contains('piece--player1') &&
          board.children[i+3].children[j+3].classList.contains('piece--player1')) {
        alert('玩家1获胜！');
        return;
      }

      if (board.children[i].children[j].classList.contains('piece--player2') &&
          board.children[i+1].children[j+1].classList.contains('piece--player2') &&
          board.children[i+2].children[j+2].classList.contains('piece--player2') &&
          board.children[i+3].children[j+3].classList.contains('piece--player2')) {
        alert('玩家2获胜！');
        return;
      }
    }
  }

  // 检查左下到右上方向是否有四子连珠
  for (let i = 3; i < 6; i++) {
    for (let j = 0; j < 4; j++) {
      if (board.children[i].children[j].classList.contains('piece--player1') &&
          board.children[i-1].children[j+1].classList.contains('piece--player1') &&
          board.children[i-2].children[j+2].classList.contains('piece--player1') &&
          board.children[i-3].children[j+3].classList.contains('piece--player1')) {
        alert('玩家1获胜！');
        return;
      }

      if (board.children[i].children[j].classList.contains('piece--player2') &&
          board.children[i-1].children[j+1].classList.contains('piece--player2') &&
          board.children[i-2].children[j+2].classList.contains('piece--player2') &&
          board.children[i-3].children[j+3].classList.contains('piece--player2')) {
        alert('玩家2获胜！');
        return;
      }
    }
  }
}