给我一个js写的象棋游戏的代码
时间: 2023-08-31 11:35:40 浏览: 137
### 回答1:
好的,下面是一个简单的 JavaScript 象棋游戏的代码供你参考:
```
// 定义棋盘大小和棋盘格子的大小
const BOARD_SIZE = 8;
const TILE_SIZE = 50;
// 定义棋盘元素
let board = document.getElementById('board');
// 初始化棋盘
for (let row = 0; row < BOARD_SIZE; row++) {
for (let col = 0; col < BOARD_SIZE; col++) {
// 创建棋盘格子
let tile = document.createElement('div');
// 设置样式
tile.style.top = row * TILE_SIZE + 'px';
tile.style.left = col * TILE_SIZE + 'px';
tile.style.width = TILE_SIZE + 'px';
tile.style.height = TILE_SIZE + 'px';
// 奇数行和偶数行的颜色不同
if ((row + col) % 2 === 0) {
tile.classList.add('light-tile');
} else {
tile.classList.add('dark-tile');
}
// 将格子添加到棋盘中
board.appendChild(tile);
}
}
// 定义棋子类型常量
const PAWN = 'pawn';
const KNIGHT = 'knight';
const BISHOP = 'bishop';
const ROOK = 'rook';
const QUEEN = 'queen';
const KING = 'king';
// 定义棋子颜色常量
const WHITE = 'white';
const BLACK = 'black';
// 定义棋子类
class Piece {
// 构造函数
constructor(type, color, row, col) {
this.type = type;
this.color = color;
this.row = row;
this.col = col;
this.element = document.createElement('div');
this.element.classList.add('piece', `${color}-${type}`);
board.appendChild(this.element);
this.moveTo(row, col);
}
// 移动棋子
moveTo(row, col) {
this.row = row;
this.col = col;
this.element.style.top = row * TILE_SIZE + 'px';
this.element.style.left = col * TILE_SIZE + 'px';
}
}
// 创建棋子
let whitePawn1 = new Piece(PAWN,
### 回答2:
下面是一个简单的用JavaScript写的象棋游戏的代码:
```html
<!DOCTYPE html>
<html>
<head>
<style>
.board {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 400px;
}
.square {
width: 50px;
height: 50px;
border: 1px solid black;
}
.black {
background-color: #444;
}
.red {
background-color: #f00;
}
.piece {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div class="board">
<div class="square black"></div>
<div class="square"></div>
...
...
</div>
<script>
// 定义象棋棋盘
const board = [
['', '', '', '', '', '', '', ''],
['', '', '', '', '', '', '', ''],
['', '', '', '', '', '', '', ''],
['', '', '', '', '', '', '', ''],
['', '', '', '', '', '', '', ''],
['', '', '', '', '', '', '', ''],
['', '', '', '', '', '', '', ''],
['', '', '', '', '', '', '', ''],
];
// 显示棋盘
function displayBoard() {
const boardElement = document.querySelector('.board');
// 清空旧棋盘
boardElement.innerHTML = '';
// 创建新棋盘
for (let i = 0; i < 8; i++) {
for (let j = 0; j < 8; j++) {
const square = document.createElement('div');
square.className = `square ${getSquareColor(i, j)}`;
if (board[i][j]) {
const piece = document.createElement('div');
piece.className = 'piece';
piece.innerHTML = board[i][j];
square.appendChild(piece);
}
boardElement.appendChild(square);
}
}
}
// 根据行列确定方格颜色
function getSquareColor(row, col) {
if ((row + col) % 2 === 0) {
return 'black';
} else {
return '';
}
}
// 初始化棋盘
function initBoard() {
// 设置初始位置
board[0] = ['車', '馬', '象', '士', '将', '士', '象', '馬', '車'];
board[1] = ['兵', '兵', '兵', '兵', '兵', '兵', '兵', '兵'];
board[6] = ['卒', '卒', '卒', '卒', '卒', '卒', '卒', '卒'];
board[7] = ['俥', '傌', '相', '仕', '帅', '仕', '相', '傌', '俥'];
displayBoard();
}
// 初始化游戏
function initGame() {
initBoard();
}
// 开始游戏
initGame();
</script>
</body>
</html>
```
这段代码创建了一个8x8的象棋棋盘,并设置了各个棋子的初始位置。通过JavaScript动态生成棋盘和棋子的HTML元素,并根据棋盘数组的内容和位置进行显示。玩家可以根据规则移动棋子,实现基本的象棋游戏功能。
阅读全文