js+css实现带音效中国象棋多人对战人机对战代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：js+css实现带音效中国象棋多人对战人机对战代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中国象棋</title>
    <style>
        :root {
            /* --- Board & General --- */
            --board-bg: #f5e4c3;
            --line-color: #8b5e34;
            --panel-bg: #ffffff;
            --text-color: #212529;
            --muted-text-color: #6c757d;
            --border-radius: 8px;
            --shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            
            /* --- Pieces (NEW & IMPROVED) --- */
            /* Red Piece */
            --red-piece-bg: radial-gradient(circle at 50% 40%, #e74c3c, #c0392b);
            --red-piece-text: #fdebd0;
            --red-piece-border: #943126;
            --red-piece-text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
            --red-piece-shadow: 3px 3px 7px rgba(0, 0, 0, 0.4);
            --red-piece-highlight: inset 0 3px 3px rgba(255, 255, 255, 0.3);

            /* Black Piece */
            --black-piece-bg: radial-gradient(circle at 50% 40%, #566573, #2c3e50);
            --black-piece-text: #fdebd0;
            --black-piece-border: #212f3d;
            --black-piece-text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
            --black-piece-shadow: 3px 3px 7px rgba(0, 0, 0, 0.4);
            --black-piece-highlight: inset 0 3px 3px rgba(255, 255, 255, 0.2);

            /* --- Indicators --- */
            --selected-glow: 0 0 15px rgba(255, 215, 0, 0.9);
            --last-move-color: rgba(25, 135, 84, 0.5);
            --possible-move-color: rgba(25, 135, 84, 0.3);
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            padding: 20px;
            box-sizing: border-box;
            color: var(--text-color);
        }

        .game-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: flex-start;
            gap: 30px;
        }

        .board-wrapper {
            position: relative;
            width: 540px;
            height: 600px;
            background-color: var(--board-bg);
            border: 2px solid var(--line-color);
            box-shadow: var(--shadow);
            border-radius: var(--border-radius);
        }

        .board {
            display: grid;
            grid-template-columns: repeat(9, 60px);
            grid-template-rows: repeat(10, 60px);
        }

        .square {
            width: 60px;
            height: 60px;
            position: relative;
        }

        /* 绘制棋盘线 */
        .square::before, .square::after {
            content: '';
            position: absolute;
            background-color: var(--line-color);
            z-index: 1;
        }
        .square::before { width: 100%; height: 2px; top: 50%; left: 0; transform: translateY(-50%); }
        .square::after { height: 100%; width: 2px; left: 50%; top: 0; transform: translateX(-50%); }
        
        /* 边缘线处理 */
        .row-0 .square::after { height: 50%; top: 50%; }
        .row-9 .square::after { height: 50%; top: 0; }
        .col-0 .square::before { width: 50%; left: 50%; }
        .col-8 .square::before { width: 50%; left: 0; }
        .row-0.col-0 .square::before, .row-0.col-8 .square::before, .row-9.col-0 .square::before, .row-9.col-8 .square::before { width: 0; }
        .row-0.col-0 .square::after, .row-0.col-8 .square::after, .row-9.col-0 .square::after, .row-9.col-8 .square::after { height: 0; }

        /* 绘制九宫格斜线 */
        .palace-line {
            position: absolute;
            width: 170px;
            height: 2px;
            background-color: var(--line-color);
            z-index: 1;
        }
       /* 绘制九宫格斜线 (已修正) */
        .palace-line {
            position: absolute;
            width: 170px; /* sqrt(120*120 + 120*120) ≈ 169.7px */
            height: 2px;
            background-color: var(--line-color);
            transform-origin: center center; /* 确保围绕中心旋转 */
            z-index: 1;
        }
        #palace-top-1 {    top: 87px;
    left: 184px; transform: rotate(45deg); }
        #palace-top-2 { top: 88px;
    left: 187px; transform: rotate(-45deg); }
        #palace-bottom-1 {    bottom: 88px;
    left: 184px; transform: rotate(-45deg); }
        #palace-bottom-2 { bottom: 88px;
    left: 186px; transform: rotate(45deg); }

        /* 楚河汉界 */
        .river {
            background-color: var(--board-bg);
            position: absolute;
            top: 270px;
            left: 0;
            width: 100%;
            height: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 28px;
            letter-spacing: 2em;
            color: var(--line-color);
            z-index: 2;
        }
        .row-4 .square::after, .row-5 .square::after { height: 0; }
        
        /* --- [CLEANED UP] 炮/兵位置标记 --- */
        .marker-point .marker-corner {
            position: absolute;
            width: 8px;
            height: 8px;
            z-index: 1;
        }
        .marker-corner.top-left     { top: 0; left: 0; }
        .marker-corner.top-right    { top: 0; right: 0; }
        .marker-corner.bottom-left  { bottom: 0; left: 0; }
        .marker-corner.bottom-right { bottom: 0; right: 0; }
        .marker-point .marker-corner::before,
        .marker-point .marker-corner::after {
            content: '';
            position: absolute;
            background-color: var(--line-color);
        }
        .marker-corner.top-left::before   { width: 2px; height: 100%; top: -100%; left: -1px; }
        .marker-corner.top-left::after    { height: 2px; width: 100%; top: -1px; left: -100%; }
        .marker-corner.top-right::before  { width: 2px; height: 100%; top: -100%; right: -1px; }
        .marker-corner.top-right::after   { height: 2px; width: 100%; top: -1px; right: -100%; }
        .marker-corner.bottom-left::before{ width: 2px; height: 100%; bottom: -100%; left: -1px; }
        .marker-corner.bottom-left::after { height: 2px; width: 100%; bottom: -1px; left: -100%; }
        .marker-corner.bottom-right::before{ width: 2px; height: 100%; bottom: -100%; right: -1px; }
        .marker-corner.bottom-right::after{ height: 2px; width.........完整代码请登录后点击上方下载按钮下载查看