资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

中国象棋 - 完整版

创作时间:

作者:

@小白创作中心

中国象棋 - 完整版

引用

百度

等

来源

https://jingyan.baidu.com/article/eb9f7b6d77e6be869264e844.html

https://blog.csdn.net/weixin_37791679/article/details/127545048

https://zhuanlan.zhihu.com/p/98399454

https://blog.csdn.net/weixin_68002864/article/details/130361148

https://blog.csdn.net/TriDiamond6/article/details/109377854

https://blog.csdn.net/qq_52537838/article/details/122275174

https://www.zh.xiangqi.com/how-to-play/

http://m.xiangqiqipu.com/Category/View-32159.html

https://juejin.cn/post/7290728513463140371

10.

https://juejin.cn/post/7168730056414461966

11.

http://www.homygame.com/ngscom/help/xiangqi.htm

12.

https://zh.wikipedia.org/wiki/%E4%B8%AD%E5%9C%8B%E8%B1%A1%E6%A3%8B%E5%9B%9B%E5%A4%A7%E4%BD%88%E5%B1%80

中国象棋作为中华民族传统文化的瑰宝，不仅是一种智力竞技游戏，更凝结着古代军事思想和哲学智慧。在数字化时代，将象棋游戏搬上网页，不仅能让我们随时随地享受对弈的乐趣，还能通过编程实践提升技术能力。本文将手把手教你使用HTML、CSS和JavaScript实现一个互动式的中国象棋游戏界面。

HTML结构搭建

首先，我们需要搭建基本的HTML结构。创建一个包含棋盘和棋子的容器，使用div元素来表示棋盘和各个棋子。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>中国象棋 - 完整版</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="chess-board" id="board">
        <!-- 棋盘线条和棋子将由JavaScript生成 -->
        <div class="river-text">楚河　　汉界</div>
    </div>

    <script src="scripts.js"></script>
</body>
</html>

这里我们定义了一个chess-board类的div作为棋盘容器，并在其中添加了“楚河汉界”的文字标识。接下来，我们将通过CSS来绘制棋盘的线条和样式。

CSS样式实现

棋盘的绘制主要依靠CSS的绝对定位和背景色。我们需要绘制9条竖线、10条横线以及九宫的斜线。

body {
    display: flex;
    justify-content: center;
    background: #f0f0f0;
    margin: 0;
    padding: 20px;
}

