2

I'm working on the next simple racing game.

I animate the cars using some JQuery code, adding the values that comes from the carspeed array. I have manage to make it work, but i have a problem with the addClass function: once the game started the task is already done, so it is not syncing to the animate function which has 200 duration.

I tried the answers from here but still don't work, I also tried to separate the addClass function inside a setTimeout but didn't work.

Check the next snippet example, Hope you help me.

Thanks.

var cars = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var winningCars = shuffle(cars);

var carSpeeds = [
    [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 15, 16, 17, 18, 19, 20,
     19, 18, 17, 16, 15, 16, 18, 20, 22, 24, 26, 27, 28, 29, 30, 32,
     34, 35, 36, 38, 40, 38, 37, 36, 35, 34, 36, 38, 40, 42, 44, 46,
     48, 50, 50, 50, 49, 48, 47, 91.5],
    [1, 2, 3, 4, 5, 5, 5, 5, 5, 7, 9, 11, 13, 15, 16, 17, 17, 17, 17,
     19, 19, 19, 19, 20, 22, 22, 22, 22, 24, 24, 24, 26, 28, 30, 32,
     34, 35, 35, 35, 35, 37, 39, 41, 43, 45, 46, 47, 48, 49, 50, 51,
     52, 53, 54, 53, 53, 52, 51, 50, 91.5],
    [2, 4, 6, 8, 10, 11, 12, 13, 14, 16, 18, 20, 19, 18, 17, 16, 15,
     15, 15, 15, 16, 17, 18, 19, 20, 21, 22, 24, 25, 26, 27, 28, 29, 30,
     31, 32, 33, 34, 35, 34, 33, 32, 31, 30, 29, 28, 27, 26, 25, 27, 29,
     31, 33, 35, 37, 39, 41, 42, 43, 44, 91.5],
    [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 20, 21, 22, 23,
     24, 25, 23, 21, 19, 17, 17, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26,
     27, 28, 29, 30, 32, 34, 36, 38, 40, 41, 42, 43, 44, 45, 46, 47, 48,
     49, 50, 50, 50, 50, 52, 54, 56, 91.5],
    [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 10, 10, 10, 10, 12, 14, 16, 18, 20,
     22, 24, 23, 22, 21, 20, 19, 18, 19, 20, 21, 22, 23, 24, 26, 28, 28,
     28, 28, 29, 30, 31, 32, 33, 34, 35, 37, 39, 41, 43, 45, 46, 47, 48,
     49, 49, 49, 49, 48, 47, 46, 45, 44, 91.5],
    [1, 2, 3, 4, 5, 5, 5, 5, 5, 6, 8, 10, 12, 14, 14, 14, 16, 17, 17, 17,
     17, 16, 15, 14, 16, 18, 20, 22, 24, 26, 28, 30, 31, 32, 33, 34, 35,
     36, 37, 38, 39, 40, 39, 38, 37, 38, 39, 40, 41, 42, 43, 44, 44, 44,
     44, 46, 48, 50, 48, 47, 46, 48, 50, 91.5],
    [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 14, 16, 18, 20, 22, 24, 23, 23,
     22, 22, 20, 19, 18, 16, 18, 20, 22, 24, 26, 28, 30, 31, 32, 33, 34,
     35, 36, 37, 38, 39, 40, 39, 39, 38, 38, 37, 38, 39, 39, 39, 38, 38,
     38, 38, 38, 38, 38, 40, 42, 44, 46, 48, 50, 91.5],
    [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 15, 15, 16, 16,
     16, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 35, 34, 33,
     32, 31, 30, 29, 28, 27, 26, 27, 28, 28, 28, 28, 27, 28, 29, 30, 31,
     32, 33, 34, 35, 34, 33, 32, 31, 30, 32, 34, 36, 91.5],
    [1, 2, 3, 4, 5, 5, 5, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17,
     18, 18, 18, 18, 19, 20, 21, 22, 23, 24, 23, 22, 21, 20, 19, 18, 17,
     16, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 27, 29, 31, 33, 35,
     37, 39, 40, 40, 40, 40, 41, 41, 41, 43, 45, 47, 91.5],
    [2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 21, 22, 23, 24, 25, 26, 27, 28,
     29, 30, 29, 28, 27, 26, 25, 24, 23, 22, 21, 20, 22, 24, 26, 28, 30,
     32, 34, 36, 38, 40, 41, 41, 41, 41, 41, 42, 43, 44, 45, 46, 47, 48,
     49, 50, 50, 50, 50, 50, 50, 51, 51, 51, 52, 52, 52, 52, 52, 91.5]
];

