From scratch, hand in hand teach you to use native JS + CSS3 to realize the fruit machine game

Time:2021-4-14

Project experience address
Free video tutorial

Introduction to the game

Lucky fruit machine is an arcade game. The game interface is made up of 24 squares, each of which has a different fruit graphic and a small light under it. Players use the game currency to choose the target they want to bet on. After pressing start, the small light starts to turn around each grid in the square. When the small light stops, if it stops on the player’s bet target, it can win the corresponding game currency.

Items: there are eight kinds of items in the game, namely: apple, watermelon, papaya, orange, bell, 77 and double star. These items are divided into two kinds: big and small. There are also bar icons, which are divided into two types.

Odds: the following is the odds of all fixed odds items. ·All other small items (small 77, small star, small watermelon, small bell, small papaya, small orange) 1:2
Apple 1:5, orange 1:10, papaya 1:15, bell 1:20, watermelon 1:20, double star 1:30, 77 1:40, small bar 1:25, medium bar 1:50, big bar 1:100

When the player wins the lottery, the player clicks the “start” button to collect points, and then clicks the “start” button again to play the game again according to the last bet. If players want to bet again, they can bet directly on the bet items. At the same time, the winning amount will be included in the “current balance” area.

If the player does not win, the player will click the “start” button to play the game again according to the last bet.

Online experience

Online experience

Course objectives

We use native JS + CSS3 to develop an interesting and technical H5 game. The project uses the following knowledge points:

  • CSS: box model, positioning, floating, CSS3 flex elastic box model, picture background, CSS3 selector
  • JS: JSON, map, timer, random number, DOM operation, template string

Target audience

Students of this course can understand a little basic knowledge of HTML / CSS / JS. We will explain the basic knowledge points of CSS and JS used in the project on the spot. First, we will give some small examples to illustrate the usage of knowledge points, and then explain how to apply in this project and which function to realize. For example, standard document flow, positioning, floating, box model, CSS3 elastic box, CSS3 advanced selector, background image, JSON, map, timer, random number, DOM operation, template string are rare excellent comprehensive cases on the Internet that comprehensively use front-end basic knowledge.

Native JS implementation of lucky fruit machine

1. Install vscode plug-in live server

From scratch, hand in hand teach you to use native JS + CSS3 to realize the fruit machine game

2. Interface design of fruit machine disk

2.1 basic grid of wheel disc interface design

demo1.html

<body>
  <ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Oranges</li>
    <li>Apple</li>
    <li>Banana</li>
    <li>Oranges</li>
  </ul>
</body>
    li{
      border: 1px solid red;
      list-style: none;
      width: 50px;
      height: 50px;
      text-align: center;
      line-height: 50px;
    }

Operation effect
From scratch, hand in hand teach you to use native JS + CSS3 to realize the fruit machine game

You can see that each Li has a single line, because Li is a block level element, so Li must be separated from the standard document stream to be horizontally arranged.

Standard document flow

Standard document flow: it refers to the simple normal layout of web page elements from top to bottom, from left to right, one by one.

In general, HTML elements are divided into two types: block level elements and in line elements. Elements like div, P, UL and Li belong to block level elements, which are arranged from top to bottom. By default, a block level element will occupy one line, while the following elements will be arranged in another line;

In line elements are arranged horizontally in a row, from left to right; span, strong, a, etc. belong to in line elements.

2.2 absolute positioningVSRelative positioning

Demo2.html Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    ul{
      border: 1px solid red;
      height: 500px;
      padding: 0;
      position: relative;
    }
    li{
      border: 1px solid red;
      list-style: none;
      width: 50px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      position: absolute;
      top: 20px;
      left: 50px;
    }
  </style>
</head>
<body>
  <ul>
    <li>Apple</li>
  </ul>
</body>
</html>

Operation effect
From scratch, hand in hand teach you to use native JS + CSS3 to realize the fruit machine game

2.3 interior style

demo3.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul{
            /*border: 1px solid red;*/
            position: relative;
            height: 500px;
            width: 500px;
            margin-left: auto;
            margin-right: auto;
        }
        li{
            width: 50px;
            height: 50px;
            border: 1px solid red;
            list-style: none;
            text-align: center;
            line-height: 50px;
            position: absolute;

        }
    </style>
