js+html 象棋游戏 可以简单人机对战
实现人机对战的象棋游戏需要更多的代码和逻辑。下面是一个简单的示例，展示了如何使用HTML、CSS和JavaScript来实现人机对战的象棋游戏。
HTML部分（index.html）：
DOCTYPE html>
<html>
<head>
<title>象棋游戏title>
<style>
.board {
display: grid;
grid-template-columns: repeat(9, 50px);
grid-template-rows: repeat(10, 50px);
gap: 2px;
background-color: #f0d9b5;
padding: 10px;
}
.board > div {
background-color: #b58863;
text-align: center;
}
.piece {
font-size: 30px;
color: #fff;
cursor: pointer;
}
.selected {
background-color: #f9cda3;
}
style>
head>
<body>
<div class="board">div>
<script src="chess.js">script>
body>
html>
JavaScript部分（chess.js）：
// 定义象棋棋盘
const chessBoard = [
['車', '馬', '象', '士', '将', '士', '象', '馬', '車'],
['', '', '', '', '', '', '', '', ''],
['', '炮', '', '', '', '', '', '炮', ''],
['兵', '', '兵', '', '兵', '', '兵', '', '兵'],
['', '', '', '', '', '', '', '', ''],
['', '', '', '', '', '', '', '', ''],
['卒', '', '卒', '', '卒', '', '卒', '', '卒'],
['', '砲', '', '', '', '', '', '砲', ''],
['', '', '', '', '', '', '', '', ''],
['車', '馬', '相', '仕', '帅', '仕', '相', '馬', '車']
];
// 当前选中的棋子坐标
let selectedPiece = null;
// 渲染棋盘
function renderBoard() {
const board = document.querySelector('.board');
board.innerHTML = '';
for (let i = 0; i < chessBoard.length; i++) {
for (let j = 0; j < chessBoard[i].length; j++) {
const square = document.createElement('div');
square.textContent = chessBoard[i][j];
square.classList.add('piece');
square.dataset.row = i;
square.dataset.col = j;
square.addEventListener('click', handlePieceClick);
board.appendChild(square);
}
}
}
// 处理棋子点击事件
function handlePieceClick(event) {
const piece = event.target;
const row = parseInt(piece.dataset.row);
const col = parseInt(piece.dataset.col);
if (selectedPiece) {
const selectedRow = parseInt(selectedPiece.dataset.row);
const selectedCol = parseInt(selectedPiece.dataset.col);
if (isValidMove(selectedRow, selectedCol, row, col)) {
movePiece(selectedRow, selectedCol, row, col);
selectedPiece.classList.remove('selected');
selectedPiece = null;
// 玩家移动后，由电脑移动
computerMove();
} else {
selectedPiece.classList.remove('selected');
selectedPiece = piece;
selectedPiece.classList.add('selected');
}
} else {
selectedPiece = piece;
selectedPiece.classList.add('selected');
}
}
// 判断移动是否合法
function isValidMove(fromRow, fromCol, toRow, toCol) {
// TODO: 实现合法移动的逻辑
return true;
}
// 移动棋子
function movePiece(fromRow, fromCol, toRow, toCol) {
const piece = chessBoard[fromRow][fromCol];
chessBoard[fromRow][fromCol] = '';
chessBoard[toRow][toCol] = piece;
renderBoard();
}
// 初始化游戏
function initGame() {
renderBoard();
}
// 在页面加载完成后初始化游戏
window.addEventListener('DOMContentLoaded', initGame);
电脑移动的逻辑可以根据具体需求来实现。以下是一个简单的示例，展示了一个随机移动的电脑玩家。
// 电脑移动
function computerMove() {
// 随机选择一个电脑棋子
const computerPieces = document.querySelectorAll('.piece:not(.selected)');
const randomIndex = Math.floor(Math.random() * computerPieces.length);
const piece = computerPieces[randomIndex];
const row = parseInt(piece.dataset.row);
const col = parseInt(piece.dataset.col);
// 随机选择一个目标位置
const possibleMoves = getValidMoves(row, col);
const randomMoveIndex = Math.floor(Math.random() * possibleMoves.length);
const move = possibleMoves[randomMoveIndex];
// 移动棋子
movePiece(row, col, move.row, move.col);
}
// 获取棋子的所有合法移动
function getValidMoves(row, col) {
const piece = chessBoard[row][col];
const validMoves = [];
// 遍历整个棋盘，找到所有合法的移动
for (let i = 0; i < chessBoard.length; i++) {
for (let j = 0; j < chessBoard[i].length; j++) {
if (isValidMove(row, col, i, j)) {
validMoves.push({ row: i, col: j });
}
}
}
return validMoves;
}
在上述代码中，我们首先从所有未选中的电脑棋子中随机选择一个棋子。然后，我们获取该棋子的所有合法移动，并从中随机选择一个目标位置。最后，我们调用 movePiece 函数来移动棋子。你可以根据需要自定义电脑移动的逻辑，比如根据棋盘评估函数来选择最佳的移动，或者实现一个更加智能的电脑玩家。