【Vue.js实战案例】- Vue.js实现九宫格水果机抽奖游戏总结

大家好!先上图看看本次案例的整体效果。

 

 完整版实战课程附demo【Vue.js实战案例】- Vue.js实现九宫格水果机抽奖

 

 实现思路:

  1. Vue component实现九宫格水果机组件,可以嵌套到任意要使用的页面。
  2. css3 transform控制九宫格水果机抽奖过程的动画效果。
  3. 抽奖组件内使用钩子函数watch监听抽奖结果的返回情况播放九宫格水果机动画并给用户弹出中奖提示。
  4. 中奖结果弹窗,为抽奖组件服务。

       实现步骤如下:

  1.  构建api奖品配置信息和抽奖接口,vuex全局存放奖品配置和中奖结果数据信息。
    api:
    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:

    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. 编写抽奖组件,为保证通用性,组件只负责播放抽奖结果。接收两个数据和一个方法,如下:
    数据一:预置的奖品列表数据(轮播奖品需要)
    数据二:抽奖结果,播放抽奖动画和弹出中奖结果需要
    方法:抽奖动作,返回的抽奖结果数据即为数据二,响应式传递给组件
    大概代码思路如下(仅供参考,不可运行)
    <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. 弹出中奖结果组件,依附于抽奖组件,在上一步的执行抽奖结果动画结束后执行。
    <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. 抽奖组件运用在需要使用的页面中,此页面需要为抽奖组件提前准备好预置奖品列表和中奖结果信息,并提供好抽奖方法供子组件(抽奖组件)触发,触发完更改抽奖结果响应式传入到抽奖组件中。
    <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>

     

         以上就是九宫格水果机抽奖核心步骤的整体思路,欢迎讨论。

 

 完整版实战课程附demo【Vue.js实战案例】- Vue.js实现九宫格水果机抽奖游戏

 

转载于:https://www.cnblogs.com/codeon/p/11078143.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值