五子棋是一種非常受歡迎的游戲,在游戲中,兩方選手輪流下棋,先形成“五子連珠”的一方獲勝。這種游戲的簡易性和有趣性,讓其被廣泛應用于計算機編程中,并成為了程序員們鍛煉自己能力的良好選擇。
其中,JavaScript可以說是最為熟悉和常見的一種編程語言,其開發出來的五子棋游戲也有許多優秀和受歡迎的版本。
下面,我們就來看看如何使用JavaScript編寫一款五子棋游戲。
function Chess() { this.color = true // true為黑棋,false為白棋 this.isOver = false // 判斷游戲是否結束 this.steps = [] // 存放所有的落子記錄 this.chessSpace = [] // 存放棋盤上每個點的狀態 for (var i = 0; i < 15; i++) { this.chessSpace[i] = [] for (var j = 0; j < 15; j++) { this.chessSpace[i][j] = 0 // 初始值 0 表示沒有落子 } } }
上述代碼定義了一個棋盤對象 Chess,其中包含是否結束游戲、所有的落子記錄、每個點的狀態(初始為0,沒有落子)等屬性。
接下來,我們需要編寫判斷勝負的代碼。
// 水平方向 function isHorizontal(i, j, chessSpace, color) { var count = 1 for (var k = j - 1; k >= 0; k--) { if (chessSpace[i][k] === color) { count++ } else { break } } for (k = j + 1; k < 15; k++) { if (chessSpace[i][k] === color) { count++ } else { break } } if (count >= 5) { return true } } // 垂直方向 function isVertical(i, j, chessSpace, color) { ... } // 左上至右下方向 function isLeftToRight(i, j, chessSpace, color) { ... } // 右上至左下方向 function isRightToLeft(i, j, chessSpace, color) { ... }
在上面的代碼中,我們定義了四個函數,分別用于判斷水平、垂直、左上至右下、右上至左下四種方向上是否已經構成了五子。
接下來,我們來編寫下棋的代碼。
Chess.prototype.chessClick = function(event) { var x = Math.floor(event.offsetX / 30) var y = Math.floor(event.offsetY / 30) if (this.chessSpace[x][y] === 0 && !this.isOver) { this.chessSpace[x][y] = this.color ? 1 : 2 this.steps.push({ x, y, color: this.color }) if (this.checkResult(x, y)) { this.isOver = true alert(this.color ? "黑棋獲勝" : "白棋獲勝") } this.color = !this.color } }
上述代碼中,我們首先計算出當前鼠標點擊的坐標,以x、y變量存儲。如果當前點擊的位置沒有落子,那么我們將棋子的狀態改為1或2(黑棋為1,白棋為2),并將這些信息push進steps數組中。
接下來,我們調用checkResult函數來判斷當前用戶的贏負情況;如果當前用戶贏了,我們會彈出提示信息;最后,我們需要將顏色切換到下一方。
Chess.prototype.checkResult = function(x, y) { if (isHorizontal(x, y, this.chessSpace, this.color ? 1 : 2) || isVertical(x, y, this.chessSpace, this.color ? 1 : 2) || isLeftToRight(x, y, this.chessSpace, this.color ? 1 : 2) || isRightToLeft(x, y, this.chessSpace, this.color ? 1 : 2)) { return true } }
上面的代碼中,我們調用了前面編寫的四個方向判斷函數來判斷當前用戶所下的棋子是否已經構成了五子。如果構成了五子,那么就說明當前用戶的勝利。
至此,我們已經完成了五子棋游戲的編寫,它簡單明了,易于操作。希望本文能夠幫助剛接觸JavaScript編程的用戶,同時讓廣大愛好者在學習中提高自己。
上一篇div下級標簽
下一篇css文字下對齊方式