🏆作者簡介，黑夜開發者，全棧領域新星創作者?，CSDN博客專家，阿里云社區專家博主，2023年6月csdn上海賽道top4。
🏆數年電商行業從業經驗，歷任核心研發工程師，項目技術負責人。
🏆本文已收錄于專欄：100個JavaScript的小應用。
🎉歡迎 👍點贊?評論?收藏
文章目錄
- 🚀一、引言
- 🚀二、核心功能設計
- 🚀三、功能實現
- 🔎3.1 創建HTML結構
- 🔎3.2 創建HTML樣式
- 🔎3.3 繪制棋盤
- 🔎3.4 核心下棋邏輯處理
- 🍁3.4.1 玩家落子
- 🍁3.4.2 系統回棋
- 🍁3.4.3 輸贏判斷
- 🍁3.4.4 重新開始游戲
- 🚀四、總結
🚀一、引言
五子棋是一種非常經典的棋類游戲，不論是對于計算機科學還是對于普通玩家來說，都具有一定的挑戰性。本文將使用Javascript來開發一個簡單的五子棋游戲，在游戲中實現雙方角色的對戰，并且記錄勝負結果。
🚀二、核心功能設計
在開始編寫代碼之前，我們需要明確一些基本的概念和步驟：
棋盤：五子棋游戲的主要場景，由19x19個交叉點組成；角色：用戶和系統兩個角色，用戶是白色棋子，系統是黑色棋子；開始按鈕：點擊開始按鈕后，游戲重新開始；落子規則：用戶和系統輪流落子，每次只能落一個棋子，不能重復落子；判斷勝負：當任意一方先連成五個棋子時，游戲結束，并宣布勝者。
🚀三、功能實現
🔎3.1 創建HTML結構
首先，我們需要創建一個HTML文件，并添加必要的結構和樣式。在<body>標簽中，我們會添加一個<div>元素用于繪制棋盤，以及一個開始按鈕。
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>五子棋游戲</title><link rel="stylesheet" type="text/css" href="style.css">
</head>
<body><div id="board"></div><button id="start">開始</button><script src="script.js"></script>
</body>
</html>
在上面的代碼中，我們為棋盤設置了一個寬度和高度，并將其居中顯示。我們還為每個棋子指定了樣式。
🔎3.2 創建HTML樣式
#board {height: 500px;margin: 0 auto;background-color: beige;
}.dot {width: 10px;height: 10px;border-radius: 50%;background-color: black;position: absolute;
}.white {background-color: white;
}
🔎3.3 繪制棋盤
接下來，我們將使用JavaScript來繪制棋盤。在script.js文件中，我們將獲取棋盤元素并生成網格。我們會定義一個全局變量board來存儲當前游戲狀態。
const boardSize = 15; // 棋盤大小
const boardElement = document.getElementById('board');
let board = []; // 存儲棋盤狀態function createBoard() {for (let i = 0; i < boardSize; i++) {board[i] = [];for (let j = 0; j < boardSize; j++) {const dot = document.createElement('div');dot.className = 'dot';dot.style.top = (i * 30 + 10) + 'px';dot.style.left = (j * 30 + 10) + 'px';boardElement.appendChild(dot);board[i][j] = null;}}
}createBoard();
上述代碼中，我們使用兩個嵌套的for循環來遍歷整個棋盤，并創建一個<div>元素作為每個交叉點。我們設置了這些點的位置，并將其添加到棋盤元素中。同時，我們也初始化了board數組，將每個交叉點的狀態設置為null。
🔎3.4 核心下棋邏輯處理
🍁3.4.1 玩家落子
現在，我們將添加處理用戶點擊事件的功能。當用戶點擊空白的交叉點時，我們會為其添加一個白色棋子，并將其狀態設置為'white'。我們還會為開始按鈕添加一個點擊事件來重新開始游戲。
const startButton = document.getElementById('start');
let currentPlayer = 'white';boardElement.addEventListener('click', handleClick);function handleClick(event) {const dot = event.target;const row = Math.floor((dot.offsetTop - 10) / 30);const col = Math.floor((dot.offsetLeft - 10) / 30);if (board[row][col] === null) {dot.classList.add(currentPlayer);board[row][col] = currentPlayer;// 檢查是否有玩家連成五個棋子if (checkWin(row, col)) {endGame(currentPlayer + ' 勝利！');} else {currentPlayer = 'black';setTimeout(systemPlay, 1000); // 系統自動下一步棋}}
}
🍁3.4.2 系統回棋
接下來，我們需要實現系統落子的邏輯。當游戲玩家下完棋后，系統要進行相應的回棋，游戲才能進行下去。
function systemPlay() {// 系統隨機選擇一個空的交叉點let emptyDots = [];for (let i = 0; i < boardSize; i++) {for (let j = 0; j < boardSize; j++) {if (board[i][j] === null) {emptyDots.push([i, j]);}}}const randomIndex = Math.floor(Math.random() * emptyDots.length);const [row, col] = emptyDots[randomIndex];const dot = boardElement.children[row * boardSize + col];dot.classList.add(currentPlayer);board[row][col] = currentPlayer;// 檢查是否有玩家連成五個棋子if (checkWin(row, col)) {endGame(currentPlayer + ' 勝利！');} else {currentPlayer = 'white';}
}🍁3.4.3 輸贏判斷
我們首先獲取被點擊的元素，并計算其所在的行和列。然后，我們檢查該交叉點是否為空，如果是，就為其添加當前玩家的棋子，并更新board數組。接下來，我們使用checkWin函數檢查該玩家是否連成五個棋子，如果是，就結束游戲。
function checkWin(row, col) {// 檢查行let count = 1;for (let i = col - 1; i >= 0; i--) {if (board[row][i] === currentPlayer) {count++;} else {break;}}for (let i = col + 1; i < boardSize; i++) {if (board[row][i] === currentPlayer) {count++;} else {break;}}if (count >= 5) {return true;}// 檢查列count = 1;for (let i = row - 1; i >= 0; i--) {if (board[i][col] === currentPlayer) {count++;} else {break;}}for (let i = row + 1; i < boardSize; i++) {if (board[i][col] === currentPlayer) {count++;} else {break;}}if (count >= 5) {return true;}// 檢查主對角線count = 1;for (let i = row - 1, j = col - 1; i >= 0 && j >= 0; i--, j--) {if (board[i][j] === currentPlayer) {count++;} else {break;}}for (let i = row + 1, j = col + 1; i < boardSize && j < boardSize; i++, j++) {if (board[i][j] === currentPlayer) {count++;} else {break;}}if (count >= 5) {return true;}// 檢查副對角線count = 1;for (let i = row - 1, j = col + 1; i >= 0 && j < boardSize; i--, j++) {if (board[i][j] === currentPlayer) {count++;} else {break;}}for (let i = row + 1, j = col - 1; i < boardSize && j >= 0; i++, j--) {if (board[i][j] === currentPlayer) {count++;} else {break;}}if (count >= 5) {return true;}return false;
}
// 結束游戲
function endGame(message) {alert(message);boardElement.removeEventListener('click', handleClick);
}
🍁3.4.4 重新開始游戲
如果想重新開始游戲，點擊開始按鈕，就能夠將游戲重新開始，主要邏輯如下
startButton.addEventListener('click', resetGame);function resetGame() {boardElement.innerHTML = '';board = [];createBoard();currentPlayer = 'white';
}
我們為開始按鈕添加了一個點擊事件，用于重新開始游戲。點擊該按鈕時，我們會清空棋盤，并重新繪制棋盤，并將當前玩家設置為白色。一起來看一下效果吧。
🚀四、總結
本篇文章介紹了如何使用JavaScript開發一個簡單的五子棋游戲。通過繪制棋盤、實現開始按鈕和游戲邏輯、處理用戶交互、判斷勝負和游戲結束等功能，我們完成了一個基本的五子棋游戲。當然，我們還可以對游戲進行優化和擴展，例如增加悔棋功能、提示下一步最佳落子位置等。
JavaScript是一種非常強大和靈活的編程語言，可以用于開發各種類型的應用程序和游戲。希望通過這篇文章，你對使用JavaScript開發游戲有了更深入的了解。如果你對五子棋游戲開發還有任何問題或建議，歡迎在評論區留言討論。謝謝閱讀！
今天的內容就到這里，我們下次見。
 開源代碼解讀)
