js+css实现调用openai兼容大模型api实现ai中国象棋对战游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：js+css实现调用openai兼容大模型api实现ai中国象棋对战游戏代码，输入apikey，就能使用。其他兼容openai的大模型都行。

代码标签： js css 调用 openai 兼容大模型 api ai 中国象棋对战游戏代码

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

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>中国象棋（支持 OpenAI 人机对战）</title>
<style>
  :root{--bg:#0f1217;--panel:#141b22;--line:#314155;--red:#e5534b;--black:#e5e7eb;--hint:#10b981;--sel:#4f46e5}
  html,body{height:100%;margin:0;background:var(--bg);color:#dbeafe;font-family:system-ui,Segoe UI,Helvetica,Arial}
  .wrap{max-width:1040px;margin:0 auto;padding:14px}
  .top{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:10px}
  .panel{background:var(--panel);border:1px solid #223046;border-radius:14px;padding:10px 12px}
  .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
  input,select,button{background:#0c1117;color:#e5e7eb;border:1px solid #2b3a4f;border-radius:10px;padding:6px 8px}
  button{cursor:pointer}
  button:disabled{opacity:.6;cursor:not-allowed}
  .board-wrap{display:grid;grid-template-columns:720px 1fr;gap:12px}
  svg{width:100%;height:auto;background:#f5e6c6;border-radius:12px;border:1px solid #aa8;box-shadow:inset 0 0 0 2px #caa}
  .stat{line-height:1.6}
  .tag{padding:2px 8px;border-radius:999px;background:#243041;font-size:12px}
  .dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:6px}
  .red{color:var(--red)}
  .blk{color:#111}
  .hr{height:1px;background:#29384c;margin:8px 0}
  .pill{padding:2px 8px;border-radius:999px;background:#243041}
  .hint{fill:var(--hint);opacity:.45}
  .sel{stroke:var(--sel);stroke-width:3}
</style>
</head>
<body>
<div class="wrap">
  <div class="top">
    <div class="panel row">
      <strong>中国象棋</strong>
      <span class="tag">Z 撤销</span>
      <span class="tag">R 重开</span>
    </div>
    <div class="panel">
      <div class="row">
        <label>AI 扮演
          <select id="aiSide">
            <option value="none">关闭（纯双人）</option>
            <option value="red">红方（先手）</option>
            <option value="black">黑方（后手）</option>
          </select>
        </label>
        <label>OpenAI Key
          <input id="apiKey" type="password" placeholder="sk-..." size="16"/>
        </label>
        <label>模型
          <select id="model">
            <option>gpt-4o-mini</option>
            <option>gpt-4o</option>
            <option>gpt-4.1-mini</option>
          </select>
        </label>
        <label class="row"><input type="checkbox" id="randomAI"/> 用随机AI</label>
        <button id="aiThinkBtn">让AI走一步</button>
      </div>
      <div class="row" style="margin-top:6px">
        <small id="status" class="mono">就绪。</small>
      </div>
    </div>
  </div>

  <div class="board-wrap">
    <div id="boardArea"></div>
    <div class="panel">
      <div class="stat">
        <div>行棋方：
          <span id="turnTag" class="pill"><span class="dot" id="turnDot" style="background:var(--red)"></span><span id="turnText">红方</span></span>
        </div>
        <div>着法记录：</div>
        <div id="moves" class="mono" style="height:420px;overflow:auto;background:#0c1117;border-radius:10px;padding:8px;border:1px solid #2b3a4f"></div>
        <div class="hr"></div>
        <div>提示：</div>
        <ul style="margin-top:6px;padding-left:18px;color:#cbd5e1">
          <li>点击棋子显示可走位置，再点击目标落子。</li>
          <li>将帅不能“照面”；炮吃子需隔一个“炮架”。</li>
          <li>AI 不一定很强：我们会校验其走法合法，否则退回随机合法步。</li>
        </ul>
      </div>
    </div>
  </div>
</div>

<script>
/* ---------- 基础数据结构 ---------- */
const RED = 'r', BLACK='b';
const PIECES = {
  r:{R:'车',H:'马',E:'相',A:'仕',K:'帅',C:'炮',P:'兵'},
  b:{R:'車',H:'馬',E:'象',A:'仕',K:'将',C:'炮',P:'卒'}
};
// 初始布局（9x10，x:0..8 左到右；y:0..9 上黑下红）
const START = [
  "rR rH rE rA rK rA rE rH rR",.........完整代码请登录后点击上方下载按钮下载查看