五子棋是一種經典的策略游戲，玩家通過在棋盤上交替落子，先形成五子連珠的一方獲勝。本文將介紹如何使用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>
<style>
#board {
display: grid;
grid-template-columns: repeat(15, 40px);
grid-template-rows: repeat(15, 40px);
gap: 1px;
background-color: #000;
}
.cell {
width: 40px;
height: 40px;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.black {
background-color: black;
}
.white {
background-color: white;
}
</style>
</head>
<body>
<div id="board"></div>
<div id="status"></div>
<script src="gobang.js"></script>
</body>
</html>
在JavaScript中，我們需要創建一個15x15的棋盤，并為每個格子添加點擊事件。
const boardSize = 15;
const board = document.getElementById('board');
const status = document.getElementById('status');
let currentPlayer = 'black';
let gameOver = false;
let boardState = Array.from({ length: boardSize }, () => Array(boardSize).fill(null));
function createBoard() {
for (let i = 0; i < boardSize; i++) {
for (let j = 0; j < boardSize; j++) {
const cell = document.createElement('div');
cell.classList.add('cell');
cell.dataset.row = i;
cell.dataset.col = j;
cell.addEventListener('click', handleCellClick);
board.appendChild(cell);
}
}
}
createBoard();
當玩家點擊一個格子時，我們需要檢查該格子是否為空，并根據當前玩家的顏色落子。
function handleCellClick(event) {
if (gameOver) return;
const row = parseInt(event.target.dataset.row);
const col = parseInt(event.target.dataset.col);
if (boardState[row][col] !== null) return;
boardState[row][col] = currentPlayer;
event.target.classList.add(currentPlayer);
if (checkWin(row, col)) {
status.textContent = `${currentPlayer === 'black' ? '黑' : '白'}方獲勝！`;
gameOver = true;
return;
}
currentPlayer = currentPlayer === 'black' ? 'white' : 'black';
status.textContent = `當前玩家：${currentPlayer === 'black' ? '黑' : '白'}方`;
}
我們需要編寫一個函數來檢查當前落子是否形成了五子連珠。
function checkWin(row, col) {
const directions = [
[1, 0], // 水平
[0, 1], // 垂直
[1, 1], // 對角線
[1, -1] // 反對角線
];
for (const [dx, dy] of directions) {
let count = 1;
// 正向檢查
let x = row + dx;
let y = col + dy;
while (x >= 0 && x < boardSize && y >= 0 && y < boardSize && boardState[x][y] === currentPlayer) {
count++;
x += dx;
y += dy;
}
// 反向檢查
x = row - dx;
y = col - dy;
while (x >= 0 && x < boardSize && y >= 0 && y < boardSize && boardState[x][y] === currentPlayer) {
count++;
x -= dx;
y -= dy;
}
if (count >= 5) {
return true;
}
}
return false;
}
現在，我們已經完成了五子棋游戲的基本功能。打開瀏覽器，點擊棋盤上的格子，開始游戲吧！
通過以上步驟，我們使用JavaScript實現了一個簡單的五子棋游戲。這個游戲雖然基礎，但涵蓋了HTML、CSS和JavaScript的基本用法。你可以在此基礎上繼續擴展，例如添加悔棋功能、計時器、對手等，使游戲更加豐富和有趣。
希望這篇文章對你有所幫助，祝你編程愉快！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
