js实现交通路口十字路口仿真智能红绿灯信号控制算法可视化演示代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：js实现交通路口十字路口仿真智能红绿灯信号控制算法可视化演示代码，模拟真实路口场景下的交通车流量，通过算法来演示红绿灯的通勤率到达率效率。

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

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>自适应信号控制的十字路口仿真（单文件）</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
    html, body {
      margin: 0; padding: 0; background: #0f1720; color: #dbe7ff; font-family: system-ui, -apple-system, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
      height: 100%;
    }
    .wrap {
      display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px;
    }
    .toolbar {
      display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
      background: #111a24; border: 1px solid #1f2b36; border-radius: 10px; padding: 8px 12px;
      box-shadow: 0 2px 16px rgba(0,0,0,0.25);
    }
    .toolbar button, .toolbar input[type="range"] {
      cursor: pointer;
    }
    .toolbar .label {
      color: #b6c8e7; font-size: 12px;
    }
    canvas {
      background: #0a0f13; border-radius: 12px; border: 1px solid #1f2b36;
      box-shadow: 0 8px 32px rgba(0,0,0,0.35);
      max-width: 95vw; height: auto;
    }
    .hint {
      color: #8fb3ff; font-size: 12px; opacity: 0.9;
    }
    .credit {
      color: #6c819e; font-size: 11px; opacity: 0.8; margin-top: 4px;
    }
    /* HUD 样式（画在 canvas 上，但这里备用） */
  </style>
</head>
<body>
  <div class="wrap">
    <div class="toolbar">
      <button id="btnPause">暂停</button>
      <button id="btnReset">重置</button>
      <span class="label">速度 x<span id="speedVal">1.0</span></span>
      <input id="speedRange" type="range" min="0.25" max="3" step="0.05" value="1" />
      <label class="label"><input id="chkDebug" type="checkbox" /> 显示调试</label>
      <span class="label">提示：空格=暂停/继续</span>
    </div>
    <canvas id="cv" width="900" height="900"></canvas>
    <div class="hint">自适应控制策略：综合考虑各方向“排队车辆数 + 等待时间压力”，设定最小/最大绿灯时长并可提前终止或延长，自动选择切换时机与持续时间。</div>
    <div class="credit">车辆会识别本方向的矩形红绿灯：绿灯行、红灯停；通过率与平均等待时间实时展示。</div>
  </div>

  <script>
  ;(() => {
    'use strict';

    // 画布和基本场景尺寸
    const canvas = document.getElementById('cv');
    const ctx = canvas.getContext('2d');

    // 适配高 DPI
    function setupHiDPI() {
      const dpr = Math.max(1, window.devicePixelRatio || 1);
      const displayW = canvas.width;
      const displayH = canvas.height;
      canvas.style.width = displayW + 'px';
      canvas.style.height = displayH + 'px';
      canvas.width = Math.round(displayW * dpr);
      canvas.height = Math.round(displayH * dpr);
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0); // 逻辑坐标仍是 display 像素
    }
    setupHiDPI();

    const W = 900, H = 900;
    const CX = W / 2, CY = H / 2;

    // 路口参数
    const INTERSECTION_SIZE = 240;       // 路口正方形边长
    const HALF = INTERSECTION_SIZE / 2;
    const ROAD_WIDTH = 180;              // 整条道路宽度（包含双向各2车道）
    const LANE_OFFSET = 26;              // 单方向车道中心相对道路中线偏移
    const STOP_MARGIN = 10;              // 停止线距离交叉口的边界距离
    const STOPLINE = {
      N: CY - HALF - STOP_MARGIN,
      S: CY + HALF + STOP_MARGIN,
      W: CX - HALF - STOP_MARGIN,
      E: CX + HALF + STOP_MARGIN
    };

    // 车参数
    const CAR_LENGTH = 20;
    const CAR_WIDTH = 12;
    const GAP = 7;                       // 车辆之间的安全间隙（车头到前车车尾）
    const BASE_SPEED = 95;               // px/s
    let speedMultiplier = 1;

    // 信号控制参数
    let minGreen = 3.5;     // 最小绿灯 s
    let maxGreen = 12;      // 最大绿灯 s
    let allRed = 1.2;       // 相位清空全红 s
    const SWITCH_HYST = 0.18; // 切换迟滞系数（防止来回抖动）

    // 交通相位：两相（NS / EW），保证对向同时放行
    const PHASE_NS = 'NS';
    const PHASE_EW = 'EW';
    const PHASE_ALL_RED = 'ALL_RED';

    // 颜色主题
    const COLORS = {
      road: '#13212e',
      roadEdge: '#1d3346',
      lane: '#233a4e',
      stopLine: '#ffffff',
      intersection: '#0d161f',
      lightRed: '#ff4d4f',
      lightGreen: '#3d.........完整代码请登录后点击上方下载按钮下载查看