Introduction to the

After Effects MG animation:

This animation is still very interesting, but xiaobian first reaction this if one day a UI sister or product sister to xiaobian raised this kind of demand, that xiaobian is not on the spot to shut? Following my curiosity, I implemented a simple version of a slot machine:

Slot machine overall appearance style is relatively easy to write, slot machine appearance layout if you are interested in direct reference to the code, xiaobian will not be introduced. This article mainly introduces the middle of the slot machine three small grid and some key points of the body animation. (If readers want to practice, they can also find a background picture as the background of the slot machine, here xiaobian is just curious so I use a variety of basic layout and style to achieve the slot machine)

  • What is the real face of the numbers in the grid?
  • Number list before scrolling points
  • How does the list of numbers in a grid scroll?
  • How does “infinite scrolling” work?
  • How is delayed scrolling of the second and third cells implemented?
  • How do random scrolling results work?
  • How does the game machine shake?
  • Reset the implementation of the game and the points to watch out for
  • How to get slot machine game results?

What is the real face of the numbers in the grid?

This problem is actually very simple, the contents of the grid are simply a UL list, I just added overflow: hidden to the grid to hide the numbers outside the grid. Let’s first take out a grid of numbers list, we can see the whole scrolling process only “1~6” a total of 6 numbers, we can first put the list of 6 numbers to realize.

We use ul and LI labels to make the list, in the layout small make up only write UL, although there are only 1 to 66 cases in the effect picture, but there may be more game results options, so the Li label is not written in the page, li label is added to the UL label through javaScript.

(In order to make it easier for readers to understand the code, I started by thinking that slot machine contents might be images rather than numbers, so variable or className names are associated with “images” in many places.)

  <ul class="images"><ul/>
Copy the code
  // The initial list of options
  let initImagesArr = [6.5.4.3.2.1];
  // Get the first ul list
  const firstImagesList = document.getElementsByClassName('images') [0];
   // add the list li to the UL tag
  initImagesArr.forEach(item= > {
    const li = document.createElement('li');
    li.innerHTML = item;
    firstImagesList.appendChild(li);
  });
Copy the code

This way we can get a ul list like this:

  <ul class="images">
      <li>6</li>
      <li>5</li>
      <li>4</li>
      <li>3</li>
      <li>2</li>
      <li>1</li>
  <ul/>
Copy the code

Similarly, the second and third cells can construct the same list of numbers in the same way. By styling ul and Li, the result looks like this:

Number list before scrolling points

Note that firstImagesList is the first list of numbers, secondsImagesList is the second list of numbers, and thirdImagesList is the third list of numbers. The code:

  const firstImagesList = document.getElementsByClassName('images')[0];
  const secondsImagesList = document.getElementsByClassName('images')[1];
  const thirdImagesList = document.getElementsByClassName('images')[2];
Copy the code

We can see from the animation that the numbers scroll from top to bottom. The scrolling principle uses CSS3’s Transform :translateY() to move. If you scroll down from the top, the layout of your list doesn’t end as soon as you move down.

So one thing we need to do before we move the list, we need to adjust the initial layout of the list to move the whole list up so that the number “1” moves into the grid.

We start by declaring a method that initializes the positioning of a three-digit list, with the parameter startTranslateYHeight representing how far the entire list is to move up.

function initPosition(startTranslateYHeight) {
    firstImagesList.style.transform = `translateY(${startTranslateYHeight}px)`;
    secondsImagesList.style.transform = `translateY(${startTranslateYHeight}px)`;
    thirdImagesList.style.transform = `translateY(${startTranslateYHeight}px)`;
}
Copy the code

Now that we have the move method, we need to figure out how far the list should move up. StartTranslateYHeight. The steps to obtain the upward movement distance include:

  1. The height of the li tag is 136px;
  2. All three lists are the same height, so we take the first list and use the dom built-in property scrollHeight to get the list height;
  3. Since moving the entire list up to the last number 1 will remain in the grid, and there are all six digits in the list, we only need to move up by five digits. So the height of the entire list minus the height of a LI tag is how far we want to move the list up.
  const imageHeight = 136;
  const listHeight = firstImagesList.scrollHeight;
  const startTranslateYHeight = - listHeight + imageHeight;
