正文

五子棋入门：JavaScript轻松实现经典棋局

/0 浏览量
0321

引言

五子棋是一种古老而经典的棋类游戏，起源于中国。它简单易学，却蕴含着丰富的策略和技巧。随着互联网的发展，五子棋也成为了许多在线游戏平台的热门项目。本文将介绍如何使用JavaScript轻松实现一个五子棋游戏。

系统设计

游戏界面

首先，我们需要设计一个五子棋的游戏界面。以下是HTML和CSS的基本代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>五子棋</title>
<style>
  #chessboard {
    width: 400px;
    height: 400px;
    border-collapse: collapse;
  }
  .cell {
    width: 20px;
    height: 20px;
    border: 1px solid #000;
    text-align: center;
    line-height: 20px;
  }
</style>
</head>
<body>
<table id="chessboard"></table>
<script src="game.js"></script>
</body>
</html>

游戏逻辑

接下来，我们需要编写JavaScript代码来实现游戏逻辑。以下是游戏的核心代码：

const ROWS = 15;
const COLS = 15;
let board = Array.from({ length: ROWS }, () => Array(COLS).fill(null));
let currentPlayer = 'X';

function createBoard() {
  const chessboard = document.getElementById('chessboard');
  for (let row = 0; row < ROWS; row++) {
    const tr = document.createElement('tr');
    for (let col = 0; col < COLS; col++) {
      const td = document.createElement('td');
      td.className = 'cell';
      td.onclick = () => placeChess(row, col);
      tr.appendChild(td);
    }
    chessboard.appendChild(tr);
  }
}

function placeChess(row, col) {
  if (board[row][col] !== null) return;
  board[row][col] = currentPlayer;
  const cell = document.querySelector(`#chessboard tr:nth-child(${row + 1}) td:nth-child(${col + 1})`);
  cell.textContent = currentPlayer;
  checkWin(row, col);
  currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
}

function checkWin(row, col) {
  const directions = [[1, 0], [0, 1], [1, 1], [1, -1]];
  for (const [dr, dc] of directions) {
    let count = 1;
    for (let i = 1; i <= 4; i++) {
      const newRow = row + dr * i;
      const newCol = col + dc * i;
      if (newRow >= 0 && newRow < ROWS && newCol >= 0 && newCol < COLS && board[newRow][newCol] === currentPlayer) {
        count++;
      } else {
        break;
      }
    }
    for (let i = 1; i <= 4; i++) {
      const newRow = row - dr * i;
      const newCol = col - dc * i;
      if (newRow >= 0 && newRow < ROWS && newCol >= 0 && newCol < COLS && board[newRow][newCol] === currentPlayer) {
        count++;
      } else {
        break;
      }
    }
    if (count >= 5) {
      alert(`${currentPlayer} 赢了！`);
      return;
    }
  }
}

createBoard();

游戏玩法

  1. 用户点击棋盘上的空格，放置自己的棋子（X或O）。
  2. 检查是否有玩家连成五子，如果有，则宣布该玩家获胜。
  3. 如果棋盘被填满且没有玩家获胜，则游戏平局。

总结

通过以上步骤，我们使用JavaScript成功实现了一个简单的五子棋游戏。这个游戏可以作为入门级的项目，帮助您了解JavaScript的基本语法和DOM操作。随着您对JavaScript的深入了解，您可以尝试添加更多的功能，例如悔棋、计时器等。

-- 展开阅读全文 --