前端技术搭建五子棋游戏
五子棋是一种流行的棋类游戏，目标是在棋盘上连续放置五个同色的棋子。利用前端技术，我们可以快速搭建一个简单的五子棋游戏。本文将为大家介绍如何使用 HTML、CSS 和 JavaScript 搭建一个基础的五子棋游戏，并附上完整的源码。
准备工作
首先，我们需要创建一个简单的网页结构。使用 HTML 来构建棋盘，CSS 进行样式调整，JavaScript 处理游戏逻辑。
1. HTML 结构
<!DOCTYPE html>
<html lang="zh">
<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>
<h1>五子棋游戏</h1>
<div id="chessboard"></div>
<script src="script.js"></script>
</body>
</html>
2. CSS 样式
接下来，我们为棋盘添加一些基本的样式。这将使棋盘看起来更加美观。
/* style.css */
body {
font-family: Arial, sans-serif;
text-align: center;
}
#chessboard {
display: grid;
grid-template-columns: repeat(15, 40px);
grid-template-rows: repeat(15, 40px);
margin: 20px auto;
border: 2px solid #333;
}
.cell {
width: 40px;
height: 40px;
border: 1px solid #999;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.cell:hover {
background-color: #f0f0f0;
}
.cell.x {
background-color: #fff;
}
.cell.o {
background-color: #000;
color: #fff;
}
3. JavaScript 逻辑
最后，我们编写 JavaScript 代码来处理棋子的放置和胜负判定等逻辑。
// script.js
const boardSize = 15; // 棋盘大小
let chessboard = []; // 棋盘数组
let currentPlayer = 'x'; // 当前玩家（x 或 o）
function initGame() {
const chessboardDiv = document.getElementById('chessboard');
for (let i = 0; i < boardSize; i++) {
chessboard[i] = [];
for (let j = 0; j < boardSize; j++) {
chessboard[i][j] = '';
const cell = document.createElement('div');
cell.className = 'cell';
cell.dataset.row = i;
cell.dataset.col = j;
cell.addEventListener('click', handleCellClick);
chessboardDiv.appendChild(cell);
}
}
}
function handleCellClick(event) {
const row = event.target.dataset.row;
const col = event.target.dataset.col;
if (chessboard[row][col] === '') {
chessboard[row][col] = currentPlayer;
event.target.classList.add(currentPlayer);
if (checkWin(row, col)) {
setTimeout(() => {
alert(`玩家 ${currentPlayer.toUpperCase()} 获胜！`);
resetGame();
}, 100);
}
currentPlayer = currentPlayer === 'x' ? 'o' : 'x'; // 切换玩家
}
}
function checkWin(row, col) {
const directions = [
[[0, 1], [0, -1]], // 水平
[[1, 0], [-1, 0]], // 垂直
[[1, 1], [-1, -1]], // 右下对角线
[[1, -1], [-1, 1]], // 左下对角线
];
for (const direction of directions) {
let count = 1;
for (const [dx, dy] of direction) {
let x = parseInt(row);
let y = parseInt(col);
while (true) {
x += dx;
y += dy;
if (x >= 0 && x < boardSize && y >= 0 && y < boardSize && chessboard[x][y] === currentPlayer) {
count++;
} else {
break;
}
if (count >= 5) return true; // 达到五子，返回胜利
}
}
}
return false; // 未胜利
}
function resetGame() {
chessboard = [];
currentPlayer = 'x';
document.querySelectorAll('.cell').forEach(cell => {
cell.classList.remove('x', 'o');
});
initGame();
}
window.onload = initGame;
总结
通过以上步骤，我们成功搭建了一个简单的五子棋游戏。在这个游戏中，玩家可以通过点击棋盘进行下棋，同时游戏也会判断胜负情况。你可以根据自己的需要，进一步扩展游戏功能，比如增加悔棋功能、棋谱记录等。
希望这篇文章能帮助到有兴趣尝试前端开发的你！尽情享受五子棋的乐趣吧！
