用js写一个五子棋小游戏
时间: 2023-12-07 20:01:39 浏览: 53
好的,下面是一个简单的五子棋小游戏的代码实现,你可以先创建一个 HTML 文件,然后在其中添加以下代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>五子棋小游戏</title>
<style>
body {
text-align: center;
}
#game-board {
display: inline-block;
border: 1px solid black;
margin-top: 50px;
}
.game-cell {
display: inline-block;
width: 50px;
height: 50px;
border: 1px solid black;
cursor: pointer;
}
.game-cell.player1 {
background-color: #F44336;
}
.game-cell.player2 {
background-color: #2196F3;
}
</style>
</head>
<body>
<h1>五子棋小游戏</h1>
<div id="game-board"></div>
<script src="game.js"></script>
</body>
</html>
```
然后,创建一个名为 game.js 的 JavaScript 文件,将以下代码复制到其中:
```js
// 定义常量
const ROWS = 15; // 棋盘行数
const COLS = 15; // 棋盘列数
const CELL_SIZE = 50; // 棋格大小
const BOARD_SIZE = ROWS * CELL_SIZE; // 棋盘大小
// 定义变量
let currentPlayer = 1; // 当前玩家
let gameOver = false; // 游戏是否结束
let board = []; // 棋盘数组
// 创建棋盘
const gameBoard = document.getElementById('game-board');
gameBoard.style.width = BOARD_SIZE + 'px';
gameBoard.style.height = BOARD_SIZE + 'px';
for (let row = 0; row < ROWS; row++) {
board[row] = [];
for (let col = 0; col < COLS; col++) {
const cell = document.createElement('div');
cell.classList.add('game-cell');
cell.style.top = row * CELL_SIZE + 'px';
cell.style.left = col * CELL_SIZE + 'px';
cell.addEventListener('click', () => {
if (gameOver) return;
if (board[row][col] !== 0) return;
putChess(row, col, currentPlayer);
checkWin(row, col, currentPlayer);
switchPlayer();
});
gameBoard.appendChild(cell);
board[row][col] = 0;
}
}
// 下棋
function putChess(row, col, player) {
const cell = gameBoard.children[row * COLS + col];
cell.classList.add(`player${player}`);
board[row][col] = player;
}
// 切换玩家
function switchPlayer() {
currentPlayer = currentPlayer === 1 ? 2 : 1;
}
// 检查胜负
function checkWin(row, col, player) {
let count = 1;
// 检查横向
for (let i = col - 1; i >= 0; i--) {
if (board[row][i] !== player) break;
count++;
}
for (let i = col + 1; i < COLS; i++) {
if (board[row][i] !== player) break;
count++;
}
if (count >= 5) {
gameOver = true;
alert(`玩家${player}胜利!`);
return;
}
// 检查纵向
count = 1;
for (let i = row - 1; i >= 0; i--) {
if (board[i][col] !== player) break;
count++;
}
for (let i = row + 1; i < ROWS; i++) {
if (board[i][col] !== player) break;
count++;
}
if (count >= 5) {
gameOver = true;
alert(`玩家${player}胜利!`);
return;
}
// 检查左上到右下斜线
count = 1;
for (let i = row - 1, j = col - 1; i >= 0 && j >= 0; i--, j--) {
if (board[i][j] !== player) break;
count++;
}
for (let i = row + 1, j = col + 1; i < ROWS && j < COLS; i++, j++) {
if (board[i][j] !== player) break;
count++;
}
if (count >= 5) {
gameOver = true;
alert(`玩家${player}胜利!`);
return;
}
// 检查左下到右上斜线
count = 1;
for (let i = row + 1, j = col - 1; i < ROWS && j >= 0; i++, j--) {
if (board[i][j] !== player) break;
count++;
}
for (let i = row - 1, j = col + 1; i >= 0 && j < COLS; i--, j++) {
if (board[i][j] !== player) break;
count++;
}
if (count >= 5) {
gameOver = true;
alert(`玩家${player}胜利!`);
return;
}
}
```
现在你可以在浏览器中打开 HTML 文件,就可以玩五子棋小游戏了。在游戏中,红色棋子代表玩家1,蓝色棋子代表玩家2。要下棋,只需点击棋盘上的空白区域即可。如果有一方连成了五子,游戏结束,弹出提示框显示胜者。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)