JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="light">
</div>
<div id="car1" class="car">
</div>
<div id="car2" class="car">
</div>
<div id="car3" class="car">
</div>
<script src='./script.js'>
</script>
</body>
</html>
CSS
body {
color: cyan;
background-image: url('./1234.jpg');
width: 100vh;
border: 5px solid red;
}
.light {
margin: 0 auto;
background-color: red;
border-radius: 50%;
width: 50px;
height: 50px;
}
.green {
background-color: green;
}
.car {
background: url(./1111.png) no-repeat center;
background-size: cover;
width: 70px;
height: 30px;
position: absolute;
background-color: blue;
}
#car1 {
top: 100px;
}
#car2 {
top: 300px;
}
#car3 {
top: 500px;
right: 0px;
}
JavaScript
const light = document.querySelector(".light");
class Car {
constructor(carID, speed) {
this.car = document.getElementById(carID);
this.speed = speed;
this.directionFactor = 1;
}
move() {
if (
this.car.offsetLeft + this.speed > document.body.style.width ||
this.car.offsetLeft - this.speed < 0
) {
this.directionFactor *= -1;
this.car.classList.toggle('rotate180');
}
this.car.style.left =
this.car.offsetLeft + this.directionFactor * this.speed + "px";
}
}
let car1 = new Car("car1", 5);
let car2 = new Car("car2", 1);
let car3 = new Car("car3", 2);
let isGreen = true;
let moving;
function wor() {
if (isGreen) {
moving = setInterval(() => {
car1.move();
car2.move();
car3.move();
}, 10);
} else {
clearInterval(moving);
}
isGreen = !isGreen;
light.classList.toggle("green");
setTimeout(wor, 5000);
}
wor();