初學(xué)前端用代碼實(shí)現(xiàn)一個(gè)網(wǎng)頁(yè)老虎機(jī)游戲

 // 初始的選項(xiàng)列表  let initImagesArr = [6, 5, 4, 3, 2, 1];  // 獲取第一個(gè)ul列表  const firstImagesList = document.getElementsByClassName('images')[0];   // 構(gòu)造列表li添加到ul標(biāo)簽中去  initImagesArr.forEach(item => {    const li = document.createElement('li');    li.innerHTML = item;    firstImagesList.appendChild(li);  });

 
      
6      
5      
4      
3      
2      
1  

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

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

const imageHeight = 136;  const listHeight = firstImagesList.scrollHeight;??const?startTranslateYHeight?=?-?listHeight?+?imageHeight;

// 點(diǎn)擊游戲手柄開(kāi)始游戲的方法function start() {  firstImagesList.style.transform = 'translateY(0)';  secondsImagesList.style.transform = 'translateY(0)';  thirdImagesList.style.transform = 'translateY(0)';}

   //過(guò)渡效果   .transtion {    transition: all ease 2s;  }

  // 全部列表添加過(guò)渡效果  function addTranstion() {    firstImagesList.classList.add('transtion');    secondsImagesList.classList.add('transtion');    thirdImagesList.classList.add('transtion');  }
  // 全部列表刪除過(guò)渡效果  function removeTranstion(imagesList) {    firstImagesList.classList.remove('transtion');    secondsImagesList.classList.remove('transtion');    thirdImagesList.classList.remove('transtion');  }

