JavaScript. Гонки

Question

Всем привет. Пример учебный. Мне нужно доделать этакую эмуляцию гонок. Логику гонок и финиша я уже продумал. Вопрос вот в чем: "Как сделать одновременный старт сразу нескольких машин (по сути дела это блоки DIV). Текущий код прикладываю. Можете, пожалуйста, помощь. На одной у меня получилось.

<body>
    <div class="race">
        <div class="road">
            <div class="track">
                <div class="car"><img src="Car1.png" alt="Car 1"></div>
            </div>
        </div>
        <div class="road">
            <div class="track">
                <div class="car"><img src="Car2.jpg" alt="Car 2"></div>
            </div>
        </div>
        <div class="road">
            <div class="track">
                <div class="car"><img src="Car3.png" alt="Car 3"></div>
            </div>
        </div>
        <div class="road">
            <div class="track">
                <div class="car"><img src="Car4.png" alt="Car 4"></div>
            </div>
        </div>
        <div class="road">
            <div class="track">
                <div class="car"><img src="Car5.png" alt="Car 5"></div>
            </div>
        </div>
        <div class="road">
            <div class="track">
                <div class="car"><img src="Daria.png" alt="Car 6"></div>
            </div>
        </div>
    </div>
    <input type="button" value="test" id="test">
    <script src="javascript.js"></script>
</body>

Код на JavaScript

'use strict';

let road = document.querySelector('.track'); //Гоночная трасса
let cars = document.querySelectorAll('.car'); //Массив машин

const distance = road.clientWidth; //Расстояние гоночной трассы
const widthCar = document.querySelectorAll('.car')[0].clientWidth; //Ширина машины (по сути блока DIV). Они все одинаковые

let btnStart= document.getElementById('test'); //кнопка старта

btnStart.addEventListener('click', function(){ //Пример запуска на одной машине. Но мне нужно, чтобы я мог запустить на всех одновременно
    let start = Date.now(); //Время старта
    let timer = setInterval(function() {
        let timePassed = Date.now() - start; //Прошедшее время с начала старта
        let randomDistance = Math.floor(Math.random() * (20 - 5) + 5); //Случайное расстояние
        cars[0].style.left = (cars[0].offsetLeft + randomDistance) + 'px'; //Типа машина едет.
        if ((cars[0].offsetLeft + widthCar) > (distance + (widthCar / 5))) { //Пока не пересечет линию
            clearInterval(timer);
        }
      }, 20);
});

Answer 1

let road = document.querySelector('.track'); 
let cars = document.querySelectorAll('.car');

const distance = road.clientWidth; 

const widthCar = document.querySelectorAll('.car')[0].clientWidth;

let btnStart= document.getElementById('test'); 

btnStart.addEventListener('click', function(){ 
    let start = Date.now();
    let timer = setInterval(function() {
        let timePassed = Date.now() - start;
        for( car of cars ) {
          let randomDistance = Math.floor(Math.random() * (20 - 5) + 5); 
        car.style.left = (car.offsetLeft + randomDistance) + 'px'; 
        if ((car.offsetLeft + widthCar) > (distance + widthCar)) { 
            clearInterval(timer);
        }
        }
      }, 20);
});

.car {
  position: relative;
}

.car img {
  width: 35px;
  height: 35px;
}

.race {
  border-right: 15px dashed black;
}

.road {
  width: '100%';
  border: 2px dashed silver;
  border-right: transparent;
  
}

.car {
  position: relative;
}

<div class="race">
        <div class="road">
            <div class="track">
                <div class="car"><img src="https://img.icons8.com/?size=1x&id=21702&format=png" alt="Car 1"></div>
            </div>
        </div>
        <div class="road">
            <div class="track">
                <div class="car"><img src="https://img.icons8.com/?size=1x&id=21703&format=png" alt="Car 2"></div>
            </div>
        </div>
        <div class="road">
            <div class="track">
                <div class="car"><img src="https://img.icons8.com/?size=1x&id=GR0X8aZ3trYu&format=png" alt="Car 3"></div>
            </div>
        </div>
        <div class="road">
            <div class="track">
                <div class="car"><img src="https://img.icons8.com/?size=512&id=36738&format=png" alt="Car 4"></div>
            </div>
        </div>
        <div class="road">
            <div class="track">
                <div class="car"><img src="https://img.icons8.com/?size=1x&id=J0im2VMpg6mr&format=png" alt="Car 5"></div>
            </div>
        </div>
        <div class="road">
            <div class="track">
                <div class="car"><img src="https://img.icons8.com/?size=1x&id=24166&format=png" alt="Car 6"></div>
            </div>
        </div>
    </div>
    <input type="button" value="start" id="test">

БЛОГ НА HUSL

JavaScript. Гонки

Ответы (1 шт):