好的,以下是一个简单的HTML跳跳棋代码,你可以参考一下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>跳跳棋</title>
<style type="text/css">
td {
width: 50px;
height: 50px;
border: 1px solid black;
text-align: center;
vertical-align: middle;
font-size: 24px;
}
.red {
background-color: red;
color: white;
}
.black {
background-color: black;
color: white;
}
</style>
<script type="text/javascript">
var board = [];
var selected = null;
var redTurn = true;
var offset = [[-2, -2], [-2, 2], [2, -2], [2, 2], [-1, -1], [-1, 1], [1, -1], [1, 1]];
function initBoard() {
for (var i = 0; i < 10; i++) {
board[i] = [];
for (var j = 0; j < 9; j++) {
if (i < 5) {
if ((i + j) % 2 === 0) {
board[i][j] = {color: 'black', type: 'pawn'};
} else {
board[i][j] = null;
}
} else if (i === 5) {
if (j === 0 || j === 8) {
board[i][j] = {color: 'black', type: 'rook'};
} else if (j === 1 || j === 7) {
board[i][j] = {color: 'black', type: 'knight'};
} else if (j === 2 || j === 6) {
board[i][j] = {color: 'black', type: 'bishop'};
} else if (j === 3) {
board[i][j] = {color: 'black', type: 'guard'};
} else if (j === 4) {
board[i][j] = {color: 'black', type: 'king'};
} else if (j === 5) {
board[i][j] = {color: 'black', type: 'guard'};
}
} else if (i > 5) {
if ((i + j) % 2 === 0) {
board[i][j] = {color: 'red', type: 'pawn'};
} else {
board[i][j] = null;
}
}
}
}
}
function drawBoard() {
var table = document.createElement('table');
for (var i = 0; i < 10; i++) {
var tr = document.createElement('tr');
for (var j = 0; j < 9; j++) {
var td = document.createElement('td');
if (board[i][j]) {
td.className = board[i][j].color;
td.innerHTML = board[i][j].type;
}
td.addEventListener('click', function() {
var row = this.parentNode.rowIndex;
var col = this.cellIndex;
if (board[row][col] && board[row][col].color === (redTurn ? 'red' : 'black')) {
selected = {row: row, col: col};
this.style.backgroundColor = 'yellow';
} else if (selected && canMove(selected.row, selected.col, row, col)) {
move(selected.row, selected.col, row, col);
selected = null;
redTurn = !redTurn;
drawBoard();
}
});
tr.appendChild(td);
}
table.appendChild(tr);
}
document.body.appendChild(table);
}
function canMove(fromRow, fromCol, toRow, toCol) {
var dx = toCol - fromCol;
var dy = toRow - fromRow;
var piece = board[fromRow][fromCol];
if (toRow < 0 || toRow > 9 || toCol < 0 || toCol > 8) {
return false;
}
if (dx === 0 && dy === 0) {
return false;
}
if (piece.type === 'pawn') {
if (piece.color === 'red' && dy < 0) {
return false;
} else if (piece.color === 'black' && dy > 0) {
return false;
}
if (Math.abs(dx) + Math.abs(dy) !== 1) {
return false;
}
} else if (piece.type === 'rook') {
if (dx !== 0 && dy !== 0) {
return false;
}
if (dx === 0) {
var step = dy > 0 ? 1 : -1;
for (var i = fromRow + step; i !== toRow; i += step) {
if (board[i][fromCol]) {
return false;
}
}
} else if (dy === 0) {
var step = dx > 0 ? 1 : -1;
for (var j = fromCol + step; j !== toCol; j += step) {
if (board[fromRow][j]) {
return false;
}
}
}
} else if (piece.type === 'knight') {
if (Math.abs(dx) + Math.abs(dy) !== 3 || Math.abs(dx) === 0 || Math.abs(dy) === 0) {
return false;
}
var x = fromCol + dx / 3;
var y = fromRow + dy / 3;
if (board[y][x]) {
return false;
}
} else if (piece.type === 'bishop') {
if (Math.abs(dx) !== Math.abs(dy)) {
return false;
}
var stepX = dx > 0 ? 1 : -1;
var stepY = dy > 0 ? 1 : -1;
for (var i = fromRow + stepY, j = fromCol + stepX; i !== toRow; i += stepY, j += stepX) {
if (board[i][j]) {
return false;
}
}
} else if (piece.type === 'guard') {
if (piece.color === 'red' && (toRow < 7 || toCol < 3 || toCol > 5)) {
return false;
} else if (piece.color === 'black' && (toRow > 2 || toCol < 3 || toCol > 5)) {
return false;
}
if (Math.abs(dx) !== 1 || Math.abs(dy) !== 1) {
return false;
}
} else if (piece.type === 'king') {
if (piece.color === 'red' && (toRow < 7 || toCol < 3 || toCol > 5)) {
return false;
} else if (piece.color === 'black' && (toRow > 2 || toCol < 3 || toCol > 5)) {
return false;
}
if (Math.abs(dx) + Math.abs(dy) !== 1) {
return false;
}
}
return true;
}
function move(fromRow, fromCol, toRow, toCol) {
board[toRow][toCol] = board[fromRow][fromCol];
board[fromRow][fromCol] = null;
}
window.onload = function() {
initBoard();
drawBoard();
};
</script>
</head>
<body>
</body>
</html>
```
这个代码实现了一个简单的跳跳棋游戏,包括棋盘的绘制、棋子的移动和规则的判断等功能。你可以将它保存为一个HTML文件,用浏览器打开后即可开始游戏。注意,这只是一个很基础的实现,如果你想要实现更多功能,比如多人对战、人机对战等,还需要进一步完善代码。