js实现调用openai的api实现中国象棋ai对战的代码-html代码-BFW代码库

js实现调用openai的api实现中国象棋ai对战的代码

代码语言：html

所属分类：游戏

代码描述：js实现调用openai的api实现中国象棋ai对战的代码，输入你的openai的apikey就能实现人与ai的对战，或者ai与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{--cell:64px}
  body{font-family:Arial,Helvetica,sans-serif;margin:10px;background:#f2f7fb}
  #board{width:9*var(--cell);display:grid;grid-template-columns:repeat(9,var(--cell));grid-template-rows:repeat(10,var(--cell));gap:0;border:2px solid #333;margin-bottom:10px}
  .cell{width:var(--cell);height:var(--cell);box-sizing:border-box;background:#fdf6e3;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative}
  .cell.dark{background:#f0e3c9}
  .piece{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px}
  .red{background:#ffebe0;color:#c33}
  .black{background:#ffe;color:#222}
  #controls{display:flex;gap:10px;align-items:center;margin-bottom:10px}
  textarea{width:100%;height:120px}
  .small{font-size:13px;color:#666}
  #log{height:120px;overflow:auto;background:#fff;border:1px solid #ddd;padding:6px}
</style>
</head>
<body>
<h2>中国象棋（演示） — 支持调用 OpenAI API 作为 AI 对手</h2>
<div id="controls">
  <label>模式：
    <select id="mode">
      <option value="human-vs-ai">人机（黑方AI）</option>
      <option value="ai-vs-ai">AI vs AI（双方用OpenAI）</option>
      <option value="human-vs-human">人人对弈</option>
    </select>
  </label>
  <label>OpenAI API Key（可留空改用后端代理）： <input id="apikey" type="password" style="width:260px;" placeholder="sk-..."/></label>
  <label>模型： <input id="model" value="gpt-4o-mini" style="width:140px"/></label>
  <button id="startBtn">开始/重置棋局</button>
  <button id="autoPlay" title="AI vs AI 时自动连续对弈">自动对弈</button>
</div>
<div id="board"></div>
<div style="display:flex;gap:10px;margin-top:10px">
  <div style="flex:1">
    <div class="small">棋局记录（步）</div>
    <div id="log"></div>
  </div>
  <div style="width:420px">
    <div class="small">调试 / 后端示例（说明）</div>
    <textarea id="backendHint">说明：
- 客户端可直接调用 OpenAI（不安全——会暴露 Key）。
- 推荐在.........完整代码请登录后点击上方下载按钮下载查看