function burst(current, prev)
{
    const speed = current - prev;

    if (speed <= 2)
    {
        return 'burst';
    }
    else if (speed > 2)
    {
        return 'mega-burst';
    }
}

for (let i = 0; i < winningCars.length; i++)
{
    for (let x = 0; x < carSpeeds[i].length; x++)
    {
        $('.track .lane:nth-child(' + winningCars[i] + ') .cars')
            .removeClass('mega-burst burst')
            .addClass(burst(carSpeeds[i][x], carSpeeds[i][x - 1]))
            .animate({right: carSpeeds[i][x] + '%'}, 200);
    }
}

function shuffle(array)
{
    var currentIndex = array.length, temporaryValue, randomIndex;

    // While there remain elements to shuffle...

    while (0 !== currentIndex)
    {
        // Pick a remaining element...
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;

        // And swap it with the current element.
        temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
    }

    return array;
}
.track {
    position: relative;
    width: 588px;
    height: 490px;
    background-image: url(https://i.postimg.cc/fTP5Q9Bb/road2.png);
    background-position: 0px 0px;
    background-repeat: repeat-x;
}

.track.start {
    animation: animatedBackground 1s linear infinite;
}

@keyframes animatedBackground {
    from {
        background-position: 0 0;
    }

    to {
        background-position: -100% 0;
    }
}

.road {
    position: absolute;
    width: 100%;
    top: 42px;
}

.road .lane {
    height: 17.5px;
    width: 100%;
    margin-bottom: 1px;
    padding-top: 3px;
    position: relative;
}

.road .cars {
    width: 30px;
    height: 15px;
    position: absolute;
    right: 10px;
}

.road .car1 {
     background-color: blue;  
}

.road .car2 {
    background-color: red;  
}

.road .car3 {
    background-color: yellow;  
}

.road .car4 {
    background-color: orange;  
}

.road .car5 {
    background-color: purple;  
}

.road .car6 {
    background-color: black;  
}

.road .car7 {
    background-color: green;  
}

.road .car8 {
    background-color: violet;  
}

.road .car9 {
    background-color: lime;  
}

.road .car10 {
    background-color: gold;  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="track start">
  <div class="road">
    <div class="road-lanes">
      <div class="lane">
        <div class="cars car1"></div>
      </div>
      <div class="lane">
        <div class="cars car2"></div>
      </div>
      <div class="lane">
        <div class="cars car3"></div>
      </div>
      <div class="lane">
        <div class="cars car4"></div>
      </div>
      <div class="lane">
        <div class="cars car5"></div>
      </div>
      <div class="lane">
        <div class="cars car6"></div>
      </div>
      <div class="lane">
        <div class="cars car7"></div>
      </div>
      <div class="lane">
        <div class="cars car8"></div>
      </div>
      <div class="lane">
        <div class="cars car9"></div>
      </div>
      <div class="lane">
        <div class="cars car10"></div>
      </div>
    </div>
  </div>
</div>
Shidersz
  • 16,846
  • 2
  • 23
  • 48
Mark Gerryl Mirandilla
  • 813
  • 1
  • 19
  • 42

2 Answers2

2

As you are iterating classes in for loop, all the manipulations will happen within a loop hence you wont be able to see it happening.

Use setTimeout with proper timeout duration.

var cars = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var winningCars = shuffle(cars);

var carSpeeds = [
  [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 15, 16, 17, 18, 19, 20,
    19, 18, 17, 16, 15,
    16, 18, 20, 22, 24, 26, 27, 28, 29, 30, 32, 34, 35, 36, 38, 40,
    38, 37, 36, 35, 34,
    36, 38, 40, 42, 44, 46, 48, 50, 50, 50, 49,
    48, 47,
    91.5
  ]
}

function burst(current, prev) {

  const speed = current - prev;
  if (speed <= 2) {
    return 'burst';
  } else if (speed > 2) {
    return 'mega-burst';
  }
}
let count = 0;
const timeout = 2000;
for (let i = 0; i < winningCars.length; i++) {
  for (let x = 0; x < carSpeeds[i].length; x++) {

    setTimeout(() => {
      $('.racing-animation-modal .track .lane:nth-child(' + winningCars[i] + ') .cars').removeClass('mega-burst burst').addClass(burst(carSpeeds[i][x], carSpeeds[i][x - 1])).animate({
        right: carSpeeds[i][x] + '%'
      }, 200);
    }, count++ * timeout);
  }
}
Rayon
  • 36,219
  • 4
  • 49
  • 76
1

Here is my approach, using the features of the complete callback method of the JQuery animate function, and a recursive approach. To check how this is done proggresively in time, just uncomment the console.log() inside the moveCar() function. Here is a preview of the main code that manage animations proggresively:

for (let i = 0; i < winningCars.length; i++)
{
    // Start moving the cars.
    setTimeout(function(){moveCar(i, 0);}, 100);
}

function moveCar(carIdx, iteration)
{
    //console.log("Entering iteration: " + iteration + " for car: " + carIdx);

    // Check the stop condition.

    if (iteration >= carSpeeds[carIdx].length)
        return;

    // Get the burst class.

    var burstClass;

    if (iteration > 0)
        burstClass = burst(carSpeeds[carIdx][iteration], carSpeeds[carIdx][iteration - 1]);
    else
        burstClass = burst(carSpeeds[carIdx][iteration], 0);

    // Make an iteration of movement on the car.

    $('.track .lane:nth-child(' + winningCars[carIdx] + ') .cars')
        .removeClass('mega-burst burst')
        .addClass(burstClass)
        .animate({right: carSpeeds[carIdx][iteration] + '%'}, 200, function()
        {
            // On amination complete, call recursively next iteration.
            moveCar(carIdx, iteration + 1);
        });
}

And here you can see the working snippet:

var cars = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var winningCars = shuffle(cars);

var carSpeeds = [
    [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 15, 16, 17, 18, 19, 20,
     19, 18, 17, 16, 15, 16, 18, 20, 22, 24, 26, 27, 28, 29, 30, 32,
     34, 35, 36, 38, 40, 38, 37, 36, 35, 34, 36, 38, 40, 42, 44, 46,
     48, 50, 50, 50, 49, 48, 47, 91.5],
    [1, 2, 3, 4, 5, 5, 5, 5, 5, 7, 9, 11, 13, 15, 16, 17, 17, 17, 17,
     19, 19, 19, 19, 20, 22, 22, 22, 22, 24, 24, 24, 26, 28, 30, 32,
     34, 35, 35, 35, 35, 37, 39, 41, 43, 45, 46, 47, 48, 49, 50, 51,
     52, 53, 54, 53, 53, 52, 51, 50, 91.5],
    [2, 4, 6, 8, 10, 11, 12, 13, 14, 16, 18, 20, 19, 18, 17, 16, 15,
     15, 15, 15, 16, 17, 18, 19, 20, 21, 22, 24, 25, 26, 27, 28, 29, 30,
     31, 32, 33, 34, 35, 34, 33, 32, 31, 30, 29, 28, 27, 26, 25, 27, 29,
     31, 33, 35, 37, 39, 41, 42, 43, 44, 91.5],
    [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 20, 21, 22, 23,
     24, 25, 23, 21, 19, 17, 17, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26,
     27, 28, 29, 30, 32, 34, 36, 38, 40, 41, 42, 43, 44, 45, 46, 47, 48,
     49, 50, 50, 50, 50, 52, 54, 56, 91.5],
    [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 10, 10, 10, 10, 12, 14, 16, 18, 20,
     22, 24, 23, 22, 21, 20, 19, 18, 19, 20, 21, 22, 23, 24, 26, 28, 28,
     28, 28, 29, 30, 31, 32, 33, 34, 35, 37, 39, 41, 43, 45, 46, 47, 48,
     49, 49, 49, 49, 48, 47, 46, 45, 44, 91.5],
    [1, 2, 3, 4, 5, 5, 5, 5, 5, 6, 8, 10, 12, 14, 14, 14, 16, 17, 17, 17,
     17, 16, 15, 14, 16, 18, 20, 22, 24, 26, 28, 30, 31, 32, 33, 34, 35,
     36, 37, 38, 39, 40, 39, 38, 37, 38, 39, 40, 41, 42, 43, 44, 44, 44,
     44, 46, 48, 50, 48, 47, 46, 48, 50, 91.5],
    [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 14, 16, 18, 20, 22, 24, 23, 23,
     22, 22, 20, 19, 18, 16, 18, 20, 22, 24, 26, 28, 30, 31, 32, 33, 34,
     35, 36, 37, 38, 39, 40, 39, 39, 38, 38, 37, 38, 39, 39, 39, 38, 38,
     38, 38, 38, 38, 38, 40, 42, 44, 46, 48, 50, 91.5],
    [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 15, 15, 16, 16,
     16, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 35, 34, 33,
     32, 31, 30, 29, 28, 27, 26, 27, 28, 28, 28, 28, 27, 28, 29, 30, 31,
     32, 33, 34, 35, 34, 33, 32, 31, 30, 32, 34, 36, 91.5],
    [1, 2, 3, 4, 5, 5, 5, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17,
     18, 18, 18, 18, 19, 20, 21, 22, 23, 24, 23, 22, 21, 20, 19, 18, 17,
     16, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 27, 29, 31, 33, 35,
     37, 39, 40, 40, 40, 40, 41, 41, 41, 43, 45, 47, 91.5],
    [2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 21, 22, 23, 24, 25, 26, 27, 28,
     29, 30, 29, 28, 27, 26, 25, 24, 23, 22, 21, 20, 22, 24, 26, 28, 30,
     32, 34, 36, 38, 40, 41, 41, 41, 41, 41, 42, 43, 44, 45, 46, 47, 48,
     49, 50, 50, 50, 50, 50, 50, 51, 51, 51, 52, 52, 52, 52, 52, 91.5]
];

function burst(current, prev)
{
    const speed = current - prev;

    if (speed <= 2)
    {
        return 'burst';
    }
    else if (speed > 2)
    {
        return 'mega-burst';
    }
}

for (let i = 0; i < winningCars.length; i++)
{
    // Start moving the cars.
    setTimeout(function(){moveCar(i, 0);}, 100);
}

function moveCar(carIdx, iteration)
{
    //console.log("Entering iteration: " + iteration + " for car: " + carIdx);

    // Check the stop condition.

    if (iteration >= carSpeeds[carIdx].length)
        return;

    // Get the burst class.

    var burstClass;

    if (iteration > 0)
        burstClass = burst(carSpeeds[carIdx][iteration], carSpeeds[carIdx][iteration - 1]);
    else
        burstClass = burst(carSpeeds[carIdx][iteration], 0);

    // Make an iteration of movement on the car.

    $('.track .lane:nth-child(' + winningCars[carIdx] + ') .cars')
        .removeClass('mega-burst burst')
        .addClass(burstClass)
        .animate({right: carSpeeds[carIdx][iteration] + '%'}, 200, function()
        {
            // On amination complete, call recursively next iteration.
            moveCar(carIdx, iteration + 1);
        });
}

function shuffle(array)
{
    var currentIndex = array.length, temporaryValue, randomIndex;

    // While there remain elements to shuffle...

    while (0 !== currentIndex)
    {
        // Pick a remaining element...
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;

        // And swap it with the current element.
        temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
    }

    return array;
}
.track {
    position: relative;
    width: 588px;
    height: 490px;
    background-image: url(https://i.postimg.cc/fTP5Q9Bb/road2.png);
    background-position: 0px 0px;
    background-repeat: repeat-x;
}

.track.start {
    animation: animatedBackground 1s linear infinite;
}

@keyframes animatedBackground {
    from {
        background-position: 0 0;
    }

    to {
        background-position: -100% 0;
    }
}

.road {
    position: absolute;
    width: 100%;
    top: 42px;
}

.road .lane {
    height: 17.5px;
    width: 100%;
    margin-bottom: 1px;
    padding-top: 3px;
    position: relative;
}

.road .cars {
    width: 30px;
    height: 15px;
    position: absolute;
    right: 10px;
}

.road .car1 {
     background-color: blue;  
}

.road .car2 {
    background-color: red;  
}

.road .car3 {
    background-color: yellow;  
}

.road .car4 {
    background-color: orange;  
}

.road .car5 {
    background-color: purple;  
}

.road .car6 {
    background-color: black;  
}

.road .car7 {
    background-color: green;  
}

.road .car8 {
    background-color: violet;  
}

.road .car9 {
    background-color: lime;  
}

.road .car10 {
    background-color: gold;  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="track start">
  <div class="road">
    <div class="road-lanes">
      <div class="lane">
        <div class="cars car1"></div>
      </div>
      <div class="lane">
        <div class="cars car2"></div>
      </div>
      <div class="lane">
        <div class="cars car3"></div>
      </div>
      <div class="lane">
        <div class="cars car4"></div>
      </div>
      <div class="lane">
        <div class="cars car5"></div>
      </div>
      <div class="lane">
        <div class="cars car6"></div>
      </div>
      <div class="lane">
        <div class="cars car7"></div>
      </div>
      <div class="lane">
        <div class="cars car8"></div>
      </div>
      <div class="lane">
        <div class="cars car9"></div>
      </div>
      <div class="lane">
        <div class="cars car10"></div>
      </div>
    </div>
  </div>
</div>
Shidersz
  • 16,846
  • 2
  • 23
  • 48