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

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

代码语言：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() {
  .........完整代码请登录后点击上方下载按钮下载查看