three实现三维中国象棋简单人机对战游戏代码-html代码-BFW代码库

three实现三维中国象棋简单人机对战游戏代码

代码语言：html

所属分类：游戏

代码描述：three实现三维中国象棋简单人机对战游戏代码码

下面为部分代码预览，完整代码请点击下载或在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中国象棋 人机对战</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%;
    }
    #ui {
      position: absolute;
      top: 16px;
      left: 16px;
      z-index: 10;
      min-width: 290px;
      padding: 14px 16px;
      border-radius: 14px;
      background: rgba(20, 20, 20, 0.72);
      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: 24px;
      margin-top: 4px;
      margin-bottom: 12px;
      color: #bde1ff;
    }
    .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);
    }
    #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.7;
      backdrop-filter: blur(6px);
    }
    canvas { display: block; }
  </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="flipBtn">切换视角</button>
      </div>
    </div>
    <div id="tip">你执红，电脑执黑。先点棋子，再点目标位置或对方棋子。</div>
  </div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.160.js"></script>
  <script>
    const CELL = 10;
    const BOARD_SURFACE_Y = 2.32;
    const PIECE_RADIUS = 3.9;
    const PIECE_HEIGHT = 2.3;
    const WIN_SCORE = 100000000;
    const SEARCH_INF = 1000000000;

    const COLOR_NAME = {
      red: "红方",
      black: "黑方"
    };

    const LABELS = {
      king:     { red: "帅", black: "将" },
      advisor:  { red: "仕", black: "士" },
      elephant: { red: "相", black: "象" },
      horse:    { red: "马", black: "马" },
      rook:     { red: "车", black: "车" },
      cannon:   { red: "炮", black: "炮" },
      soldier:  { red: "兵", black: "卒" }
    };

    const BASE_VALUE = {
      king: 100000,
      rook: 900,
      cannon: 460,
      horse: 430,
      elephant: 220,
      advisor: 220,
      soldier: 100
    };

    let scene, camera, renderer, raycaste.........完整代码请登录后点击上方下载按钮下载查看