Copy the code

With a specific distance to move up, we simply execute our initPosition() method.

How does the list of numbers in a grid scroll?

As mentioned earlier, the scrolling principle uses CSS3’s Transform :translateY() to move. Since we start the game by clicking on the controller, we add a click event to the controller and scroll the list in the event. For now, we default to scroll to the last number, regardless of random results.

It would be easier to scroll down to the last number, but we just need to set the distance up to zero to get down.

// Click the gamepad to start the game
function start() {
  firstImagesList.style.transform = 'translateY(0)';
  secondsImagesList.style.transform = 'translateY(0)';
  thirdImagesList.style.transform = 'translateY(0)';
}
Copy the code

Let’s take a look at the current results:

Is there something missing? That’s right, no scrolling animation. We just need to add a transition effect to the list at the start of the game. One might ask why we add the transition at the beginning of the game rather than the first time we write the style. Here’s why: Because small make up the follow-up to reset the game into consideration, the reset process list will return to the first position, if there is a transition style that is reset process also is not very reasonable, in order to ensure the transition style is controlled small make up just defines a method of adding transition, there is also a delete method of transition, we want to have a transition animations is added, Delete if you don’t want the transition animation.

The following code means to add/remove the transition style className for each list separately, and to remove the transition we will use in the reset animation.

// Transition effect.transtion {
    transition: all ease 2s;
  }
Copy the code
  // Add transition effects to all lists
  function addTranstion() {
    firstImagesList.classList.add('transtion');
    secondsImagesList.classList.add('transtion');
    thirdImagesList.classList.add('transtion');
  }

  // Remove transition effects from all lists
  function removeTranstion(imagesList) {
    firstImagesList.classList.remove('transtion');
    secondsImagesList.classList.remove('transtion');
    thirdImagesList.classList.remove('transtion');
  }
Copy the code

Then we just need to start calling the add transition method in the game method:

function start() {
  // The game starts to add transition effects to the entire list of numbers
  addTranstion();
  firstImagesList.style.transform = 'translateY(0)';
  secondsImagesList.style.transform = 'translateY(0)';
  thirdImagesList.style.transform = 'translateY(0)';
}
Copy the code

So far we have implemented the scrolling effect for a list of numbers, but we just did a simple scroll from 1 to 6, not from scratch. Simply put, scrolling doesn’t last as long as it does in renderings. We are going to implement the “start from scratch”, “scroll infinitely” effect.

How does “infinite scrolling” work?

In the renderings, we can see that when the number 6 finishes scrolling, it should start scrolling again with the number 1. Without further explanation, we’ll get to the bottom of the mystery.

Some small partners may see here to understand the small series is how to achieve. I’m not actually doing “infinite scrolling” here, I’m just multiplying the initial array so much that the list becomes so long that it looks like it’s “infinite scrolling” for a short transition.

[6.5.4.3.2.1.6.5.4.3.2.1.6.5.4.3.2.1.6.5.4.3.2.1.6.5.4.3.2.1.6.5.4.3.2.1]
Copy the code
  // The initial list of options
  let initImagesArr = [6.5.4.3.2.1];
  let imagesArr = [6.5.4.3.2.1];
  // Lengthen the entire list of options to achieve a false infinite scrolling effect
  new Array(20).fill(' ').forEach(() = >{ imagesArr = imagesArr.concat(... initImagesArr); })Copy the code

Change the code that added the li tag to initImageArr to the new option list imagesArr

   // add the list li to the UL tag
  imagesArr.forEach(item= > {
    const li = document.createElement('li');
    li.innerHTML = item;
    firstImagesList.appendChild(li);
  });
Copy the code

