网站首页 > 知识剖析正文

豆包给我输出的html在线象棋源码(有点简单)

nixiaole 2025-05-14 15:39:17 知识剖析 2 ℃

也许是我关键词没有写对，不过豆包后面也说了，以下是一个简单的 HTML 在线象棋示例源码，此示例借助 HTML、CSS 和 JavaScript 实现基本的棋盘显示和棋子移动模拟，不过它未涵盖完整的象棋规则逻辑，仅作基础演示。

对我来说，达不到我需求，至少我需要有棋盘效果

先上图：

我down下源码运行：

效果：

相关源码：

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 id="chessboard"></div>
    <script src="script.js"></script>
</body>

</html>

css：

#chessboard {
    display: grid;
    grid-template-columns: repeat(9, 50px);
    grid-template-rows: repeat(10, 50px);
    gap: 1px;
    background-color: #ccc;
    width: fit-content;
}

.square {
    width: 50px;
    height: 50px;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
}

.square.black {
    background-color: #eee;
}

js：

// 初始化棋盘
const chessboard = document.getElementById('chessboard');
const pieces = [
    '車', '馬', '象', '仕', '帥', '仕', '象', '馬', '車',
    '', '', '', '', '', '', '', '', '',
    '', '砲', '', '', '', '', '', '砲', '',
    '兵', '', '兵', '', '兵', '', '兵', '', '兵',
    '', '', '', '', '', '', '', '', '',
    '', '', '', '', '', '', '', '', '',
    '卒', '', '卒', '', '卒', '', '卒', '', '卒',
    '', '炮', '', '', '', '', '', '炮', '',
    '', '', '', '', '', '', '', '', '',
    '車', '马', '相', '士', '将', '士', '相', '马', '車'
];

for (let i = 0; i < 90; i++) {
    const square = document.createElement('div');
    square.classList.add('square');
    if ((Math.floor(i / 9) + i % 9) % 2 === 1) {
        square.classList.add('black');
    }
    square.textContent = pieces[i];
    chessboard.appendChild(square);
}

// 简单的棋子移动模拟
let selectedPiece = null;
chessboard.addEventListener('click', function (event) {
    const target = event.target;
    if (target.classList.contains('square')) {
        if (selectedPiece === null) {
            if (target.textContent!== '') {
                selectedPiece = target;
                target.style.backgroundColor = 'yellow';
            }
        } else {
            if (target!== selectedPiece) {
                target.textContent = selectedPiece.textContent;
                selectedPiece.textContent = '';
                selectedPiece.style.backgroundColor = (selectedPiece.classList.contains('black'))? '#eee' : 'white';
                selectedPiece = null;
            }
        }
    }
});

上一篇：零基础学习HTML之html框架内嵌框架和head头信息设置
下一篇： HTML 简介

网站首页 > 知识剖析 正文

豆包给我输出的html在线象棋源码(有点简单)

猜你喜欢

网站首页 > 知识剖析正文