js+css实现与openai兼容大模型进行人机三维中国象棋游戏代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：js+css实现与openai兼容大模型进行人机三维中国象棋游戏代码，支持openai兼容的所有大模型api，要设置apikey才能进行人与ai的中国象棋对战。

下面为部分代码预览，完整代码请点击下载或在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>3D 中国象棋 - OpenAI 人机对战</title>
  <style>
    * { box-sizing: border-box; }
    html, body {
      margin: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: #1b1c1d;
      font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
    }
    #app {
      position: relative;
      width: 100%;
      height: 100%;
    }
    canvas { display: block; }

    #ui {
      position: absolute;
      top: 16px;
      left: 16px;
      z-index: 10;
      min-width: 330px;
      max-width: 420px;
      padding: 14px 16px;
      border-radius: 14px;
      background: rgba(20, 20, 20, 0.74);
      color: #fff;
      backdrop-filter: blur(8px);
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
      user-select: none;
    }
    #title {
      font-size: 22px;
      font-weight: 700;
      color: #ffd98a;
      margin-bottom: 8px;
    }
    #roleInfo, #turnInfo, #msg {
      font-size: 14px;
      line-height: 1.7;
    }
    #turnInfo {
      font-size: 16px;
      margin-top: 4px;
      color: #dfeaff;
    }
    #msg {
      min-height: 28px;
      margin-top: 4px;
      margin-bottom: 12px;
      color: #bde1ff;
      white-space: pre-wrap;
      word-break: break-word;
    }
    .btns {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    button {
      border: none;
      border-radius: 9px;
      padding: 9px 14px;
      background: #efb34f;
      color: #2f1c00;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      transition: 0.18s ease;
    }
    button:hover {
      transform: translateY(-1px);
      filter: brightness(1.04);
    }
    button:active {
      transform: translateY(0);
    }
    button.secondary {
      background: #38424a;
      color: #f3f6fa;
    }
    #tip {
      position: absolute;
      right: 16px;
      bottom: 16px;
      z-index: 10;
      padding: 10px 12px;
      border-radius: 10px;
      background: rgba(20, 20, 20, 0.66);
      color: #f4f4f4;
      font-size: 13px;
      line-height: 1.75;
      backdrop-filter: blur(6px);
      user-select: none;
      max-width: 360px;
    }

    #modalWrap {
      position: absolute;
      inset: 0;
      z-index: 20;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, 0.42);
      backdrop-filter: blur(6px);
    }
    #modalWrap.show {
      display: flex;
    }
    #modal {
      width: min(92vw, 560px);
      background: #11181f;
      color: #f4f7fb;
      border-radius: 16px;
      box-shadow: 0 18px 50px rgba(0,0,0,0.42);
      padding: 20px;
    }
    #modal h2 {
      margin: 0 0 10px;
      font-size: 24px;
      color: #ffd98a;
    }
    #modal p {
      margin: 8px 0 14px;
      color: #d6e4f0;
      line-height: 1.7;
      font-size: 14px;
    }
    .field {
      margin-bottom: 12px;
    }
    .field label {
      display: block;
      margin-bottom: 6px;
      font-size: 14px;
      color: #d8e8ff;
    }
    .field input {
      width: 100%;
      border: 1px solid #30404f;
      outline: none;
      border-radius: 10px;
      padding: 11px 12px;
      background: #0d1217;
      color: #fff;
      font-size: 14px;
    }
    .field input:focus {
      border-color: #70b6ff;
      box-shadow: 0 0 0 3px rgba(112, 182, 255, 0.15);
    }
    #modalError {
      min-height: 22px;
      color: #ff9f9f;
      font-size: 14px;
      margin: 2px 0 10px;
    }
    #modalBtns {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
  </style>
</head>
<body>
  <div id="app">
    <div id="ui">
      <div id="title">3D 中国象棋</div>
      <div id="roleInfo"></div>
      <div id="turnInfo"></div>
      <div id="msg"></div>
      <div class="btns">
        <button id="undoBtn">悔棋</button>
        <button id="resetBtn">重开</button>
        <button id="settingsBtn" class="secondary">设置 API</button>
        <button id="redViewBtn" class="secondary">红方视角</button>
        <button id="blackViewBtn" class="secondary">黑方视角</button>
        <button id="topViewBtn" class="secondary">顶部视角</button>
      </div>
    </div>

    <div id="tip">
      左键旋转，右键平移，滚轮缩放。<br />
      你执红，OpenAI 执黑。<br />
      先点棋子，再点目标位置或敌方棋子。
    </div>

    <div id="modalWrap" class="show">
      <div id="modal">
        <h2>设置 OpenAI API</h2>
        <p>先填好 Key 再开始。下面默认是官方接口地址和常用模型，也可以自行修改。</p>

        <div class="field">
          <label for="apiKeyInput">API Key</label>
          <input id="apiKeyInput" type="password" placeholder="sk-..." />
        </div>

        <div class="field">
          <label for="modelInput">模型</label>
          <input id="modelInput" type="text.........完整代码请登录后点击上方下载按钮下载查看