html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>黑白棋</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
.status-bar {
margin-bottom: 10px;
font-size: 20px;
font-weight: bold;
}
.board {
display: grid;
grid-template-columns: repeat(8, 50px);
grid-gap: 1px;
width: 400px; /* 8个单元格 * 50px + 7个间隙 * 1px */
}
.cell {
width: 50px;
height: 50px;
background-color: #0A0;
position: relative;
border: 1px solid #000;
cursor: pointer;
}
.disk {
width: 100%;
height: 100%;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
}
.black {
background-color: #000;
}
.white {
background-color: #FFF;
}
</style>
</head>
<body>
<div class="status-bar" id="statusBar">当前轮到：黑方</div>
<div id="board" class="board"></div>
<script>
const boardSize = 8;
let board = Array.from({length: boardSize}, () => Array(boardSize).fill(null));
let currentPlayer = 'black';
function initializeBoard() {
const boardElement = document.getElementById('board');
for (let i = 0; i < boardSize; i++) {
for (let j = 0; j < boardSize; j++) {
const cell = document.createElement('div');
cell.className = 'cell';
cell.dataset.row = i;
cell.dataset.col = j;
cell.addEventListener('click', cellClickHandler);
boardElement.appendChild(cell);
}
}
// 初始化棋盘中间的四个棋子
placeDisk(3, 3, 'white');
placeDisk(4, 4, 'white');
placeDisk(3, 4, 'black');
placeDisk(4, 3, 'black');
drawBoard();
}
function drawBoard() {
const boardElement = document.getElementById('board');
boardElement.innerHTML = '';
for (let i = 0; i < boardSize; i++) {
for (let j = 0; j < boardSize; j++) {
const cell = document.createElement('div');
cell.className = 'cell';
cell.dataset.row = i;
cell.dataset.col = j;
cell.addEventListener('click', cellClickHandler);
if (board[i][j]) {
const disk = document.createElement('div');
disk.className = `disk ${board[i][j]}`;
cell.appendChild(disk);
}
boardElement.appendChild(cell);
}
}
}
function cellClickHandler(event) {
const row = parseInt(event.target.dataset.row, 10);
const col = parseInt(event.target.dataset.col, 10);
makeMove(row, col);
}
function makeMove(x, y) {
if (board[x][y] !== null) return; // 该位置已被占用
const directions = [
[-1, -1], [-1, 0], [-1, 1],
[0, -1], [0, 1],
[1, -1], [1, 0], [1, 1]
];
let tilesToFlip = [];
for (let [dx, dy] of directions) {
let nx = x + dx;
let ny = y + dy;
let line = [];
while (nx >= 0 && nx < boardSize && ny >= 0 && ny < boardSize) {
if (board[nx][ny] === oppositeColor(currentPlayer)) {
line.push([nx, ny]);
nx += dx;
ny += dy;
} else if (board[nx][ny] === currentPlayer) {
tilesToFlip = tilesToFlip.concat(line);
break;
} else {
line = [];
break;
}
}
}
if (tilesToFlip.length > 0) {
board[x][y] = currentPlayer;
for (let [tx, ty] of tilesToFlip) {
board[tx][ty] = currentPlayer;
}
currentPlayer = oppositeColor(currentPlayer);
drawBoard();
updateStatusBar();
}
}
function placeDisk(x, y, color) {
board[x][y] = color;
}
function oppositeColor(color) {
return color === 'black' ? 'white' : 'black';
}
function updateStatusBar() {
const statusBarElement = document.getElementById('statusBar');
statusBarElement.textContent = `当前轮到：${currentPlayer === 'black' ? '黑方' : '白方'}`;
}
initializeBoard();
</script>
</body>
</html>