vue框架下的五子棋機器人代碼，隨著游戲邏輯復雜度的提升，常常出現代碼冗余、可讀性差等問題。本文將探討如何通過代碼重構，優化五子棋機器人代碼，使其更簡潔高效。
原代碼中，airPoint 方法包含大量重復的條件判斷和棋子放置操作。為解決此問題，我們可以將這些重復部分提取成獨立函數，提升代碼可讀性和可維護性。
首先，創建輔助函數 placePiece 用于檢查并放置棋子，簡化 airPoint 方法中重復的棋子放置邏輯：
function placePiece(x, y) { boxs.value[x][y].place = 2; fourDetial = determineEquare3(4, 2, { x, y, place: 2 }); airPlace.push(x * row.value + y); } function checkAndPlace(x, y) { if (boxs.value[x]?.[y]?.place === 0) { placePiece(x, y); curUser.value = 1; return true; } return false; }
接下來，重構 airPoint 函數。利用 checkAndPlace 函數，消除重復的棋子放置代碼。同時，使用方向數組，簡化不同方向（水平、垂直、對角線）的邏輯處理：
立即學習“前端免費學習筆記（深入）”；
const directions = [ [0, 1], [1, 0], [1, 1], [1, -1] // 四個方向：水平、垂直、兩個對角線 ]; function airPoint() { // 檢查是否有四個子連成一線的情況 if (!isEmptyObject(fourDetial)) { const { type, geyi, x, y, times } = fourDetial; if (geyi) { for (let i = x; i > x - times + 1; i--) { if (checkAndPlace(i, y)) return; } } else { for (const [dx, dy] of directions) { const newX = x + dx * times; const newY = y + dy * times; if (checkAndPlace(newX, newY)) return; } } } // 檢查是否有阻擋玩家的情況 const temp = determineEquare3(); if (temp) { const { type, geyi, x, y, times } = temp; if (geyi) { for (let i = x; i > x - times + 1; i--) { if (checkAndPlace(i, y)) return; } } else { for (const [dx, dy] of directions) { const newX = x + dx * times; const newY = y + dy * times; if (checkAndPlace(newX, newY)) return; } } } else { // 嘗試完成五子連線 airFiveLine(); } curUser.value = 1; }
通過以上重構，airPoint 方法得到簡化，邏輯更清晰。每個函數專注于單一任務，提高了代碼模塊化程度，方便后續修改和擴展。這種重構方法同樣適用于其他復雜邏輯的vue項目，有效提升代碼質量。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