function start() {  // 游戲開(kāi)始給全部數(shù)字列表添加過(guò)渡效果  addTranstion();  firstImagesList.style.transform = 'translateY(0)';  secondsImagesList.style.transform = 'translateY(0)';  thirdImagesList.style.transform = 'translateY(0)';}

[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]

  // 初始的選項(xiàng)列表  let initImagesArr = [6, 5, 4, 3, 2, 1];  let imagesArr = [6, 5, 4, 3, 2, 1];  // 加長(zhǎng)整個(gè)選項(xiàng)列表，以完成一個(gè)虛假的無(wú)限滾動(dòng)的效果  new Array(20).fill('').forEach(() => {    imagesArr = imagesArr.concat(...initImagesArr);??})

   // 構(gòu)造列表li添加到ul標(biāo)簽中去  imagesArr.forEach(item => {    const li = document.createElement('li');    li.innerHTML = item;    firstImagesList.appendChild(li);??});

  // 點(diǎn)擊游戲手柄開(kāi)始游戲的方法  function start() {    // 游戲開(kāi)始給全部數(shù)字列表添加過(guò)渡效果    addTranstion();    firstImagesList.style.transform = 'translateY(0)';    // 列表2延遲0.5s后滾動(dòng)    timeout1 = setTimeout(() => {      secondsImagesList.style.transform = 'translateY(0)';    },500)    // 列表3延遲1s后滾動(dòng)    timeout2 = setTimeout(() => {      thirdImagesList.style.transform = 'translateY(0)';    },1000)??}

  firstImagesList.style.transform = 'translateY(-136px)';  // 列表2延遲0.5s后滾動(dòng)  timeout1 = setTimeout(() => {    secondsImagesList.style.transform = 'translateY(-136px)';  },500)  // 列表3延遲1s后滾動(dòng)  timeout2 = setTimeout(() => {    thirdImagesList.style.transform = 'translateY(-136px)';??},1000)

//  初始的選項(xiàng)列表initImagesArr中有6個(gè)值，也就是單列數(shù)據(jù)列表總的情況會(huì)有6種
  中間內(nèi)容省略。。。

 // 單個(gè)數(shù)字的高度，即單個(gè)li標(biāo)簽的高度 const imageHeight = 136; // resultNum為滾動(dòng)結(jié)果情況的個(gè)數(shù)，這里有6個(gè)數(shù)字，也就是有6種情況 // translateY(${-imageHeight * radom1}px)為列表1最終還原的位置，以此類(lèi)推 function start(resultNum) {  // 游戲開(kāi)始給全部數(shù)字列表添加過(guò)渡效果  addTranstion();  // 每個(gè)列表滾動(dòng)的隨機(jī)結(jié)果0~resultNum  let radom1 = Math.floor(Math.random()*resultNum);  let radom2 = Math.floor(Math.random()*resultNum);  let radom3 = Math.floor(Math.random()*resultNum);  // 列表1開(kāi)始滾動(dòng)  firstImagesList.style.transform = `translateY(${-imageHeight * radom1}px)`;  // 列表2延遲0.5s后滾動(dòng)  timeout1 = setTimeout(() => {    secondsImagesList.style.transform = `translateY(${-imageHeight * radom2}px)`;  },500)  // 列表3延遲1s后滾動(dòng)  timeout2 = setTimeout(() => {    thirdImagesList.style.transform = `translateY(${-imageHeight * radom3}px)`;  },1000)}

  .shake {    animation: shake 0.1s infinite;  }
  @keyframes shake {    25% {      left: 49.7%;    }    50% {      top: 49.7%;    }    75% {      left: 50%;    }    100% {      top: 50%;    }??}

// 老虎機(jī)相對(duì)可視區(qū)域水平垂直居中對(duì)齊的效果。.machine {  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%,-50%);}

  // 給老虎機(jī)添加抖動(dòng)效果  function startShake() {    document.getElementsByClassName('machine')[0].classList.add('shake');  } // 移除老虎機(jī)抖動(dòng)效果  function stopShake() {    document.getElementsByClassName('machine')[0].classList.remove('shake');??}

// 單個(gè)數(shù)字的高度，即單個(gè)li標(biāo)簽的高度 const imageHeight = 136; function start(resultNum) {  // 游戲開(kāi)始給全部數(shù)字列表添加過(guò)渡效果  addTranstion();  // 游戲開(kāi)始給老虎機(jī)添加抖動(dòng)效果  startShake();  // 每個(gè)列表滾動(dòng)的隨機(jī)結(jié)果0~resultNum  let radom1 = Math.floor(Math.random()*resultNum);  let radom2 = Math.floor(Math.random()*resultNum);  let radom3 = Math.floor(Math.random()*resultNum);  // 列表1開(kāi)始滾動(dòng)  firstImagesList.style.transform = `translateY(${-imageHeight * radom1}px)`;  // 列表2延遲0.5s后滾動(dòng)  timeout1 = setTimeout(() => {    secondsImagesList.style.transform = `translateY(${-imageHeight * radom2}px)`;  },500)  // 列表3延遲1s后滾動(dòng)  timeout2 = setTimeout(() => {    thirdImagesList.style.transform = `translateY(${-imageHeight * radom3}px)`;  },1000)  // 老虎機(jī)在延遲2.6妙后移除抖動(dòng)效果  timeout3 = setTimeout(() => {    stopShake();  },2600)}

  中間內(nèi)容省略。。。

// 游戲是否開(kāi)始 true為開(kāi)始游戲，false為重置游戲  let isStart = false;  function start(imagesArrLength) {    // flag取反    isStart = !isStart;    // 開(kāi)始游戲    if (isStart) {      // 開(kāi)始游戲就給列表加過(guò)渡效果      addTranstion();      startShake();
      // 每個(gè)列表滾動(dòng)的隨機(jī)結(jié)果      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)`;
      // 列表2延遲0.5s后滾動(dòng)      timeout1 = setTimeout(() => {        secondsImagesList.style.transform = `translateY(${-imageHeight * radom2}px)`;      },500)
      // 列表3延遲1s后滾動(dòng)      timeout2 = setTimeout(() => {        thirdImagesList.style.transform = `translateY(${-imageHeight * radom3}px)`;      },1000)
      timeout3 = setTimeout(() => {        stopShake();      },2600)    }else {      // 重置游戲，這里實(shí)現(xiàn)重置游戲的方法    }??}

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

else {  clearTimeout(timeout1);  clearTimeout(timeout2);  clearTimeout(timeout3);  // 停止抖動(dòng)  stopShake();  // 重置時(shí)因?yàn)榱斜頃?huì)重新移動(dòng)到初始位置，所以要清除掉過(guò)渡效果  removeTranstion();  // 各個(gè)列表回到最初的位置  initPosition(startTranslateYHeight);}

<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>

.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%;  }}

