快捷導(dǎo)航

VUE 實現(xiàn)一個簡易老虎機的項目實踐

更新時間：2022年04月24日 10:02:25 作者：海龜先生plus

老虎機在很多地方都可以見到，可以設(shè)置中獎位置，以及中獎回調(diào)，本文主要介紹了VUE 實現(xiàn)一個簡易老虎機的項目實踐，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

簡單分析下

UI，ui的話，就簡單點，三個列表從下往上滾動，搞個框罩住 css的活，應(yīng)該簡單。動畫，老規(guī)矩，我們采用之前的方案，動態(tài)設(shè)置 css，可以搞定。 設(shè)置中獎位置，我們可以想傳遞一個數(shù)組，類似 [1,2,3] 這樣，數(shù)組每一項代表停留位置，那我們就可以計算得css應(yīng)該平移的距離值，至于動畫結(jié)束后，還是參照以前的，監(jiān)聽動畫結(jié)束就可以了。

先看看效果

html

<div class="lhj_box" >
          // 這里直接 搞三組
          <div class="lhj_item" v-for="ite in 3" :key="ite"  >
           // ref 標識，到時候獲取，用于計算高度
              <ul :class="`lhj_ul_${ite}`" ref="ul" >
                    <li v-for="(item,index) in img" :key="index"  >
                        <img :src="require(`../assets/images/l_gift${item}.png`)" alt="">
                    </li>
              </ul>
          </div>
</div>

js部分

/**
 * 金額依次為1.1 1.2 1.3 1.4 1.5
 * **/ 
let UL_BOXS = []
export default {
    name:'lhj',
    data() {
        return {
            img: [],
            liHeight: 0,
            arr: [4,5,4],//中獎數(shù)組
        }
    },
    created() {
        this.setArr()
    },
    async mounted() {
        let evenTransition = this.whichTransitionEvent()
        await this.$nextTick()
        // 獲取 ul 3個 box
        UL_BOXS = this.$refs.ul
        // 計算每個 圖片高度
        let ulH = UL_BOXS[0].offsetHeight
        // 我自己默認循環(huán)的 50個圖片
        this.liHeight = ulH / 50 
        // 監(jiān)聽動畫結(jié)束函數(shù)
        UL_BOXS[2].addEventListener(evenTransition,rest,false)
        let that = this
        // 復(fù)位函數(shù)
        function rest() {
            for(let i = 0;i < that.arr.length;i++){
                let y =  (that.arr[i] - 1) * that.liHeight
                that.aniImg(y,i,0)
                
            }
            alert('中獎下標'+JSON.stringify(that.arr))
        }
        
    },
    beforeDestroy() {
        UL_BOXS = null
    },
    methods: {
        async toStart() {
            // 圈數(shù)
            let loop = 3
            // 一圈基礎(chǔ)高度 獎品數(shù)*每個高度
            let base = 5*this.liHeight
            for(let i = 0;i < this.arr.length; i++){
                let a = await this.delayPerform(i*100)
                if( a == 1){
                    let y = base*loop + (this.arr[i] - 1)*this.liHeight
                    this.aniImg(y,i)
                }
            }
        },
        // 目標位置
        aniImg(y,index,duration = 3000) {
            UL_BOXS[index].style.transitionDuration = `${duration}ms`
            UL_BOXS[index].style.transform = `translate(0px, -${y}px) translateZ(0px)`
        },
        // 設(shè)置重復(fù)數(shù)組
        setArr() {
            let arr = [1,2,3,4,5]
            let img2 = []
            for(let i = 0 ;i<10;i++){
                img2.push(...arr)
            }
            this.img = Object.freeze(img2)
        },
        // 改變中獎位置
        toChang() {
            this.arr = [1,1,1]
        },
        // 延時函數(shù)
        delayPerform(delay = 200) {
            return new Promise((resolve,reject) => {
                setTimeout(()=>{
                    resolve(1)
                },delay)
            })
        },
        // 動畫兼容
        whichTransitionEvent(){
            let el = document.createElement('span'),
            transitions = {
                'transition':'transitionend',
                'OTransition':'oTransitionEnd',
                'MozTransition':'transitionend',
                'WebkitTransition':'webkitTransitionEnd'
            };
            for(let t in transitions){
                if( el.style[t] !== undefined ){
                    return transitions[t];
                }
            }
            el = null;
        }
    }
}
</script>

js部分主要做了幾件事