</head>
<body>
<ul>
  <li style=" left:0px;top : 0px; "> Apple</li>
  <li style=" left:50px;top : 0px; "> Apple</li>
  <li style=" left:100px;top : 0px; "> Apple</li>
  <li style=" left:150px;top : 0px; "> Apple</li>
  <li style=" left:200px;top : 0px; "> Apple</li>
  <li style=" left:250px;top : 0px; "> Apple</li>
  <li style=" left:300px;top : 0px; "> Apple</li>

  <li style=" left:300px;top : 50px; "> Apple</li>
  <li style=" left:300px;top : 100px; "> Apple</li>
  <li style=" left:300px;top : 150px; "> Apple</li>
  <li style=" left:300px;top : 200px; "> Apple</li>
  <li style=" left:300px;top : 250px; "> Apple</li>
  <li style=" left:300px;top : 300px; "> Apple</li>

  <li style=" left:250px;top : 300px; "> Apple</li>
  <li style=" left:200px;top : 300px; "> Apple</li>
  <li style=" left:150px;top : 300px; "> Apple</li>
  <li style=" left:100px;top : 300px; "> Apple</li>
  <li style=" left:50px;top : 300px; "> Apple</li>
  <li style=" left:0px;top : 300px; "> Apple</li>


  <li style=" left:0px;top : 250px; "> Apple</li>
  <li style=" left:0px;top : 200px; "> Apple</li>
  <li style=" left:0px;top : 150px; "> Apple</li>
  <li style=" left:0px;top : 100px; "> Apple</li>
  <li style=" left:0px;top : 50px; "> Apple</li>

</ul>
</body>
</html>

effect:
From scratch, hand in hand teach you to use native JS + CSS3 to realize the fruit machine game

2.4 background picture

demo4.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li{
            width: 50px;
            height: 50px;
            border: 1px solid red;
            list-style: none;
            text-align: center;
            line-height: 50px;
            /* position: absolute; */
            /*background-image: url("images/77.png");*/
            background-size: contain;
            /*left:0px;*/
            /*top:0px;*/
        }
    </style>
</head>
<body>
<ul>
    <li style="background-image: url('images/77.png')"></li>
</ul>
</body>
</html>

effect:
From scratch, hand in hand teach you to use native JS + CSS3 to realize the fruit machine game

2.5 integrated

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul{
            /*border: 1px solid red;*/
            position: relative;
            height: 500px;
            width: 500px;
            margin-left: auto;
            margin-right: auto;
        }
        li{
            width: 50px;
            height: 50px;
            border: 1px solid red;
            list-style: none;
            text-align: center;
            line-height: 50px;
            position: absolute;
            background-size: contain;
            /*left:0px;*/
            /*top:0px;*/
        }
    </style>
</head>
<body>
<ul>
    <li style="left:0px;top:0px;background-image: url('images/orange.png');"></li>
    <li style="left:50px;top:0px;background-image: url('images/alarm.png');"></li>
    <li style="left:100px;top:0px;background-image: url('images/s_bar.png');"></li>
    <li style="left:150px;top:0px;background-image: url('images/bar.png');"></li>
    <li style="left:200px;top:0px;background-image: url('images/apple.png');"></li>
    <li style="left:250px;top:0px;background-image: url('images/s_apple.png');"></li>
    <li style="left:300px;top:0px;background-image: url('images/coconut.png');"></li>

    <li style="left:300px;top:50px;background-image: url('images/watermelons.png');"></li>
    <li style="left:300px;top:100px;background-image: url('images/s_watermelons.png');"></li>
    <li style="left:300px;top:150px;background-image: url('images/cha.png');"></li>
    <li style="left:300px;top:200px;background-image: url('images/apple.png');"></li>
    <li style="left:300px;top:250px;background-image: url('images/s_orange.png');"></li>
    <li style="left:300px;top:300px;background-image: url('images/orange.png');"></li>

    <li style="left:250px;top:300px;background-image: url('images/alarm.png');"></li>
    <li style="left:200px;top:300px;background-image: url('images/s_77.png');"></li>
    <li style="left:150px;top:300px;background-image: url('images/77.png');"></li>
    <li style="left:100px;top:300px;background-image: url('images/apple.png');"></li>
    <li style="left:50px;top:300px;background-image: url('images/s_coconut.png');"></li>
    <li style="left:0px;top:300px;background-image: url('images/coconut.png');"></li>

    <li style="left:0px;top:250px;background-image: url('images/star.png');"></li>
    <li style="left:0px;top:200px;background-image: url('images/s_star.png');"></li>
    <li style="left:0px;top:150px;background-image: url('images/cha.png');"></li>
    <li style="left:0px;top:100px;background-image: url('images/apple.png');"></li>
    <li style="left:0px;top:50px;background-image: url('images/s_alarm.png');"></li>

