??作者簡介，黑夜開發(fā)者，全棧領(lǐng)域新星創(chuàng)作者?，CSDN博客專家，阿里云社區(qū)專家博主，2023年6月csdn上海賽道top4。
??數(shù)年電商行業(yè)從業(yè)經(jīng)驗(yàn)，歷任核心研發(fā)工程師，項(xiàng)目技術(shù)負(fù)責(zé)人。
??本文已收錄于專欄：100個(gè)JavaScript的小應(yīng)用。
??歡迎 ??點(diǎn)贊?評論?收藏
??一、引言
五子棋是一種非常經(jīng)典的棋類游戲，不論是對于計(jì)算機(jī)科學(xué)還是對于普通玩家來說，都具有一定的挑戰(zhàn)性。本文將使用Javascript來開發(fā)一個(gè)簡單的五子棋游戲，在游戲中實(shí)現(xiàn)雙方角色的對戰(zhàn)，并且記錄勝負(fù)結(jié)果。
??二、核心功能設(shè)計(jì)
在開始編寫代碼之前，我們需要明確一些基本的概念和步驟：
-
棋盤：五子棋游戲的主要場景，由19x19個(gè)交叉點(diǎn)組成； -
角色：用戶和系統(tǒng)兩個(gè)角色，用戶是白色棋子，系統(tǒng)是黑色棋子； -
開始按鈕：點(diǎn)擊開始按鈕后，游戲重新開始； -
落子規(guī)則：用戶和系統(tǒng)輪流落子，每次只能落一個(gè)棋子，不能重復(fù)落子； -
判斷勝負(fù)：當(dāng)任意一方先連成五個(gè)棋子時(shí)，游戲結(jié)束，并宣布勝者。
??三、功能實(shí)現(xiàn)
??3.1 創(chuàng)建HTML結(jié)構(gòu)
首先，我們需要?jiǎng)?chuàng)建一個(gè)HTML文件，并添加必要的結(jié)構(gòu)和樣式。在<body>標(biāo)簽中，我們會(huì)添加一個(gè)<div>元素用于繪制棋盤，以及一個(gè)開始按鈕。
<!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>
在上面的代碼中，我們?yōu)槠灞P設(shè)置了一個(gè)寬度和高度，并將其居中顯示。我們還為每個(gè)棋子指定了樣式。
??3.2 創(chuàng)建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文件中，我們將獲取棋盤元素并生成網(wǎng)格。我們會(huì)定義一個(gè)全局變量board來存儲(chǔ)當(dāng)前游戲狀態(tài)。
const boardSize = 15; // 棋盤大小
const boardElement = document.getElementById('board');
let board = []; // 存儲(chǔ)棋盤狀態(tài)
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();
上述代碼中，我們使用兩個(gè)嵌套的for循環(huán)來遍歷整個(gè)棋盤，并創(chuàng)建一個(gè)<div>元素作為每個(gè)交叉點(diǎn)。我們設(shè)置了這些點(diǎn)的位置，并將其添加到棋盤元素中。同時(shí)，我們也初始化了board數(shù)組，將每個(gè)交叉點(diǎn)的狀態(tài)設(shè)置為null。
??3.4 核心下棋邏輯處理
??3.4.1 玩家落子
現(xiàn)在，我們將添加處理用戶點(diǎn)擊事件的功能。當(dāng)用戶點(diǎn)擊空白的交叉點(diǎn)時(shí)，我們會(huì)為其添加一個(gè)白色棋子，并將其狀態(tài)設(shè)置為'white'。我們還會(huì)為開始按鈕添加一個(gè)點(diǎn)擊事件來重新開始游戲。
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;
// 檢查是否有玩家連成五個(gè)棋子
if (checkWin(row, col)) {
endGame(currentPlayer + ' 勝利！');
} else {
currentPlayer = 'black';
setTimeout(systemPlay, 1000); // 系統(tǒng)自動(dòng)下一步棋
}
}
}
??3.4.2 系統(tǒng)回棋
接下來，我們需要實(shí)現(xiàn)系統(tǒng)落子的邏輯。當(dāng)游戲玩家下完棋后，系統(tǒng)要進(jìn)行相應(yīng)的回棋，游戲才能進(jìn)行下去。
function systemPlay() {
// 系統(tǒng)隨機(jī)選擇一個(gè)空的交叉點(diǎn)
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;
// 檢查是否有玩家連成五個(gè)棋子
if (checkWin(row, col)) {
endGame(currentPlayer + ' 勝利！');
} else {
currentPlayer = 'white';
}
}
??3.4.3 輸贏判斷
我們首先獲取被點(diǎn)擊的元素，并計(jì)算其所在的行和列。然后，我們檢查該交叉點(diǎn)是否為空，如果是，就為其添加當(dāng)前玩家的棋子，并更新board數(shù)組。接下來，我們使用checkWin函數(shù)檢查該玩家是否連成五個(gè)棋子，如果是，就結(jié)束游戲。
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;
}
// 結(jié)束游戲
function endGame(message) {
alert(message);
boardElement.removeEventListener('click', handleClick);
}
??3.4.4 重新開始游戲
如果想重新開始游戲，點(diǎn)擊開始按鈕，就能夠?qū)⒂螒蛑匦麻_始，主要邏輯如下
startButton.addEventListener('click', resetGame);
function resetGame() {
boardElement.innerHTML = '';
board = [];
createBoard();
currentPlayer = 'white';
}
我們?yōu)殚_始按鈕添加了一個(gè)點(diǎn)擊事件，用于重新開始游戲。點(diǎn)擊該按鈕時(shí)，我們會(huì)清空棋盤，并重新繪制棋盤，并將當(dāng)前玩家設(shè)置為白色。一起來看一下效果吧。
??四、總結(jié)
本篇文章介紹了如何使用JavaScript開發(fā)一個(gè)簡單的五子棋游戲。通過繪制棋盤、實(shí)現(xiàn)開始按鈕和游戲邏輯、處理用戶交互、判斷勝負(fù)和游戲結(jié)束等功能，我們完成了一個(gè)基本的五子棋游戲。當(dāng)然，我們還可以對游戲進(jìn)行優(yōu)化和擴(kuò)展，例如增加悔棋功能、提示下一步最佳落子位置等。
JavaScript是一種非常強(qiáng)大和靈活的編程語言，可以用于開發(fā)各種類型的應(yīng)用程序和游戲。希望通過這篇文章，你對使用JavaScript開發(fā)游戲有了更深入的了解。如果你對五子棋游戲開發(fā)還有任何問題或建議，歡迎在評論區(qū)留言討論。謝謝閱讀！
文章來源：http://www.zghlxwxcb.cn/news/detail-646938.html
今天的內(nèi)容就到這里，我們下次見。文章來源地址http://www.zghlxwxcb.cn/news/detail-646938.html
到了這里，關(guān)于JavaScript應(yīng)用：五子棋游戲?qū)崙?zhàn)開發(fā)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
