alert("It is not a very effective way of making a car AI for traffic😅. It can hit a car while turning. I thought of adding the same AI to other blue cars too but it created a lot of chaos and they were crashing a lot (this shows how bad the AI is). So I tried to keep it simple. You can increase the traffic by changing value of n in line 3 of js.") var hits = 0, speed=5, rot=0, car, t = [], turns=0, t1, t2, t3, lanes = 4, body, road, n = 10, speeds = [], rots = [], cars, l = [], carslanes = [], check, count=0, carlane; const pf = x => parseFloat(x); for (let i = 0; i < n; i++) { speeds.push(Math.random()*2+3.2); carslanes.push(Math.floor(Math.random()*4)) rots.push(0); } function CalcX(lane) { return body.offsetWidth/2-170+340*lane/lanes+170/lanes-20; } function LanesMovement() { let i = 0, lane = document.getElementsByClassName("lane"); while (lane[i]) { let a = pf(lane[i].style.top); lane[i].style.top = a+Math.cos(rot*Math.PI/180)*speed-(a>730 ? 930 : 0) + "px"; i+=1; } } function CarMovement() { check = document.getElementById("check"); car = document.getElementById("car"); rot = pf(car.style.transform.slice(7)); car.style.left = pf(car.style.left)+Math.sin(rot*Math.PI/180)*speed + "px"; //check.innerHTML = rot; } function OtherCarsMovement() { cars = document.getElementsByClassName("othercars"); check = document.getElementById("check"); //check.innerHTML = "hello"; for (let i = 0; i < n; i++) { rots[i] = pf(cars[i].style.transform.slice(7)); let front = Math.cos(rots[i]*Math.PI/180)*speeds[i]-Math.cos(rot*Math.PI/180)*speed; cars[i].style.top = pf(cars[i].style.top)-front + "px"; cars[i].style.left = pf(cars[i].style.left)+Math.sin(rots[i]*Math.PI/180)*speed + "px"; if (pf(cars[i].style.top) > 800 || pf(cars[i].style.top) < -300) { speeds[i] = Math.random()*2+3.2; if (speeds[i] >= 5) { cars[i].style.top = Math.random()*100+700 + "px"; } else { cars[i].style.top = Math.random()*-100-200 + "px"; } carslanes[i] = Math.floor(Math.random()*lanes); cars[i].style.left = CalcX(carslanes[i]) + "px"; } } } function Movements() { LanesMovement(); CarMovement(); OtherCarsMovement(); } function CarAI() { car = document.getElementById("car"); cars = document.getElementsByClassName("othercars"); check = document.getElementById("check"); let correctlane, change = true; speed = 5; for (let i = 0; i < n; i++) { let el = document.getElementsByClassName("othercars")[i]; if (pf(el.style.top) > pf(car.style.top)-180 && pf(el.style.top) < pf(car.style.top)-80 && pf(el.style.left) > pf(car.style.left)-0.5 && pf(el.style.left) < pf(car.style.left)+0.5 && speeds[i] < speed) { if (carlane === 0) { correctlane = 1; for (let j = 0; j < n; j++) { if (pf(cars[j].style.top) >= pf(cars[i].style.top) && pf(cars[j].style.top) < pf(car.style.top)+70 && pf(cars[j].style.left) > CalcX(carlane+1)-1 && pf(cars[j].style.left) < CalcX(carlane+1)+1) { speed = speeds[i]; correctlane = carlane; change = false; } } } else if (carlane === lanes-1) { correctlane = lanes-2; for (let j = 0; j < n; j++) { if (pf(cars[j].style.top) >= pf(cars[i].style.top) && pf(cars[j].style.top) < pf(car.style.top)+70 && pf(cars[j].style.left) > CalcX(carlane-1)-1 && pf(cars[j].style.left) < CalcX(carlane-1)+1) { speed = speeds[i]; correctlane = carlane; change = false; } } } else { let x = true, y = false, z = false; for (let j = 0; j < n; j++) { if (pf(cars[j].style.top) >= pf(cars[i].style.top) && pf(cars[j].style.top) < pf(car.style.top)+70 && pf(cars[j].style.left) > CalcX(carlane+1)-1 && pf(cars[j].style.left) < CalcX(carlane+1)+1) { correctlane = carlane-1; x=false; break; } if (pf(cars[j].style.top) >= pf(cars[i].style.top) && pf(cars[j].style.top) < pf(car.style.top)+70 && pf(cars[j].style.left) > CalcX(carlane-1)-1 && pf(cars[j].style.left) < CalcX(carlane-1)+1) { correctlane = carlane+1; x=false; break; } } for (let j = 0; j < n; j++) { if (pf(cars[j].style.top) >= pf(cars[i].style.top) && pf(cars[j].style.top) < pf(car.style.top)+70 && pf(cars[j].style.left) > CalcX(carlane-1)-1 && pf(cars[j].style.left) < CalcX(carlane-1)+1) { y = true; } if (pf(cars[j].style.top) >= pf(cars[i].style.top) && pf(cars[j].style.top) < pf(car.style.top)+70 && pf(cars[j].style.left) > CalcX(carlane+1)-1 && pf(cars[j].style.left) < CalcX(carlane+1)+1) { z = true; } } if (x) { correctlane = carlane+(Math.round(Math.random())===1 ? 1 : -1); } if (y && z) { correctlane = carlane; speed = speeds[i]; change = false; } } if (change) { ChangeLane(car, carlane, correctlane); carlane = correctlane; } } } for (let i = 0; i < n; i++) { for (let j = 0; j <= n; j++) { let car = document.getElementsByClassName("othercars")[i]; let other = document.getElementsByClassName("c")[j]; let otherspeed = (j===0 ? speed : speeds[j-1]); if (pf(other.style.top) >= pf(car.style.top)-150 && pf(other.style.top) <= pf(car.style.top)-90 && pf(other.style.left) >= pf(car.style.left)-1 && pf(other.style.left) <= pf(car.style.left)+1 && speeds[i] > otherspeed) { speeds[i] = otherspeed; } if (pf(other.style.top) != pf(car.style.top) && pf(other.style.top) >= pf(car.style.top)-80 && pf(other.style.top) <= pf(car.style.top)+75 && pf(other.style.left) >= pf(car.style.left)-40 && pf(other.style.left) <= pf(car.style.left)+40) { car.style.top = "1000px"; if (j===0) { hits++; } } } } } window.onload = function() { car = document.getElementById("car"); body = document.getElementById("body"); road = document.getElementById("road"); cars = document.getElementsByClassName("othercars"); check = document.getElementById("check"); for (let i = -170+340/lanes; i <= 170-340/lanes; i+=340/lanes) { for (let j = -200; j < 730; j+=155) { road.innerHTML += `

`; } } let start = body.offsetWidth/2-170; for (let i = 0; i < lanes; i++) { l.push(start+170/lanes) start+=340/lanes; } for (let i = 0; i < n; i++) { body.innerHTML += `

`; } //alert(document.getElementsByClassName("c")[0].style.top); //alert(l); t1 = setInterval(Movements, 20); let dist = []; for (let i =0; i < lanes; i++) { dist.push(Math.abs(pf(car.style.left)+20-l[i])); } carlane = dist.indexOf(Math.min(...dist)); dist[carlane] = Math.max(...dist); let currentlane = dist.indexOf(Math.min(...dist)); ChangeLane(document.getElementById("car"), currentlane, carlane); t2 = setInterval(CarAI, 100); t4 = setInterval(Mistakes, 100); } function ChangeLane(el, currentlane, newlane) { check = document.getElementById("check"); el.style.transform = `rotate(${currentlane>newlane ? -1 : 1}deg)`; //check.innerHTML = el.style.transform; let n = turns++; clearInterval(t[n-1]); t[n] = setInterval(function() { ChangingLane(el, CalcX(newlane), n); },20); } function ChangingLane(el, nl, n) { check = document.getElementById("check"); let rot = pf(el.style.transform.slice(7)); let cl = pf(el.style.left); //check.innerHTML = el.style.transform; if (rot > -50 && rot<0) { el.style.transform = `rotate(${rot-1}deg)`; } else if (rot < 50 && rot>0) { el.style.transform = `rotate(${rot+1}deg)`; } if (Math.abs(cl-nl) < Math.abs(rot) && Math.abs(cl-nl) > 0.1) { el.style.transform = `rotate(${nl-cl+(nl>cl ? 0.5 : -0.5)}deg)`; } else if (Math.abs(cl-nl) < Math.abs(rot)) { el.style.transform = `rotate(0deg)`; clearInterval(t[n]); } } function Mistakes() { document.getElementById("mistakes").innerHTML = "Hits: "+hits; }

Car in traffic (AI)