交通轨迹动画效果-html代码-BFW代码库

交通轨迹动画效果

代码语言：html

所属分类：动画

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title> traffic</title>

</head>
<body translate="no">

<script>
      "use strict";

/* no street : they run everywhere
              */
window.addEventListener("load", function () {

  let canv, ctx;
  let sqSide;
  let nbx, nby; // nb of squares horiz. / vert.
  let terrain; // bi-dimensionnal array for car paths

  let cars;
  let blocked, veryVeryBlocked; // thresholds for blocking detection

  let carsMaxLength; // maximum length for cars
  let nbCars; // number of cars
  let initTime;
  let msByStep; // interval between 2 moves

  /********************************************************
  parameters - play with them
  ********************************************************/

  const bgColor = '#004'; // background color

  nbCars = 20; // number of cars

  /* an 'element' is a little square - a car id made of a few elements */
  carsMaxLength = 15; // cars max length (in elements, not pixels)
  nbx = 50; // width (in elements)
  msByStep = 100; // ms between 2 moves

  blocked = 2 * carsMaxLength; // threshold for blocking detection
  veryVeryBlocked = 3 * carsMaxLength; // threshold for blocking detection

  //********************************************************

  // shortcuts for Math
  const mrandom = Math.random;
  const mfloor = Math.floor;
  const mceil = Math.ceil;
  const mround = Math.round;
  const mabs = Math.abs;
  const mmin = Math.min;
  const mmax = Math.max;

  const mPI = Math.PI;
  const mPIS2 = Math.PI / 2;
  const m2PI = Math.PI * 2;
  const msin = Math.sin;
  const mcos = Math.cos;
  const matan2 = Math.atan2;

  const mhypot = Math.hypot;
  const msqrt = Math.sqrt;

  //------------------------------------------------------------------------
  // classe Car

  function Car(index) {

    /*
                         color
                         points = [[x,y],[x,y]..]
                         dir      0 1 2 3 = up right down left
                         index    identifier
                         ntci     nb of turns without moving
                         nbSteps    nb of steps to go ahead in a direction
                       
                       */
    let kx, ky, lum;

    //  lum = (index == 0) ? 70 : 30;
    lum = 60;
    this.color = `hsl(${alea(360)}, 100%, ${lum}%)`;

   .........完整代码请登录后点击上方下载按钮下载查看