js五子棋
时间: 2023-07-23 15:07:57 浏览: 44
以下是一个简单的 JavaScript 五子棋游戏实现,供参考:
```html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript 五子棋游戏</title>
<style type="text/css">
#board {
margin: 20px;
border: 1px solid #000;
width: 600px;
height: 600px;
}
.cell {
width: 40px;
height: 40px;
border: 1px solid #ccc;
float: left;
cursor: pointer;
}
.cell.black {
background-color: #000;
border-radius: 50%;
}
.cell.white {
background-color: #fff;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="board"></div>
<script type="text/javascript">
var board = [];
var ROWS = 15;
var COLS = 15;
var CELL_SIZE = 40;
var currentPlayer = 1;
function initBoard() {
var boardDiv = document.getElementById('board');
for (var i = 0; i < ROWS; i++) {
board[i] = [];
for (var j = 0; j < COLS; j++) {
var cell = document.createElement('div');
cell.className = 'cell';
cell.setAttribute('row', i);
cell.setAttribute('col', j);
cell.onclick = function() {
playMove(this.getAttribute('row'), this.getAttribute('col'));
};
boardDiv.appendChild(cell);
board[i][j] = cell;
}
boardDiv.appendChild(document.createElement('br'));
}
}
function playMove(row, col) {
if (board[row][col].className != 'cell') {
return;
}
board[row][col].className = 'cell ' + (currentPlayer == 1 ? 'black' : 'white');
if (checkWin(row, col)) {
alert('Player ' + currentPlayer + ' wins!');
resetGame();
} else {
currentPlayer = currentPlayer == 1 ? 2 : 1;
}
}
function checkWin(row, col) {
var i, j, count;
// 横向
count = 1;
for (i = row - 1; i >= 0 && board[i][col].className == 'cell ' + (currentPlayer == 1 ? 'black' : 'white'); i--, count++);
for (i = row + 1; i < ROWS && board[i][col].className == 'cell ' + (currentPlayer == 1 ? 'black' : 'white'); i++, count++);
if (count >= 5) {
return true;
}
// 纵向
count = 1;
for (j = col - 1; j >= 0 && board[row][j].className == 'cell ' + (currentPlayer == 1 ? 'black' : 'white'); j--, count++);
for (j = col + 1; j < COLS && board[row][j].className == 'cell ' + (currentPlayer == 1 ? 'black' : 'white'); j++, count++);
if (count >= 5) {
return true;
}
// 左上到右下
count = 1;
for (i = row - 1, j = col - 1; i >= 0 && j >= 0 && board[i][j].className == 'cell ' + (currentPlayer == 1 ? 'black' : 'white'); i--, j--, count++);
for (i = row + 1, j = col + 1; i < ROWS && j < COLS && board[i][j].className == 'cell ' + (currentPlayer == 1 ? 'black' : 'white'); i++, j++, count++);
if (count >= 5) {
return true;
}
// 右上到左下
count = 1;
for (i = row - 1, j = col + 1; i >= 0 && j < COLS && board[i][j].className == 'cell ' + (currentPlayer == 1 ? 'black' : 'white'); i--, j++, count++);
for (i = row + 1, j = col - 1; i < ROWS && j >= 0 && board[i][j].className == 'cell ' + (currentPlayer == 1 ? 'black' : 'white'); i++, j--, count++);
if (count >= 5) {
return true;
}
return false;
}
function resetGame() {
board.forEach(function(row) {
row.forEach(function(cell) {
cell.className = 'cell';
});
});
currentPlayer = 1;
}
initBoard();
</script>
</body>
</html>
```
这个实现比较简单,只是实现了基本的下棋、判断胜负、重置游戏等功能。如果需要更完善的功能,还需要进一步完善。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)