</ul>
</body>
</html>

Final effect:
From scratch, hand in hand teach you to use native JS + CSS3 to realize the fruit machine game

3. Using native JS to dynamically generate the wheel of fruit machine

3.1 creating HTML elements dynamically in JS

There are two steps
1. Create elements( document.createElement )
2. Add element (appendChild)

<!DOCTYPE html>
<html>

<body>

  <div id="div1">
    This is a paragraph. </p>
    This is another paragraph. </p>
  </div>

  <script>
    let para = document.createElement("p");
    para.innerText  ="This is a new paragraph. ";

    let element = document.getElementById("div1");
    element.appendChild(para);
  </script>

</body>

</html>

Let’s take another example

<!DOCTYPE html>
<html>

<body>

  <div id="div1">

  </div>

  <script>
    let ul = document.createElement('ul')
    let div = document.getElementById('div1')
    for (let i = 0; i < 3; i++){
      let li = document.createElement('li')
      li.innerText = i;
      ul.appendChild(li)
    }
    div.appendChild(ul)
  </script>

</body>

</html>

From scratch, hand in hand teach you to use native JS + CSS3 to realize the fruit machine game

3.2 JS control element style

Style attribute
Every element in an HTML document is an object, and every element in the document has an attribute. Using JS, you can set any CSS style of an element through the style attribute of an object. Here is an example:

<!DOCTYPE html>
<html>

<body>

  <div id="div1">
    <p id="content">helloworld</p>
  </div>

  <script>
    let p = document.querySelector('p')
    p.style.color = 'red'
    p.style.fontSize = '30px'
  </script>

</body>

</html>

From scratch, hand in hand teach you to use native JS + CSS3 to realize the fruit machine game

3.3 understanding JSON

JSON (JavaScript object notation) uses a text format completely independent of programming language to store and represent data.
1. Objects
An object is an unordered collection of name / value pairs. An object starts with “{” (left bracket) and ends with “}” (right bracket). Each ‘name’ is followed by a ‘:’ (colon); ‘name / value’ pairs’ are separated by ‘, (comma).

var person = { "name":"huochai", "age":29, "school":{ "name":"diankeyuan", "location":"beijing" }};

2. Array

var students =  
              [  
                     {"sno":"001","name":"jack","age":130},  
                     {"sno":"002","name":"tame","age":120},  
                     {"sno":"003","name":"cule","age":110}
              ];