So far we false infinite scrolling has been achieved (if you beat out the infinite scrolling of your expectations, please do not play xiaobian, xiaobian heart is bitter, the real infinite scrolling seems not good to write, interested partners if know how to infinite scrolling tell me ha, xiaobian also to learn to learn).

How is delayed scrolling of the second and third cells implemented?

After infinite scrolling is introduced, we will introduce the problem of delayed scrolling. We can see that in the rendering, the second cell waits for the first cell to scroll for a short time before starting to scroll, and the third cell does the same.

In fact, the implementation of delayed scrolling is very simple, we just need to set a timer for the second list and the third list of numbers in their respective scrolling methods.

  // Click the gamepad to start the game
  function start() {
    // The game starts to add transition effects to the entire list of numbers
    addTranstion();
    firstImagesList.style.transform = 'translateY(0)';
    // Listing 2 scrolls after 0.5s delay
    timeout1 = setTimeout(() = > {
      secondsImagesList.style.transform = 'translateY(0)';
    },500)
    // Listing 3 scrolls after 1s delay
    timeout2 = setTimeout(() = > {
      thirdImagesList.style.transform = 'translateY(0)';
    },1000)}Copy the code

How do random scrolling results work?

Random scrolling results can be a little harder to interpret. To recap, the scroll down principle we used above is to restore the distance moved up to 0 (‘translateY(0)). What if instead of zero, we restored the height of a number?

Tip: The height of a number is also the height of a li tag. The height of a Li tag is 136px

Let’s try rewriting the code:

  firstImagesList.style.transform = 'translateY(-136px)';
  // Listing 2 scrolls after 0.5s delay
  timeout1 = setTimeout(() = > {
    secondsImagesList.style.transform = 'translateY(-136px)';
  },500)
  // Listing 3 scrolls after 1s delay
  timeout2 = setTimeout(() = > {
    thirdImagesList.style.transform = 'translateY(-136px)';
  },1000)
Copy the code

The effect is as follows:

We can see that if we revert the position only to translateY(-136px), the scrolling result will be 5. Similarly, if we just revert to 0, -136, -136 * 2, -136 * 3, -136 * 4, and -136 * 5 (all px units), we get 6, 5, 4, 3, 2, 1 in a total of 6 results scrolling through the list of numbers.

Now that we have the ability to change the translateY() by changing the translateY() distance, we have another question: how do we randomly select one of the six numbers? Rolling results here should not be artificially controlled by us. The result should be a random multiple of -136:0,1,2,3,4,5. We can get the corresponding random value by changing the multiple.

Math.random() returns a random number between 0 (inclusive) and 1 (not included), so if I multiply the result of math.random by 6, I get a random number between 0 and 6 (not including 6), and I do a round down on math.floor () so I get a random number of 0, 1, 2, 3, 4, 5.

The way to start the game is as follows:

// The initial list of options, initImagesArr, has 6 values<div class="handle" onclick="start(initImagesArr.length)">The middle content omitted...</div>
Copy the code
 // The height of a single digit, that is, the height of a single LI tag
 const imageHeight = 136;
 // resultNum is the number of scrolling result cases, there are 6 numbers, that is, there are 6 cases
 // translateY(${-imageheight * radom1}px) is the position where Listing 1 was finally restored, and so on
 function start(resultNum) {
  // The game starts to add transition effects to the entire list of numbers
  addTranstion();
  // Random results 0~resultNum for each list scroll
  let radom1 = Math.floor(Math.random()*resultNum);
  let radom2 = Math.floor(Math.random()*resultNum);
  let radom3 = Math.floor(Math.random()*resultNum);
  // Listing 1 starts scrolling
  firstImagesList.style.transform = `translateY(${-imageHeight * radom1}px)`;
  // Listing 2 scrolls after 0.5s delay
  timeout1 = setTimeout(() = > {
    secondsImagesList.style.transform = `translateY(${-imageHeight * radom2}px)`;
  },500)
  // Listing 3 scrolls after 1s delay
  timeout2 = setTimeout(() = > {
    thirdImagesList.style.transform = `translateY(${-imageHeight * radom3}px)`;
  },1000)}Copy the code

