当前位置：首页 > news >正文

完整指南：使用JavaScript从零开始构建中国象棋游戏

news 2025/7/2 23:01:28

引言

中国象棋，又被称为国际象棋，是一款起源于中国的古老棋类游戏。本文旨在为大家提供一个简单明了的步骤，教你如何使用JavaScript从零开始构建这款经典的棋类游戏。

1. 游戏简介

在中国象棋中，两方各有一军队，包括士、象、车、马、炮和卒等棋子，目标是将对方的“将”或“帅”给将死，达到胜利。

2. 准备工作

首先，确保你的开发环境中已经安装了JavaScript的运行环境。接下来，我们将创建一个简单的HTML页面来放置我们的棋盘和棋子。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>中国象棋</title><link rel="stylesheet" href="style.css">
</head>
<body><div id="chessboard"></div><script src="script.js"></script>
</body>
</html>

为了美观，我们还需要一些基本的样式。在同一目录下创建一个名为style.css的文件，并添加以下内容：

#chessboard {width: 320px;height: 320px;display: grid;grid-template-columns: repeat(8, 40px);grid-template-rows: repeat(8, 40px);
}.cell {width: 40px;height: 40px;border: 1px solid black;
}

3. 初始化棋盘

我们的棋盘由8x8的格子组成。接下来，我们将使用JavaScript来初始化这个棋盘。

首先，在同一目录下创建一个名为script.js的文件，并添加以下代码：

const chessboard = document.getElementById('chessboard');for (let i = 0; i < 8; i++) {for (let j = 0; j < 8; j++) {const cell = document.createElement('div');cell.classList.add('cell');if ((i + j) % 2 === 0) {cell.style.backgroundColor = 'white';} else {cell.style.backgroundColor = 'black';}chessboard.appendChild(cell);}
}

现在，当你打开HTML页面时，你应该能看到一个8x8的棋盘，其中白色和黑色的格子交替排列。

到此为止，我们已经完成了棋盘的基本设置。接下来，我们需要添加棋子，并使它们可以被玩家移动。

注意：为了简洁和清晰，本文中的代码可能不是最优的或最完整的实现。为了获得完整的项目和更多的优化技巧，请下载完整项目

4. 添加棋子

中国象棋的棋子包括：将、士、象、马、车、炮和卒。我们可以为每种棋子创建一个简单的表示。

首先，我们将在style.css中为棋子添加一些样式：

.piece {width: 36px;height: 36px;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-weight: bold;cursor: pointer;
}.red {background-color: red;color: white;
}.black {background-color: black;color: white;
}

接着，我们需要在script.js中定义棋子并放置在棋盘上。

const pieces = [{ type: '车', color: 'red' },{ type: '马', color: 'red' },// ... 其他红色棋子{ type: '车', color: 'black' },{ type: '马', color: 'black' },// ... 其他黑色棋子
];// 使用pieces数组初始化棋盘上的棋子
pieces.forEach(piece => {const pieceElement = document.createElement('div');pieceElement.classList.add('piece', piece.color);pieceElement.innerText = piece.type;chessboard.appendChild(pieceElement);
});

5. 为棋子添加移动功能

我们需要使玩家可以选择并移动棋子。首先，我们定义一个函数来处理棋子的点击事件：

let selectedPiece = null;function onPieceClick(event) {const pieceElement = event.target;if (selectedPiece) {selectedPiece.classList.remove('selected');}if (pieceElement === selectedPiece) {selectedPiece = null;} else {selectedPiece = pieceElement;selectedPiece.classList.add('selected');}
}chessboard.addEventListener('click', onPieceClick);

接着，在style.css中，我们为选中的棋子添加一个边框效果：

.selected {border: 2px solid gold;
}

现在，当你点击棋子时，它会被选中，并显示一个金色的边框。

6. 实现移动逻辑

为了简化实现，我们将假设任何棋子都可以在棋盘上自由移动。在真实的中国象棋规则中，每种棋子都有自己的移动规则，但为了保持本教程的简洁性，我们不会涉及这些细节。

我们要为棋盘的每一个单元格添加一个点击事件，当某个棋子被选中后，点击另一个单元格将会移动该棋子到该位置：

function onCellClick(event) {const cell = event.target;if (selectedPiece && cell.classList.contains('cell')) {cell.appendChild(selectedPiece);selectedPiece.classList.remove('selected');selectedPiece = null;}
}chessboard.addEventListener('click', onCellClick);

现在，你可以点击棋子选中它，然后点击一个单元格来移动它。

7. 实现基本的胜利条件

在中国象棋中，玩家胜利的目标是“将军”对方的“将”或“帅”。为了简化实现，我们可以添加一个简单的检查函数来看是否某一方的“将”或“帅”已被吃掉。

function checkVictory() {const redGeneral = document.querySelector('.red.piece:contains("将")');const blackGeneral = document.querySelector('.black.piece:contains("帅")');if (!redGeneral) {alert('黑方胜利！');location.reload(); // 重新加载页面以重新开始游戏} else if (!blackGeneral) {alert('红方胜利！');location.reload();}
}chessboard.addEventListener('click', checkVictory);