对战五子棋——网页版
发布人：shili8
发布时间：2024-12-27 23:25
阅读次数：0
**对战五子棋——网页版**
五子棋是一种古老的中国象棋游戏，玩家通过在棋盘上放置自己的棋子来争夺胜利。网页版的五子棋可以让更多的人参与到这个游戏中，并且可以方便地与朋友或其他玩家对战。
**游戏规则**
五子棋的游戏规则如下：
1.两名玩家轮流下棋，先下五子者胜。
2. 每次下棋必须在空白格子上放置一枚棋子。
3. 棋子不能放在已经有棋子的格子上。
4. 如果一个玩家没有可以下棋的位置了，那么另一名玩家就赢了。
**网页版五子棋**
我们将使用HTML、CSS和JavaScript来创建网页版五子棋。以下是游戏的基本结构：
### HTML
html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>对战五子棋</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="game-board"> <!-- 棋盘 --> </div> <div class="player-turn">玩家一轮到下棋了!</div> <button id="reset-button">重置游戏</button> <script src="script.js"></script> </body> </html>
### CSS
css.game-board {
display: grid;
grid-template-columns: repeat(15,1fr);
grid-gap:5px;
}
.square {
width:50px;
height:50px;
background-color: #ccc;
border-radius:10px;
cursor: pointer;
}
### JavaScript
javascript// 棋盘大小const BOARD_SIZE =15;
// 棋子颜色const PLAYER_ONE_COLOR = 'black';
const PLAYER_TWO_COLOR = 'red';
// 棋子类型class Square {
constructor(x, y) {
this.x = x;
this.y = y;
this.color = null;
}
}
class GameBoard {
constructor() {
this.squares = [];
for (let i =0; i < BOARD_SIZE; i++) {
const row = [];
for (let j =0; j < BOARD_SIZE; j++) {
row.push(new Square(i, j));
}
this.squares.push(row);
}
}
// 棋子落在哪个位置 getSquare(x, y) {
return this.squares[x][y];
}
// 棋子落下 dropPiece(x, y, color) {
const square = this.getSquare(x, y);
if (square.color === null) {
square.color = color;
return true;
}
return false;
}
// 棋盘是否满了 isBoardFull() {
for (let i =0; i < BOARD_SIZE; i++) {
for (let j =0; j < BOARD_SIZE; j++) {
if (this.getSquare(i, j).color === null) {
return false;
}
}
}
return true;
}
// 棋盘是否有五子连着 hasFiveInARow(color) {
const directions = [
[-1, -1],
[-1,0],
[-1,1],
[0, -1],
[0,1],
[1, -1],
[1,0],
[1,1]
];
for (let i =0; i < BOARD_SIZE; i++) {
for (let j =0; j < BOARD_SIZE; j++) {
if (this.getSquare(i, j).color === color) {
let count =1;
for (const direction of directions) {
const x = i + direction[0];
const y = j + direction[1];
if (x >=0 && x < BOARD_SIZE && y >=0 && y < BOARD_SIZE && this.getSquare(x, y).color === color) {
count++;
} else {
break;
}
}
if (count >=5) {
return true;
}
}
}
}
return false;
}
// 棋盘是否有五子连着 hasFiveInARow(color) {
const directions = [
[-1, -1],
[-1,0],
[-1,1],
[0, -1],
[0,1],
[1, -1],
[1,0],
[1,1]
];
for (let i =0; i < BOARD_SIZE; i++) {
for (let j =0; j < BOARD_SIZE; j++) {
if (this.getSquare(i, j).color === color) {
let count =1;
for (const direction of directions) {
const x = i + direction[0];
const y = j + direction[1];
if (x >=0 && x < BOARD_SIZE && y >=0 && y < BOARD_SIZE && this.getSquare(x, y).color === color) {
count++;
} else {
break;
}
}
if (count >=5) {
return true;
}
}
}
}
return false;
}
// 棋盘是否有五子连着 hasFiveInARow(color) {
const directions = [
[-1, -1],
[-1,0],
[-1,1],
[0, -1],
[0,1],
[1, -1],
[1,0],
[1,1]
];
for (let i =0; i < BOARD_SIZE; i++) {
for (let j =0; j < BOARD_SIZE; j++) {
if (this.getSquare(i, j).color === color) {
let count =1;
for (const direction of directions) {
const x = i + direction[0];
const y = j + direction[1];
if (x >=0 && x < BOARD_SIZE && y >=0 && y < BOARD_SIZE && this.getSquare(x, y).color === color) {
count++;
} else {
break;
}
}
if (count >=5) {
return true;
}
}
}
}
return false;
}
// 棋盘是否有五子连着 hasFiveInARow(color) {
const directions = [
[-1, -1],
[-1,0],
[-1,1],
[0, -1],
[0,1],
[1, -1],
[1,0],
[1,1]
];
for (let i =0; i < BOARD_SIZE; i++) {
for (let j =0; j < BOARD_SIZE; j++) {
if (this.getSquare(i, j).color === color) {
let count =1;
for (const direction of directions) {
const x = i + direction[0];
const y = j + direction[1];
if (x >=0 && x < BOARD_SIZE && y >=0 && y < BOARD_SIZE && this.getSquare(x, y).color === color) {
count++;
} else {
break;
}
}
if (count >=5) {
return true;
}
}
}
}
return false;
}
// 棋盘是否有五子连着 hasFiveInARow(color) {
const directions = [
[-1, -1],
[-1,0],
[-1,1],
[0, -1],
[0,1],
[1, -1],
[1,0],
[1,1]
];
for (let i =0; i < BOARD_SIZE; i++) {
for (let j =0; j < BOARD_SIZE; j++) {
if (this.getSquare(i, j).color === color) {
let count =1;
for (const direction of directions) {
const x = i + direction[0];
const y = j + direction[1];
if (x >=0 && x < BOARD_SIZE && y >=0 && y < BOARD_SIZE && this.getSquare(x, y).color === color) {
count++;
} else {
break;
}
}
if (count >=5) {
return true;
}
}
}
}
return false;
}
// 棋盘是否有五子连着 hasFiveInARow(color) {
const directions = [
[-1, -1],
[-1,0
粤公网安备 44011102002787号