用js写一个五子棋游戏
时间: 2024-04-16 16:28:22 浏览: 19
好的,下面是一个用 JavaScript 编写的简单五子棋游戏的示例代码:
```javascript
// 创建一个二维数组来表示棋盘
const board = [];
const ROWS = 15;
const COLS = 15;
for (let i = 0; i < ROWS; i++) {
board[i] = [];
for (let j = 0; j < COLS; j++) {
board[i][j] = 0; // 0 表示空白位置
}
}
let currentPlayer = 1; // 当前玩家,1 表示黑棋,2 表示白棋
// 点击棋盘时触发的事件处理函数
function handleClick(row, col) {
if (board[row][col] === 0) { // 只有空白位置可以下棋
board[row][col] = currentPlayer;
drawBoard();
if (checkWin(row, col)) {
const winner = currentPlayer === 1 ? '黑棋' : '白棋';
alert(`${winner}获胜!`);
reset();
return;
}
currentPlayer = currentPlayer === 1 ? 2 : 1; // 切换当前玩家
}
}
// 检查是否有玩家获胜
function checkWin(row, col) {
const directions = [
[1, 0], // 水平方向
[0, 1], // 垂直方向
[1, 1], // 右下对角线方向
[1, -1] // 左下对角线方向
];
for (const [dx, dy] of directions) {
let count = 1;
let r = row + dx;
let c = col + dy;
while (r >= 0 && r < ROWS && c >= 0 && c < COLS && board[r][c] === currentPlayer) {
count++;
r += dx;
c += dy;
}
r = row - dx;
c = col - dy;
while (r >= 0 && r < ROWS && c >= 0 && c < COLS && board[r][c] === currentPlayer) {
count++;
r -= dx;
c -= dy;
}
if (count >= 5) {
return true; // 找到获胜的情况
}
}
return false; // 没有找到获胜的情况
}
// 绘制棋盘
function drawBoard() {
const container = document.getElementById('container');
container.innerHTML = '';
for (let i = 0; i < ROWS; i++) {
for (let j = 0; j < COLS; j++) {
const cell = document.createElement('div');
cell.className = 'cell';
cell.addEventListener('click', () => handleClick(i, j));
if (board[i][j] === 1) {
cell.classList.add('black');
} else if (board[i][j] === 2) {
cell.classList.add('white');
}
container.appendChild(cell);
}
}
}
// 重置游戏
function reset() {
for (let i = 0; i < ROWS; i++) {
for (let j = 0; j < COLS; j++) {
board[i][j] = 0;
}
}
currentPlayer = 1;
drawBoard();
}
drawBoard();
```
你可以在 HTML 中添加一个 id 为 "container" 的 div 元素来显示棋盘。CSS 样式可以根据自己的喜好进行自定义,例如设置黑棋和白棋的样式。在浏览器中运行该代码,就可以进行五子棋游戏了。希望对你有所帮助!