// 以下的images命名可能是考慮老虎機(jī)里的內(nèi)容可能會(huì)被替換成水果等其他圖片而非數(shù)字，所以將相關(guān)的內(nèi)容變量命名為與images相關(guān)  // 頁(yè)面剛加載時(shí)三個(gè)列表的初始定位  function initPosition(startTranslateYHeight) {    firstImagesList.style.transform = `translateY(${startTranslateYHeight}px)`;    secondsImagesList.style.transform = `translateY(${startTranslateYHeight}px)`;    thirdImagesList.style.transform = `translateY(${startTranslateYHeight}px)`;  }
  // 全部列表添加過(guò)渡效果  function addTranstion() {    firstImagesList.classList.add('transtion');    secondsImagesList.classList.add('transtion');    thirdImagesList.classList.add('transtion');  }
  // 全部列表刪除過(guò)渡效果  function removeTranstion(imagesList) {    firstImagesList.classList.remove('transtion');    secondsImagesList.classList.remove('transtion');    thirdImagesList.classList.remove('transtion');  }
  // 給老虎機(jī)添加搖晃動(dòng)畫(huà)  function startShake() {    document.getElementsByClassName('machine')[0].classList.add('shake');  }  // 停止老虎機(jī)搖晃動(dòng)畫(huà)  function stopShake() {    document.getElementsByClassName('machine')[0].classList.remove('shake');  }
  // 點(diǎn)擊第一個(gè)是開(kāi)始，點(diǎn)擊第二次是充值游戲  // startTranslateYHeight 列表的初始化時(shí)translateY的距離  // imageHeight列表的每一項(xiàng)的高度  // 列表數(shù)組的長(zhǎng)度  function start(imagesArrLength) {    isStart = !isStart;    // 開(kāi)始游戲    if (isStart) {      // 開(kāi)始游戲就給列表加過(guò)渡效果      addTranstion();      startShake();
      // 每個(gè)列表滾動(dòng)的隨機(jī)結(jié)果      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)`;
      // 列表2延遲0.5s后滾動(dòng)      timeout1 = setTimeout(() => {        secondsImagesList.style.transform = `translateY(${-imageHeight * radom2}px)`;      },500)
      // 列表3延遲1s后滾動(dòng)      timeout2 = setTimeout(() => {        thirdImagesList.style.transform = `translateY(${-imageHeight * radom3}px)`;      },1000)      // 延遲2.6秒后停止抖動(dòng)      timeout3 = setTimeout(() => {        stopShake();      },2600)      // 游戲結(jié)束后打印結(jié)果      timeout4 = setTimeout(() => {        console.log(initImagesArr[radom1],initImagesArr[radom2],initImagesArr[radom3]);      },3000)      // 重置游戲    }else {      // 取消上一次未執(zhí)行完的方法      clearTimeout(timeout1);      clearTimeout(timeout2);      clearTimeout(timeout3);      clearTimeout(timeout4);      stopShake();      // 重置時(shí)因?yàn)榱斜頃?huì)重新移動(dòng)到初始位置，所以要清除掉過(guò)渡效果      removeTranstion();      // 各個(gè)列表回到最初的位置      initPosition(startTranslateYHeight);    }  }
  // 初始的選項(xiàng)列表  let initImagesArr = [6, 5, 4, 3, 2, 1];  let imagesArr = [6, 5, 4, 3, 2, 1];  // 加長(zhǎng)整個(gè)選項(xiàng)列表，以完成一個(gè)虛假的滾動(dòng)的效果  new Array(20).fill('').forEach(() => {    imagesArr = imagesArr.concat(...initImagesArr);  })
  // 獲取第一個(gè)列表的dom  const firstImagesList = document.getElementsByClassName('images')[0];  const secondsImagesList = document.getElementsByClassName('images')[1];  const thirdImagesList = document.getElementsByClassName('images')[2];  // 構(gòu)造列表li添加到ul標(biāo)簽中去  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);  });

  // 列表單獨(dú)一項(xiàng)的高度  const imageHeight = 136;
  // 獲取一列的高度  const listHeight = firstImagesList.scrollHeight;
  // 初始化列表tranlateY的高度  const startTranslateYHeight = - listHeight + imageHeight;
  // 游戲是否已經(jīng)開(kāi)始  let isStart = false;
  // 三個(gè)setTimeout的返回表示符，前兩個(gè)是第二列第三列列表開(kāi)始滾動(dòng)的延時(shí)方法，timeout3是機(jī)器停止搖晃動(dòng)畫(huà)的延時(shí)方法  let timeout1 = null;  let timeout2 = null;  let timeout3 = null;
  // 頁(yè)面剛進(jìn)來(lái)時(shí)列表位置初始化  initPosition(startTranslateYHeight);