当前位置：网站首页 > 文章教程 > 正文

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

yund56 2025-07-01 01:21 28 浏览

也许是我关键词没有写对，不过豆包后面也说了，以下是一个简单的 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源码

上一篇：小狐狸ChatGPT付费创作系统V2.4.7全开源版 (vue全开源端)
下一篇：使用canvas实现简单的贪吃蛇游戏，html+css+js

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

相关推荐

django留言板_留言板html好看的模板

你还在手动筛选吗?filter函数才是多条件筛选的yyds!

一次分享给你29个PHP基础常用类助力你快速提升

一篇文章轻松掌握VLookup、XLookup与Filter函数

软件工程培训，选择线上还是线下呢?

连南举办2024年软件正版化工作联席会议暨正版软件培训班

初学ThinkPHP(一):用TP6+LayUI实现数据表格

新函数FILTER函数_filter函数的作用

营商在上海_营商上海数字科技有限公司

Excel筛选也智能?一个FILTER函数就搞定!