【Vue.js實戰案例】- Vue.js實現九宮格水果機抽獎遊戲總結

時間 2019-11-06

標籤 Vue.js實戰案例 vue.js vue 實現九宮水果抽獎遊戲總結欄目 JavaScript 简体版

原文原文鏈接

你們好！先上圖看看本次案例的總體效果。

完整版實戰課程附demo：【Vue.js實戰案例】- Vue.js實現九宮格水果機抽獎

實現思路：

Vue component實現九宮格水果機組件，能夠嵌套到任意要使用的頁面。
css3 transform控制九宮格水果機抽獎過程的動畫效果。
抽獎組件內使用鉤子函數watch監聽抽獎結果的返回狀況播九宮格水果機動畫並給用戶彈出中獎提示。
中獎結果彈窗，爲抽獎組件服務。

實現步驟以下：

1. 構建api獎品配置信息和抽獎接口，vuex全局存放獎品配置和中獎結果數據信息。
api：javascript

export default {
  getPrizeList () {
    let prizeList = [
      {
        id: 1,
        name: '小米8',
        img: 'https://i1.mifile.cn/f/i/g/2015/cn-index/m8-140.png'
      },
      {
        id: 2,
        name: '小米電視',
        img: 'https://i1.mifile.cn/f/i/g/2015/TV4A-43QC.png'
      }, {
        id: 3,
        name: '小米平衡車',
        img: 'https://i1.mifile.cn/f/i/g/2015/cn-index/scooter-140!140x140.jpg'
      }, {
        id: 4,
        name: '小米耳機',
        img: 'https://c1.mifile.cn/f/i/g/2015/video/pinpai140!140x140.jpg'
      }
    ]
    return prizeList
  },
  lottery () {
    return {
      id: 4,
      name: '小米耳機',
      img: 'https://c1.mifile.cn/f/i/g/2015/video/pinpai140!140x140.jpg'
    }
  }
}

store:css

import lotteryApi from '../../api/lottery.api.js'

const state = {
  prizeList: [],
  lotteryResult: {}
}

const getters = {
  prizeList: state => state.prizeList,
  lotteryResult: state => state.lotteryResult
}

const mutations = {
  SetPrizeList (state, { prizeList }) {
    state.prizeList = prizeList
  },
  SetLotteryResult (state, { lotteryResult }) {
    state.lotteryResult = lotteryResult
  }
}

const actions = {
  getPrizeList ({ commit }) {
    let result = lotteryApi.getPrizeList()
    commit('SetPrizeList', { prizeList: result })
  },
  lottery ({ commit }) {
    let result = lotteryApi.lottery()
    commit('SetLotteryResult', { lotteryResult: result })
  }
}

export default {
  state,
  getters,
  mutations,
  actions,
  namespaced: true
}

2. 編寫抽獎組件，爲保證通用性，組件只負責播放抽獎結果。接收兩個數據和一個方法，以下：
數據一：預置的獎品列表數據（輪播獎品須要）
數據二：抽獎結果，播放抽獎動畫和彈出中獎結果須要
方法：抽獎動做，返回的抽獎結果數據即爲數據二，響應式傳遞給組件
大概代碼思路以下（僅供參考，不可運行vue

<template>
  <div class="main">
    <div class="squared"
         v-if="slotPrizes.length>0">
      <ul class="squared-warpper">
        <li class="squared-item"
            v-for="(item,index) in slotPrizes"
            v-bind:key="index">
          <img class="squared-item-btn"
               @click="parentEmitLottery()"
               v-if="index==4"
               src="//images.cnblogs.com/cnblogs_com/codeon/878827/t_startLottery.jpg">
          <div v-if="index!=4"
               class="squared-item-prise"
               :class="item.slotIndex==playIndex ? 'on':''">
            <img :src="item.img">
          </div>
        </li>
      </ul>
    </div>
    <prize-pop :prize="lotteryResult"
               v-if="showPrize"
               @closeLotteryPop="showPrize=false" />
  </div>