Let’s take an example

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>json</title>
    <script>
        Var imgdata = {"name": "image description and image relative path", "title": "logo image", "URL":“ logo.png " };
        console.log( imgData.name );
        console.log( imgData["name"] );

        Var json1 = {"name": "here is the text description and relative path of a group of pictures",
            "Title": ["logo picture", "picture 1", "picture 2", "picture 3],
            "url":["logo.png","1.png","2.png","3.png"]
        };

        console.log( json1.name);
        console.log( json1.url  );
        console.log( json1.url[1] );



        Var json2 = {"name": "picture description and picture relative path,",
            "imgData":[
                {"name": "picture 1", "title": "logo picture 1", "URL": "logo 1. PNG"},
                {"name": "picture 2", "title": "logo picture 2", "URL": "Logo 2. PNG"},
                {"name": "picture 3", "title": "logo picture 3", "URL": "logo 3. PNG"}
            ]
        };
        console.log( json2.name );
        console.log( json2.imgData[0].name );

    </script>


</head>

<body>


</body>
</html>

From scratch, hand in hand teach you to use native JS + CSS3 to realize the fruit machine game

3.4 template string

var name = "Neo";
    Var occupation = "programmer"; // template string splicing is not used
    Var STR1 = "he is" + name + ", he is a" + occupation; // use template string splicing
    var str2 = `He is ${name},he is a ${occupation}`;
    console.log(str1)
    console.log(str2)

3.5 integrated

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul{
            /*border: 1px solid red;*/
            position: relative;
            height: 500px;
            width: 500px;
            margin-left: auto;
            margin-right: auto;
        }
        li{
            width: 50px;
            height: 50px;
            border: 1px solid red;
            list-style: none;
            text-align: center;
            line-height: 50px;
            position: absolute;
            background-size: contain;
            /*left:0px;*/
            /*top:0px;*/
        }
    </style>
    <script>
        window.onload = function () {
            var fruits = [
                {left: '0px', top: '0px', content: 'Orange', SRC: 'B'_ orange.png ', score:10 },
                {left: '50px', top: '0px', content: 'Bell', SRC: 'B'_ alarm.png ', score:20 },
                {left: '100px', top: '0px', content: 'small Ba', SRC:'s'_ bar.png ', score:50 },
                {left:'150px',top:'0px',content:'BA',src:'b_bar.png',score:100},
                {left: '200px', top: '0px', content: 'Apple', SRC: 'B'_ apple.png ', score:5 },
                {left: '250px', top: '0px', content: 'little apple', SRC:'s'_ apple.png ', score:2 },
                {left: '300px', top: '0px', content: 'coconut', SRC: 'B'_ coconut.png ', score:15 },
                {left: '300px', top: '50px', content: 'watermelon', SRC: 'B'_ watermelons.png ', score:25 },
                {left: '300px', top: '100px', content: 'watermelon', SRC:'s'_ watermelons.png ', score:2 },
                {left:'300px',top:'150px',content:'XX',src:'cha.png',score:0},
                {left: '300px', top: '200px', content: 'Apple', SRC: 'B'_ apple.png ', score:5 },
                {left: '300px', top: '250px', content: 'little orange', SRC:'s'_ orange.png ', score:2 },
                {left: '300px', top: '300px', content: 'Orange', SRC: 'B'_ orange.png ', score:10 },
                {left: '250px', top: '300px', content: 'Bell', SRC: 'B'_ alarm.png ', score:20 },
                {left: '200px', top: '300px', content: 'small 77', SRC:'s'_ 77.png', score:2 },
                {left:'150px',top:'300px',content:'77',src:'b_77.png',score:40},
                {left: '100px', top: '300px', content: 'Apple', SRC: 'B'_ apple.png ', score:5 },
                {left: '50px', top: '300px', content: 'coconut', SRC:'s'_ coconut.png ', score:2 },
                {left: '0px', top: '300px', content: 'coconut', SRC: 'B'_ coconut.png ', score:15 },
                {left: '0px', top: '250px', content: 'star', SRC: 'B'_ star.png ', score:30 },
                {left: '0px', top: '200px', content: 'little star', SRC:'s'_ star.png ', score:2 },
                {left:'0px',top:'150px',content:'XX',src:'cha.png',score:0},
                {left: '0px', top: '100px', content: 'Apple', SRC: 'B'_ apple.png ', score:5 },
                {left: '0px', top: '50px', content: 'little bell', SRC:'s'_ alarm.png ', score:2 }
            ];

            var ul = document.getElementById('machine');
            for(var i = 0; i < fruits.length; i++)
            {
                //Creating Li elements dynamically
                var li = document.createElement('li');
                li.style.left = fruits[i].left;
                li.style.top = fruits[i].top;
                li.style.backgroundImage = `url('images/${fruits[i].src}')`;
                ul.appendChild(li);

            }
        }

    </script>
</head>
<body>
<ul id = 'machine'>
    <!--<li style="left:0px;top:0px;background-image: url('images/orange.png');"></li>-->
    <!--<li style="left:50px;top:0px;background-image: url('images/alarm.png');"></li>-->
    <!--<li style="left:100px;top:0px;background-image: url('images/s_bar.png');"></li>-->
    <!--<li style="left:150px;top:0px;background-image: url('images/bar.png');"></li>-->
    <!--<li style="left:200px;top:0px;background-image: url('images/apple.png');"></li>-->
    <!--<li style="left:250px;top:0px;background-image: url('images/s_apple.png');"></li>-->
    <!--<li style="left:300px;top:0px;background-image: url('images/coconut.png');"></li>-->

    <!--<li style="left:300px;top:50px;background-image: url('images/watermelons.png');"></li>-->
    <!--<li style="left:300px;top:100px;background-image: url('images/s_watermelons.png');"></li>-->
    <!--<li style="left:300px;top:150px;background-image: url('images/cha.png');"></li>-->
    <!--<li style="left:300px;top:200px;background-image: url('images/apple.png');"></li>-->
    <!--<li style="left:300px;top:250px;background-image: url('images/s_orange.png');"></li>-->
    <!--<li style="left:300px;top:300px;background-image: url('images/orange.png');"></li>-->

    <!--<li style="left:250px;top:300px;background-image: url('images/alarm.png');"></li>-->
    <!--<li style="left:200px;top:300px;background-image: url('images/s_77.png');"></li>-->
    <!--<li style="left:150px;top:300px;background-image: url('images/77.png');"></li>-->
    <!--<li style="left:100px;top:300px;background-image: url('images/apple.png');"></li>-->
    <!--<li style="left:50px;top:300px;background-image: url('images/s_coconut.png');"></li>-->
    <!--<li style="left:0px;top:300px;background-image: url('images/coconut.png');"></li>-->

    <!--<li style="left:0px;top:250px;background-image: url('images/star.png');"></li>-->
    <!--<li style="left:0px;top:200px;background-image: url('images/s_star.png');"></li>-->
    <!--<li style="left:0px;top:150px;background-image: url('images/cha.png');"></li>-->
    <!--<li style="left:0px;top:100px;background-image: url('images/apple.png');"></li>-->
    <!--<li style="left:0px;top:50px;background-image: url('images/s_alarm.png');"></li>-->

</ul>

</body>
</html>

From scratch, hand in hand teach you to use native JS + CSS3 to realize the fruit machine game

4. Let the running light run

4.1 two timers in JS

  1. Periodic timer
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
//        setInterval(fun,time)
//        function hello() {
//            console.log('hello');
//        }
//        setInterval(hello, 1000);
//Var timerid = setinterval (fun, time); // the return value is the timer ID
//// stop timer
//        clearInterval(timerID);
        var count = 1;
        window.onload = function () {
            var h2 = document.getElementById('count');
            //Start timer
            var timerID = setInterval(function () {
                h2.innerHTML = count++;
                if(count == 11)
                {
                    //Stop timer
                    clearInterval(timerID);
                }
            },1000);
        }
    </script>
</head>
<body>
<h2 id="count">
    0
</h2>
</body>
</html>

From scratch, hand in hand teach you to use native JS + CSS3 to realize the fruit machine game

  1. One time timer
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script>

    window.onload = function () {
      var count = 1;
      var h2 = document.getElementById('count');
      function counter() {
        h2.innerHTML = count++;
        if (count < 11) {
          setTimeout(counter, 1000)
        }
      }
      setTimeout(counter, 1000)
    }
    
  </script>
</head>

<body>
  <h2 id="count">
    0
  </h2>
</body>

</html>

4.2 random numbers in JS

var num =  Math.random (); // the number between 0 and 1 [0,1]
       console.log(num);
       //Integers between 0 and 10
       var num2 = num*10;
       var num3 = parseInt(5.69);

       console.log(num3);
       var num = parseInt(Math.random()*10);
       console.log(num);
        //Integers between 30 and 50
        //Integers between 0 and 20 + 30
       var num2 = parseInt(Math.random()*20) + 30;
       console.log(num2);

From scratch, hand in hand teach you to use native JS + CSS3 to realize the fruit machine game

4.3 Z-index attribute in CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            position: relative;
        }
        #one{
            height: 100px;
            width: 100px;
            background-color: red ;
            position: absolute;
            left:0;
            top: 0;
            z-index: 10;
        }
        #two{
            height: 80px;
            width: 80px;
            background-color: blue ;
            position: absolute;
            left:0;
            top: 0;
            z-index: 20;
        }
    </style>
</head>
<body>
<div id="one">

</div>
<div id="two">

</div>
</body>
</html>

4.4 integration

html

<body>
<ul id = 'machine'>
<div id="active">

</div>
</ul>
<div id="footer">
    <div id="msg"></div>
    < button id = "BTN" > start < / button >
</div>
</body>

css

 <style>
        
        #footer{
            width: 500px;
            margin: 0px auto;
        }
        #active
        {
            width: 50px;
            height: 50px;
            position: absolute;
            background-color: rgba(255,0,0,0.4);
            z-index: 1000;
            left:0;
            top: 0;
            display: none;
        }
        ul{
            /*border: 1px solid red;*/
            position: relative;
            height: 500px;
            width: 500px;
            margin-left: auto;
            margin-right: auto;
        }
        li{
            width: 50px;
            height: 50px;
            border: 1px solid red;
            list-style: none;
            text-align: center;
            line-height: 50px;
            position: absolute;
            background-size: contain;
            /*left:0px;*/
            /*top:0px;*/
        }
    </style>

js

<script>
        window.onload = function () {
         
            //Bind an event handler to the start button
            Var index = 0; // which subscript fruit should the current active div coincide with
            var btn = document.getElementById('btn');
            btn.onclick = function () {
                //Realize the rotation of the rotating lamp
                 //Calculate the number of steps to rotate this time (non fixed), random steps
                //The number of steps should not be too small. At least 3 turns are needed, plus a random number of steps (0-20)
                var step = fruits.length * 3 + parseInt(Math.random()*20);


                //Start a timer to turn the turn light
                var timerID = setInterval(function () {
                    //Let the turn light turn one space and walk one step
                    //Let the hidden div display, change the left and top of the div to achieve the rotation of the light
                    var div = document.getElementById('active');
                    div.style.display = 'block';
                    div.style.left = fruits[index].left;
                    div.style.top = fruits[index].top;
                    step--;
                    If (Step = = 0) // the timer should be stopped
                    {
                        clearInterval(timerID);
                        var msg = document.getElementById('msg');
                        msg.innerHTML = fruits[index].content + ':' + fruits[index].score;
                        return;
                    }

                    index++;
                    if(index == fruits.length)
                    {
                        index=0;
                    }

                },100);
            }
        }

    </script>

4.5 realize the small lamp rotation with variable speed

//Bind an event handler to the start button

            var btn = document.getElementById('btn');

            Var index = 0; // which subscript fruit should the current active div coincide with
            btn.onclick = function () {
                //Realize the rotation of the rotating lamp
                //Calculate the number of steps to rotate this time (non fixed), random steps
                //The number of steps should not be too small. At least 3 turns are needed, plus a random number of steps (0-20)
                var step = fruits.length * 2 + parseInt(Math.random() * 35);
             
                var timerID = 0
                function turnOneStep() {
                    console.log(step)
                    
                    //Let the turn light turn one space and walk one step
                    //Let the hidden div display, change the left and top of the div to achieve the rotation of the light
                    var div = document.getElementById('active');
                    div.style.display = 'block';
                    div.style.left = fruits[index].left;
                    div.style.top = fruits[index].top;
                    step--;
                    If (Step = = 0) // the timer should be stopped
                    {

                        clearTimeout(timerID);
                        var msg = document.getElementById('msg');
                        msg.innerHTML = fruits[index].content + ':' + fruits[index].score;
                        return;
                    }

                    index++;
                    if (index == fruits.length) {
                        index = 0;
                    }
                    timerID = setTimeout(turnOneStep, 1200/step);
                }

   
             
                //Start a timer to turn the turn light
                turnOneStep(step);
                
            }

Full tutorial

https://www.jianshu.com/p/528…

Recommended Today

Review of SQL Sever basic command

catalogue preface Installation of virtual machine Commands and operations Basic command syntax Case sensitive SQL keyword and function name Column and Index Names alias Too long to see? Space Database connection Connection of SSMS Connection of command line Database operation establish delete constraint integrity constraint Common constraints NOT NULL UNIQUE PRIMARY KEY FOREIGN KEY DEFAULT […]