Note 1: The full possibilities of scrolling results for a single number list in the resultNum method. Also, because the total number of cases of the total result is determined by the number of numbers in the initial list initImagesArr: [1,2,3,4,5,6], we simply pass initimagesarr.length as an argument to the start() method.

Note 2: The random results of the three numeric lists are different, where radom1 is the random results of Listing 1, radom2 is the random results of Listing 2, and radom3 is the random results of Listing 3. Math.random()*resultNum is 0 *resultNum ~ 1 *resultNum (1 *resultNum is not included). In this example, if the resultNum is 6, the result ranges from 0 to 5.999999999 and the result ranges from 0 to 5 after math.floor () is rounded down.

After the above processing, our random result has been successfully implemented.

How does the game machine shake?

The front may be a little complicated, here we talk about a little simple things. From the renderings we can see that the slot machine has been shaking from the beginning of the game to the end of the game, about this I also give you a little share how to achieve.

  .shake {
    animation: shake 0.1 s infinite;
  }

  @keyframes shake {
    25% {
      left: 49.7%;
    }
    50% {
      top: 49.7%;
    }
    75% {
      left: 50%;
    }
    100% {
      top: 50%; }}Copy the code

Position :absoulte {left:50%; top:50%; Translate (-50%,-50%)} to center the slot machine horizontally and vertically relative to the viewable area.

// The slot machine is horizontally and vertically centered relative to the viewable area..machine {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
Copy the code

To explain the code, the small editor realizes the effect of the slot machine shaking all the time by moving the entire slot machine in all directions at a very fast speed (here the animation is completed in 0.1s) with an infinite number of cycles.

Be careful, though, that shake should also be controlled, as slot machines stop shaking near the end of the game. As we did with transition controls, we declare a method to add and remove jitter from the animation:

  // Add jitter to slot machines
  function startShake() {
    document.getElementsByClassName('machine') [0].classList.add('shake');
  }
 // Remove slot jitter
  function stopShake() {
    document.getElementsByClassName('machine') [0].classList.remove('shake');
  }
Copy the code

Then we call startShake() at the start of the game, and stopShake() at the end of the game. However, in the following code, we can see that the removal of the jitter effect was implemented after 2.6s, because the third digit list needs to wait for 1s to start scrolling, and the transition time of scrolling is 2s, so it takes a total of 3s to scroll to the end of the third digit list. Here the editor wants to stop jitter before the third digit list ends, so the jitter removal method will be implemented 2.6 seconds after the start of the game.

 // The height of a single digit, that is, the height of a single LI tag
 const imageHeight = 136;
 function start(resultNum) {
  // The game starts to add transition effects to the entire list of numbers
  addTranstion();
  // Start to add jitter effect to slot machine
  startShake();
  // Random results 0~resultNum for each list scroll
  let radom1 = Math.floor(Math.random()*resultNum);
  let radom2 = Math.floor(Math.random()*resultNum);
  let radom3 = Math.floor(Math.random()*resultNum);
  // Listing 1 starts scrolling
  firstImagesList.style.transform = `translateY(${-imageHeight * radom1}px)`;
  // Listing 2 scrolls after 0.5s delay
  timeout1 = setTimeout(() = > {
    secondsImagesList.style.transform = `translateY(${-imageHeight * radom2}px)`;
  },500)
  // Listing 3 scrolls after 1s delay
  timeout2 = setTimeout(() = > {
    thirdImagesList.style.transform = `translateY(${-imageHeight * radom3}px)`;
  },1000)
  // Slot machine jitter is removed after 2.6 min delay
  timeout3 = setTimeout(() = > {
    stopShake();
  },2600)}Copy the code

Reset the implementation of the game and the points to watch out for

