js实现一个跳棋游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：js实现一个跳棋游戏代码，规则：- 红方在下、蓝方在上，仅能走深色格。 - 普通子斜向前走一步；吃子需跳过对方到其后空格，可连续多跳；可吃则必须吃。 - 走到对方底线加冕为“王”，王可前后移动与吃子。 - 一方无子或无合法步则对方胜。

代码标签： js 跳棋游戏代码

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

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>HTML 跳棋（国际跳棋 · 人机/双人）</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
    :root{
      --bg:#0a0f1c;--panel:#0c1428cc;--text:#e5e7eb;--muted:#94a3b8;--accent:#22d3ee;--good:#22c55e;--warn:#f59e0b;
      --light:#e2e8f0;--dark:#334155;
      --red:#ef4444;--blue:#38bdf8;
    }
    html,body{height:100%;margin:0;background:radial-gradient(1200px 800px at 50% -200px,#0b1022,#060913) fixed;color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial}
    #app{max-width:1000px;margin:14px auto;padding:10px}
    .topbar{
      display:flex;gap:10px;align-items:center;flex-wrap:wrap;
      background:linear-gradient(180deg,#0b1224,#0a1120);border:1px solid #1f2a44;border-radius:12px;
      padding:10px 12px;box-shadow:0 10px 30px #0006, inset 0 1px 0 #ffffff09
    }
    .pill{display:flex;gap:6px;align-items:center;background:#0b152a;border:1px solid #243250;border-radius:999px;padding:6px 10px}
    label{font-size:13px;color:#cbd5e1}
    select,button{
      background:#0b152a;border:1px solid #243250;color:#e5e7eb;border-radius:8px;padding:6px 10px;
      outline:none;transition:.2s;box-shadow:inset 0 0 0 1px #0003;cursor:pointer
    }
    select:hover,button:hover{border-color:#34508c}
    button.primary{background:linear-gradient(180deg,#1f3b74,#1b3364);border-color:#2b478a}
    button:disabled{opacity:.55;cursor:not-allowed}
    .chip{display:inline-flex;gap:6px;align-items:center;border:1px solid #223053;background:#0b152a;border-radius:999px;padding:4px 10px}
    .dot{width:10px;height:10px;border-radius:50%}
    .status{margin-left:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
    .board-wrap{margin-top:12px;display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start}
    canvas{border:1px solid #1a2542;border-radius:16px;box-shadow:0 20px 60px #0009, inset 0 1px 0 #ffffff07;background:radial-gradient(500px 500px at 50% 50%,#0a1227,#060b18)}
    .side{
      min-width:260px;flex:1;background:linear-gradient(180deg,#0b1224,#0a1120);border:1px solid #1f2a44;border-radius:12px;padding:12px;
      box-shadow:0 10px 30px #0006, inset 0 1px 0 #ffffff09
    }
    .side h3{margin:6px 0 8px 0;font-size:16px;color:#e2e8f0}
    .log{height:200px;overflow:auto;background:#0b152a;border:1px solid #1b2743;border-radius:8px;padding:8px;font-size:13px;color:#cbd5e1}
    .hint{color:#a5b4fc}
    .kbd{display:inline-block;border:1px solid #223053;background:#0b152a;border-radius:6px;padding:2px 6px;font-size:12px}
    .footer{margin-top:10px;text-align:center;color:#94a3b8;font-size:12px}
  </style>
</head>
<body>
  <div id="app">
    <div class="topbar">
      <div class="pill">
        <span class="dot" style="background:var(--red)"></span>
        <label>红方</label>
        <select id="sel-red">
          <option value="HUMAN" selected>人类</option>
          <option value="AI">AI</option>
        </select>
      </div>
      <div class="pill">
        <span class="dot" style="background:var(--blue)"></span>
        <label>蓝方</label>
        <select id="sel-blue">
          <option value="HUMAN">人类</option>
          <option value="AI" selected>AI</option>
        </select>
      </div>
      <div class="pill">
        <label>动画速度</label>
        <select id="sel-speed">
          <option value="0">瞬间</option>
          <option value="80">快</option>
          <option value="150" selected>默认</option>
          <option value="260.........完整代码请登录后点击上方下载按钮下载查看