.chess-board {
    position: relative;
    width: 560px;
    height: 620px;
    background: #f0d9b5;
    border: 3px solid #665;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

/* 横纵线基础样式 */
.line {
    position: absolute;
    background: #333;
}

/* 纵线 */
.vertical {
    width: 2px;
    height: 100%;
    top: 0;
}

/* 横线 */
.horizontal {
    width: 100%;
    height: 2px;
    left: 0;
}

/* 九宫斜线 */
.diagonal {
    width: 2px;
    transform-origin: top;
    background: #333;
}

/* 楚河汉界 */
.river-text {
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    font: bold 28px/1.5 "楷体", cursive;
    color: #665;
    transform: translateY(-50%);
}

/* 棋子样式 */
.piece {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.2s;
    transform: translate(-50%, -50%);
    user-select: none;
}

.red {
    background: #c33;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.black {
    background: #333;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.selected {
    transform: translate(-50%, -50%) scale(1.2);
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

这段CSS代码实现了以下功能：

棋盘的背景色和边框
横纵线的绘制
九宫斜线的绘制
楚河汉界的文字样式
棋子的样式和颜色区分
选中状态的高亮效果

JavaScript交互逻辑

最后，我们需要通过JavaScript来实现棋盘的初始化、棋子的生成以及交互逻辑。

// 初始化棋盘
function initBoard() {
    const board = document.getElementById('board');
    
    // 生成纵线（9条）
    for (let i = 0; i < 9; i++) {
        const line = document.createElement('div');
        line.className = 'line vertical';
        line.style.left = `${(i * 10) + 10}%`;
        board.appendChild(line);
    }

    // 生成横线（10条，跳过河界）
    for (let i = 0; i < 10; i++) {
        if(i === 4 || i === 5) continue;
        const line = document.createElement('div');
        line.className = 'line horizontal';
        line.style.top = `${(i * 10) + 10}%`;
        board.appendChild(line);
    }

    // 生成九宫斜线
    const createDiagonal = (left, angle) => {
        const diag = document.createElement('div');
        diag.className = 'line diagonal';
        diag.style.left = `${left}%`;
        diag.style.height = '30%';
        diag.style.transform = `rotate(${angle}deg)`;
        return diag;
    }
    board.appendChild(createDiagonal(10, 45));   // 左侧九宫
    board.appendChild(createDiagonal(90, -45));  // 右侧九宫
}

// 棋子数据
const pieces = [
    // 红方棋子
    { type: '車', x: 0, y: 0, color: 'red' }, { type: '馬', x: 1, y: 0, color: 'red' },
    { type: '相', x: 2, y: 0, color: 'red' }, { type: '仕', x: 3, y: 0, color: 'red' },
    { type: '帥', x: 4, y: 0, color: 'red' }, { type: '仕', x: 5, y: 0, color: 'red' },
    { type: '相', x: 6, y: 0, color: 'red' }, { type: '馬', x: 7, y: 0, color: 'red' },
    { type: '車', x: 8, y: 0, color: 'red' }, { type: '砲', x: 1, y: 2, color: 'red' },
    { type: '砲', x: 7, y: 2, color: 'red' }, { type: '兵', x: 0, y: 3, color: 'red' },
    { type: '兵', x: 2, y: 3, color: 'red' }, { type: '兵', x: 4, y: 3, color: 'red' },
    { type: '兵', x: 6, y: 3, color: 'red' }, { type: '兵', x: 8, y: 3, color: 'red' },
    
    // 黑方棋子
    { type: '車', x: 0, y: 9, color: 'black' }, { type: '馬', x: 1, y: 9, color: 'black' },
    { type: '象', x: 2, y: 9, color: 'black' }, { type: '士', x: 3, y: 9, color: 'black' },
    { type: '將', x: 4, y: 9, color: 'black' }, { type: '士', x: 5, y: 9, color: 'black' },
    { type: '象', x: 6, y: 9, color: 'black' }, { type: '馬', x: 7, y: 9, color: 'black' },
    { type: '車', x: 8, y: 9, color: 'black' }, { type: '炮', x: 1, y: 7, color: 'black' },
    { type: '炮', x: 7, y: 7, color: 'black' }, { type: '卒', x: 0, y: 6, color: 'black' },
    { type: '卒', x: 2, y: 6, color: 'black' }, { type: '卒', x: 4, y: 6, color: 'black' },
    { type: '卒', x: 6, y: 6, color: 'black' }, { type: '卒', x: 8, y: 6, color: 'black' }
];

// 创建棋子
function createPieces() {
    pieces.forEach(p => {
        const piece = document.createElement('div');
        piece.className = `piece ${p.color}`;
        piece.textContent = p.type;
        piece.style.left = `${(p.x * 10 + 10)}%`;
        piece.style.top = `${(p.y * 10 + 10)}%`;
        piece.dataset.x = p.x;
        piece.dataset.y = p.y;
        piece.addEventListener('click', handleClick);
        document.getElementById('board').appendChild(piece);
    });
}

// 点击处理
let selectedPiece = null;
function handleClick(e) {
    const piece = e.target;
    
    if (piece.classList.contains('piece')) {
        if (selectedPiece) {
            selectedPiece.classList.remove('selected');
        }
        selectedPiece = piece;
        piece.classList.add('selected');
    } else {
        // 移动棋子（简单示例）
        if (selectedPiece) {
            const rect = document.getElementById('board').getBoundingClientRect();
            const x = ((e.clientX - rect.left) / rect.width * 100).toFixed(0);
            const y = ((e.clientY - rect.top) / rect.height * 100).toFixed(0);
            
            selectedPiece.style.left = `${x}%`;
            selectedPiece.style.top = `${y}%`;
            selectedPiece.dataset.x = Math.round((x - 10)/10);
            selectedPiece.dataset.y = Math.round((y - 10)/10);
            selectedPiece.classList.remove('selected');
            selectedPiece = null;
        }
    }
}

// 初始化
initBoard();
createPieces();

这段JavaScript代码实现了以下功能：