Slot machines we’ve done the whole thing from start to finish. However, I wanted to play one more game, and I thought about the slot machine’s flaws before I clicked the start handle for the second time, which included the following:

  • After the game starts and ends, clicking the start handle again should reset the game
  • There should be no transition effects during game resets
  • The machine should not continue to shake while resetting the game
  • If the game is reset, the timer method in the first start game method should be cleared.

Xiaobian made a setting for this slot machine, when the first tap of the gamepad, the game starts. When the gamepad is clicked a second time, the game ends and the game is reset. When the gamepad is clicked for the third time, the game starts again.

There may be some confusion here because the click event to start the gamepad only has a start() method attached to it, so how do you tell if the game is started or reset?

<div class="handle" onclick="start(initimagesarr.length)"> </div>Copy the code

If the value of flag is true, the method to start the game will be executed. If the value of flag is false, the method to reset the game will be executed. If the value of flag is false, the value of flag will be re-assigned to the reverse value of flag.

  // Whether the game starts True to start the game, false to reset the game
  let isStart = false;
  function start(imagesArrLength) {
    / / take the flagisStart = ! isStart;// Start the game
    if (isStart) {
      // Add a transition effect to the list when you start the game
      addTranstion();
      startShake();

      // Random scrolling results for each list
      let radom1 = Math.floor(Math.random()*imagesArrLength);
      let radom2 = Math.floor(Math.random()*imagesArrLength);
      let radom3 = Math.floor(Math.random()*imagesArrLength);

      firstImagesList.style.transform = `translateY(${-imageHeight * radom1}px)`;

      // Listing 2 scrolls after 0.5s delay
      timeout1 = setTimeout(() = > {
        secondsImagesList.style.transform = `translateY(${-imageHeight * radom2}px)`;
      },500)

      // Listing 3 scrolls after 1s delay
      timeout2 = setTimeout(() = > {
        thirdImagesList.style.transform = `translateY(${-imageHeight * radom3}px)`;
      },1000)

      timeout3 = setTimeout(() = > {
        stopShake();
      },2600)}else {
      // Reset the game}}Copy the code

So what do we need to do to reset the game?

1. The first step, of course, is to return the list of numbers to their original position. We have implemented the initialization position method initPosition() method in the previous “key points before scrolling the number list”. In the else code block above, we simply call initPosition(startTranslateYHeight) to return the whole number list to its original position. StartTranslateYHeight is the distance the list moves up.

  function initPosition(startTranslateYHeight) {
      firstImagesList.style.transform = `translateY(${startTranslateYHeight}px)`;
      secondsImagesList.style.transform = `translateY(${startTranslateYHeight}px)`;
      thirdImagesList.style.transform = `translateY(${startTranslateYHeight}px)`;
  }
Copy the code

Number 2, reset the games list in return to the initial position of the process, because the game began the process of digital list added transition animations, can lead to digital list process will also return to the initial position of the transition animation, so we need to call before you declare good removeTranstion () to delete all the transition effect of digital list.

3. The jitter effect was added to the slot machine during the first start of the game, and should be removed during the reset. Call stopShake() in the else block.

4. If the reset game is clicked within a short time after the game is started, the methods in the unexecuted timer in the start game should be cleared by clearTimeout(), otherwise the methods in the start game will still be executed when the game is reset.

So the code in the else code block should be:

else {
  clearTimeout(timeout1);
  clearTimeout(timeout2);
  clearTimeout(timeout3);
  // Stop jitter
  stopShake();
  // Clear transitions as the list moves back to its original position
  removeTranstion();
  // Return each list to its original position
  initPosition(startTranslateYHeight);
}
Copy the code

How to get slot machine game results

It’s a game and it’s gonna end somewhere. Here we implement the slot machine after the end of the game to print the game results. Since our results are obtained by random results of Radom1, radom2 and Radom3, when Radom1 is 0, the result is 6, when random1 is 1, the result is 5, and so on. We can get the final result should be initImagesArr[Radom1], initImagesArr[Radom2], initImagesArr[Radom3].

We also mentioned that 3s is needed for the whole process of ending the game, so we can define a timer to execute and print out the game result after 3s.

Code the appendix

HTML:

<body>
  <div class="machine">
    <div class="machine-body">
      <div class="rotary-table">
        <div class="screen">
          <ul class="images"></ul>
        </div>
        <div class="screen">
          <ul class="images"></ul>
        </div>
        <div class="screen">
          <ul class="images"></ul>
        </div>
      </div>
      <div class="machine-logo">
        <img src="./index.png">
      </div>
    </div>
    <div class="base">
      <div class="handle" onclick="start(initImagesArr.length)">
        <div class="handle-ball"></div>
        <div class="handle-bar"></div>
        <div class="handle-shaft"></div>
      </div>
    </div>
  </div>
</body>
Copy the code

scss:

.machine { width: 484px; height: 513px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: flex; .machine-body { width: 400px; background-color: #c8d0e3; height: 513px; border: 14px solid #2e2a27; border-radius: 34px; box-sizing: border-box; .rotary-table { width: 278px; border: 16px solid #2e2a27; border-radius: 16px; margin: 54px auto 0; display: flex; .screen { width: 82px; height: 136px; overflow: hidden; .images { list-style: none; margin: 0; padding: 0; border: none; li { margin: 0; padding: 0; border: 0; text-align: center; height: 136px; line-height: 136px; font-size: 30px; background-color: wheat; } } .transtion { transition: all ease 2s; } } } .rotary-table :nth-child(1) { border-right: 16px solid #2e2a27; } .rotary-table :nth-child(2) { border-right: 16px solid #2e2a27; } .machine-logo { width: 240px; margin: 20px auto 0; img { width: 100%; height: auto; } } } .base { width: 34px; height: 130px; background-color: #b1b8d4; border: 14px solid #2e2a27; border-left: none; box-sizing: border-box; border-top-right-radius: 24px; border-bottom-right-radius: 24px; transform: translateY(250px); position: relative; .handle { width: 64px; position: absolute; left: 30px; bottom: 28px; cursor: pointer; .handle-ball { width: 34px; height: 34px; background-color: #ff6169; border-radius: 50%; border: 15px solid #2e2a27; transform: translateY(2px); } .handle-bar { width: 16px; height: 106px; margin: 0 auto; background-color: #2e2a27; transform: translateY(1px); } .handle-shaft { width: 56px; height: 48px; border: 15px solid #2e2a27; border-left: none; border-top-right-radius: 25px; border-bottom-right-radius: 25px; background-color: #c8d0e3; box-sizing: border-box; margin: 0 auto; }}}}. Shake {animation: shake 0.1s infinite; } @keyframes shake {25% {left: 49.7%; } 50% {top: 49.7%; } 75% { left: 50%; } 100% { top: 50%; }}Copy the code

javaScript:

  // The following images may be named in consideration of the fact that the slot machine contents may be replaced with other images such as fruit instead of numbers, so the associated content variable is named images-related
  // The initial positioning of the three lists when the page loads
  function initPosition(startTranslateYHeight) {
    firstImagesList.style.transform = `translateY(${startTranslateYHeight}px)`;
    secondsImagesList.style.transform = `translateY(${startTranslateYHeight}px)`;
    thirdImagesList.style.transform = `translateY(${startTranslateYHeight}px)`;
  }

  // Add transition effects to all lists
  function addTranstion() {
    firstImagesList.classList.add('transtion');
    secondsImagesList.classList.add('transtion');
    thirdImagesList.classList.add('transtion');
  }

  // Remove transition effects from all lists
  function removeTranstion(imagesList) {
    firstImagesList.classList.remove('transtion');
    secondsImagesList.classList.remove('transtion');
    thirdImagesList.classList.remove('transtion');
  }

  // Add shake animation to slot machine
  function startShake() {
    document.getElementsByClassName('machine') [0].classList.add('shake');
  }
  // Stop the slot machine shaking animation
  function stopShake() {
    document.getElementsByClassName('machine') [0].classList.remove('shake');
  }

  // Click the first one to start, click the second one to recharge the game
  // startTranslateYHeight Specifies the distance of the translateY when the list is initialized
  // imageHeight Specifies the height of each item in the list
  // The length of the list array
  function start(imagesArrLength) { isStart = ! isStart;// Start the game
    if (isStart) {
      // Add a transition effect to the list when you start the game
      addTranstion();
      startShake();

      // Random scrolling results for each list
      let radom1 = Math.floor(Math.random()*imagesArrLength);
      let radom2 = Math.floor(Math.random()*imagesArrLength);
      let radom3 = Math.floor(Math.random()*imagesArrLength);

      firstImagesList.style.transform = `translateY(${-imageHeight * radom1}px)`;

      // Listing 2 scrolls after 0.5s delay
      timeout1 = setTimeout(() = > {
        secondsImagesList.style.transform = `translateY(${-imageHeight * radom2}px)`;
      },500)

      // Listing 3 scrolls after 1s delay
      timeout2 = setTimeout(() = > {
        thirdImagesList.style.transform = `translateY(${-imageHeight * radom3}px)`;
      },1000)
      // The jitter stops after 2.6 seconds
      timeout3 = setTimeout(() = > {
        stopShake();
      },2600)
      // Print the result after the game is over
      timeout4 = setTimeout(() = > {
        console.log(initImagesArr[radom1],initImagesArr[radom2],initImagesArr[radom3]);
      },3000)
      // Reset the game
    }else {
      // Cancel the last unfinished method
      clearTimeout(timeout1);
      clearTimeout(timeout2);
      clearTimeout(timeout3);
      clearTimeout(timeout4);
      stopShake();
      // Clear transitions as the list moves back to its original position
      removeTranstion();
      // Return each list to its original positioninitPosition(startTranslateYHeight); }}// The initial list of options
  let initImagesArr = [6.5.4.3.2.1];
  let imagesArr = [6.5.4.3.2.1];
  // Lengthen the entire list of options to achieve a false scrolling effect
  new Array(20).fill(' ').forEach(() = >{ imagesArr = imagesArr.concat(... initImagesArr); })// Get the DOM of the first list
  const firstImagesList = document.getElementsByClassName('images') [0];
  const secondsImagesList = document.getElementsByClassName('images') [1];
  const thirdImagesList = document.getElementsByClassName('images') [2];
  // add the list li to the UL tag
  imagesArr.forEach(item= > {
    const li = document.createElement('li');
    const li2 = document.createElement('li');
    const li3 = document.createElement('li');
    li.innerHTML = item;
    li2.innerHTML = item;
    li3.innerHTML = item;
    firstImagesList.appendChild(li);
    secondsImagesList.appendChild(li2);
    thirdImagesList.appendChild(li3);
  });


  // The height of a single item in the list
  const imageHeight = 136;

  // Get the height of a column
  const listHeight = firstImagesList.scrollHeight;

  // Initialize the height of the list tranlateY
  const startTranslateYHeight = - listHeight + imageHeight;

  // Whether the game has started
  let isStart = false;

  // Three setTimeout returns, the first two are the delay method for the second and third column list to start scrolling, timeout3 is the delay method for the machine to stop shaking animation
  let timeout1 = null;
  let timeout2 = null;
  let timeout3 = null;

  // The list position is initialized when the page comes in
  initPosition(startTranslateYHeight);
Copy the code

conclusion

See here, small editor would like to say that readers are also hard, should cost a lot of effort to see my article. Although xiaobian feel that this kind of demand is almost not encountered in the work, but xiaobian feel that this is a process to exercise their thinking ability, if readers have questions or suggestions on the code can be put forward at any time, Xiaobian will be patient to answer or accept modestly. If you like the article, give a little praise and support to the small editor. The code word is not easy. Thank you very much for your support.

Source address :https://gitee.com/zhao_jiahao/one-arm-bandit