js+css实现调用qwen千问大模型api实现ai中国象棋对战游戏代码

代码语言:html

所属分类:游戏

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

代码标签: js css 调用 qwen 千问 大模型 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>Qwen Key
          <input id="apiKey" type="password" placeholder="sk-..." size="16"/>
        </label>
        <label>模型
          <select id="model">
            <option>qwen-max</option>
            <option>qwen-plus</option>
       
          </select>
        </label>
        <label class="row"><input type="checkbox" id=".........完整代码请登录后点击上方下载按钮下载查看

网友评论0