</template>
<script>
import PrizePop from './common/prize-pop.vue'
export default {
  name: 'FruitMachine',
  data () {
    return {
      isStart: false,
      showPrize: false,
      count: 0, // 移動總次數
      prizeIndex: -1, // 中獎的獎品索引
      timeOut: 100, // 延遲執行時間
      endingTimeOut: 200, // 最後一圈延遲執行時間
      intervalCount: 4, // 循環輪播次數
      playIndex: 0 // 當前移動的索引
    }
  },
  components: {
    PrizePop
  },
  props: {
    prizes: {
      type: Array,
      required: false
    },
    lotteryResult: {
      type: Object,
      default: () => { }
    }
  },
  computed: {
    slotPrizes () {
      let prize = []
      var self = this
      console.log(self.prizes)
      if (self.prizes.length > 0) {
        prize.push({ ...self.prizes[0], slotIndex: 1 })
        prize.push({ id: -1, slotIndex: 2, img: '//www.cnblogs.com/images/cnblogs_com/codeon/878827/t_thanksAccept.png' })
        prize.push({ ...self.prizes[1], slotIndex: 3 })
        prize.push({ id: -1, slotIndex: 8, img: '//www.cnblogs.com/images/cnblogs_com/codeon/878827/t_thanksAccept.png' })
        prize.push({ id: -1, slotIndex: -1, img: '//www.cnblogs.com/images/cnblogs_com/codeon/878827/t_thanksAccept.png' })
        prize.push({ id: -1, slotIndex: 4, img: '//www.cnblogs.com/images/cnblogs_com/codeon/878827/t_thanksAccept.png' })
        prize.push({ ...self.prizes[3], slotIndex: 7 })
        prize.push({ id: -1, slotIndex: 6, img: '//www.cnblogs.com/images/cnblogs_com/codeon/878827/t_thanksAccept.png' })
        prize.push({ ...self.prizes[2], slotIndex: 5 })
      }
      return prize
    }
  },
  methods: {
    /**
     * 觸發父頁面調用抽獎
     */
    parentEmitLottery () {
      this.$emit('lottery')
    },
    /**
     * 開始抽獎
    */
    startLottery () {
    },
    /**
     * 獲取中獎結果所在獎品列表中的索引，以肯定抽獎動畫最終落在哪一個獎品
    */
    getPrizeIndex () {
    },
    /**
     * 執行抽獎動畫
    */
    intervalPlay() {
    }
  },
  watch: {
    lotteryResult (newVal, oldVal) {
      if (newVal.id && newVal.id > 0) {
        this.startLottery()
      }
    }
  }
}
</script>

3. 彈出中獎結果組件，依附於抽獎組件，在上一步的執行抽獎結果動畫結束後執行。java

<template>
<div class="subject-pop" style="z-index: 10;" v-if="prize.id>0">
      <div class="subject-pop-mask"></div>
      <div class="subject-pop-box">
        <h3>恭喜您</h3>
        <p>
          <img :src="prize.img" alt>
        </p>
        <h4>得到
          <span></span>
          <span>{{prize.name}}</span>
        </h4>
        <div class="subject-pop-footer">
          <a href="javascript:;" class="november-btn1" @click="closeLotteryEmit">知道了</a>
        </div>
      </div>
    </div>
</template>
<script>
export default {
  props: {
    prize: {
      type: Object,
      default: () => {
        return {
          id: 0
        }
      }
    }
  },
  methods: {
    closeLotteryEmit () {
      this.$emit('closeLotteryPop')
    }
  }
}
</script>

4. 抽獎組件運用在須要使用的頁面中，此頁面須要爲抽獎組件提早準備好預置獎品列表和中獎結果信息，並提供好抽獎方法供子組件（抽獎組件）觸發，觸發完更改抽獎結果響應式傳入到抽獎組件中。css3

<template>
  <section>
    <div style="width:100%;text-align:center;margin:2rem 0;">您有一次抽獎機會，祝君好運~~~</div>
    <FruitMachine v-bind:prizes="prizeList"
                  v-bind:lotteryResult="lotteryResult"
                  v-on:lottery="lottery" />
  </section>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import FruitMachine from '@/components/fruitMachine'
export default {
  data () {
    return {

    }
  },
  created () {
    var self = this
    self.getPrizeList()
  },
  components: {
    FruitMachine
  },
  computed: {
    ...mapGetters({
      prizeList: 'lottery/prizeList',
      lotteryResult: 'lottery/lotteryResult'
    })
  },
  methods: {
    ...mapActions({
      getPrizeList: 'lottery/getPrizeList',
      lottery: 'lottery/lottery'
    })
  }
}
</script>

以上就是九宮格水果機抽獎核心步驟的總體思路，歡迎討論。vuex