react实现老虎机

import React, { useState, useRef } from "react";
import "./App.css";

function App() {
  const [setting, setSetting] = useState({
    len: 5, //奖品个数
    speed: 2000, //滚动时间
    circle: 2, //循环几圈
  });
  function shuffle(arr: any): any[] {
    let i = arr.length;

    while (--i) {
      let j = Math.floor(Math.random() * i);
      [arr[j], arr[i]] = [arr[i], arr[j]];
    }

    return arr;
  }
  function click() {
    const arr = shuffle([0, 1, 2]);
    let countNum = 0;
    let eles = document.querySelectorAll(".game_wrap ul") || [];
    const { len, circle, speed } = setting || {};
    eles?.forEach((item: any, index) => {
      let y = 400;
      setTimeout(() => {
        var y = (arr[index] + len * (circle - 1)) * 80;
        item.style["-webkit-transition"] = speed + "ms ease";
        item.style["-webkit-transform"] =
          "translate(0px, -" + y + "px) translateZ(0px)";
      }, index * 300);
      item.addEventListener(
        "webkitTransitionEnd",
        function () {
          item.style["-webkit-transition"] = "0ms ease";
          item.style["-webkit-transform"] =
            "translate(0px, -" + arr[index] * 80 + "px) translateZ(0px)";
          countNum++;
          if (countNum == 3) {
            alert("中奖了");
          }
        },
        false
      );
    });
  }

  const list = [0, 1, 2, 3, 4];

  return (
    <div className="div">
      <div className="game_wrap">
        <div className="game_item">
          <ul>
            {list?.map((item) => {
              return <li>{item}</li>;
            })}
            {list?.map((item) => {
              return <li>{item}</li>;
            })}
          </ul>
        </div>
        <div className="game_item">
          <ul>
            {list?.map((item) => {
              return <li>{item}</li>;
            })}
            {list?.map((item) => {
              return <li>{item}</li>;
            })}
          </ul>
        </div>
        <div className="game_item">
          <ul>
            {list?.map((item) => {
              return <li>{item}</li>;
            })}
            {list?.map((item) => {
              return <li>{item}</li>;
            })}
          </ul>
        </div>
      </div>
      <button id="btn" className="startBtn" onClick={click}>
        开始抽奖
      </button>
    </div>
  );
}

export default App;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.game_wrap {
  width: 240px;
  height: 80px;
  box-sizing: content-box;
  border-radius: 15px;
  border: 20px solid #f84438;
  overflow: hidden;
  margin: 10px auto;
  box-shadow: 0px 0px 15px rgba(219, 71, 71, 0.5) inset;
}

.game_item {
  width: 33.333%;
  height: 80px;
  float: left;
  border-left: 5px solid #f84438;
}

.game_item:first-child {
  border-left: none;
}

.game_item li {
  list-style: none;
  width: 100%;
  height: 80px;
  line-height: 80px;
  text-align: center;
  position: relative;
  font-size: 50px;
}
.startBtn {
  background: #f84438;
  border: none;
  padding: 10px 20px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  margin: 20px auto;
}