VUE+WebPack游戏设计：扑克牌对战的多回合交互

更详细的讲解和代码调试演示过程，请点击链接

上一节我们实现了扑克牌对战时的一个循环，也就是当用户选择好扑克牌后，敌对扑克牌出现在页面上，用户选择的扑克牌向其发出攻击冲击波，然后敌对扑克牌向用户扑克牌发送冲击波，最后某一方的能量值减少，这种减少会反应在顶部能量槽上。

这节我们要做的是当一个攻击流程结束后，我们自动重启下一轮攻击攻击流程，攻击流程反复进行直到某一方的能量降低至0为止，然后游戏结束。

首先在gamescene.vue的template标签中添加如下代码：

<div class="card player a" ...>
  ....
  <div class="front face">
     <div class="power">{{selectedCardPower}}</div>
  </div>
  ....
</div>

<div class="card player b" ...>
  ....
  <div class="front face">
     <div class="power">{{selectedCardPower}}</div>
  </div>
  ....
</div>

<div class="card player c" ...>
  ....
  <div class="front face">
     <div class="power">{{selectedCardPower}}</div>
  </div>
  ....
</div>

<div class="card opponent" ...>
  ....
  <div class="front face">
     <div class="power">{{opponentCardPower}}</div>
  </div>
  ....
</div>

上面代码的作用是，我们在扑克牌发出冲击波前，在牌面上显示冲击波的攻击力，接着我们在script标签中添加相应的变量定义：

export default {
    data () {
      return {
      ....
      selectedCardPower: 0,
      opponentCardPower: 100,
      ...
      selectedCardObject: null
      }
    }
}

我们将通过document.querySelector获得被选中扑克牌所对应的DOM对象，并把该对象存储在遍历selectedCardObject中。驱动整个动画流程的是函数handleTransitionEvent，我们需要在该函数里做相应修改：

handleTransitionEvent (e) {
....
case Constant.BLAZE_TOWARD_RIGHT_ANIMATION_END:
            var selectedCard = ''
            if (this.cardASelected) {
              this.cardAShake = true
              selectedCard = '.card.player.a'
            } else if (this.cardBSelected) {
              this.cardBShake = true
              selectedCard = '.card.player.b'
            } else if (this.cardCSelected) {
              this.cardCShake = true
              selectedCard = '.card.player.c'
            }
            this.selectedCardObject = document.querySelector(selectedCard)
            this.handleAnimationEnd(this.selectedCardObject)
            this.hurtPlayer(this.opponentCardPower, this.selectedCardPower)
            this.transitionState = Constant.SELECTED_CARD_SHAKE_END
            break
case Constant.SELECTED_CARD_SHAKE_END:
            if (this.isSomeOneDead()) {
              if (this.isPlayerDead()) {
                this.userWon = false
              } else {
                this.userWon = true
              }

              this.showGameOverScene()
            } else {
              this.restartGame()
            }
            break
        }
}

上面代码的逻辑是，一旦敌对扑克牌发出向右的冲击波后，我们根据用户选取的扑克牌，通过document.querySelector获得其对应的DOM对象，这样我们才能监控它何时完成颤抖动画，一旦颤抖动画完成后，我们会进入case Constant.SELECTED_CARD_SHAKE_END， 在里面我们通过调用isSomeOneDead()先判断是否有扑克牌的能量将为0了，如果是用户扑克牌能量将为0，那进入游戏结束画面，在结束画面显示”You Lose”告知用户游戏失败，如果是敌对扑克牌能量降为0，那么显示的结束画面中显示“You Win”告诉用户游戏成功。

如果两者的能力都不为0，那么我们就通过调用reastartGame()得启动下一轮对战流程,我们看看它的实现：

restartGame () {
        this.cardASelected = false
        this.cardBSelected = false
        this.cardCSelected = false
        this.cardOpponentOut = true
        this.transitionState = Constant.OPPONENT_CARD_TRANSITION_END
        this.blazeAttackLeft = false
        this.opponentCardShake = false
        this.blazeAttackRight = false
        this.cardAShake = false
        this.cardBShake = false
        this.cardCShake = false

        this.cardFlipped()
      }

它的实现简单，只是把一些重要变量设置成false,接着调用cardFlipped()就可以实现新一轮对战动画了。

最后我们在style标签添加如下代码：

.card .power {
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 30px;
    font-size: 2em;
    color: #fff
  }

上面代码完成后，我们可以看到如下效果，当扑克牌对战时，扑克牌上会有数字显示冲击波的攻击力：

一轮攻击结束后，底下又出现三张扑克牌，用户选择其中一张后，新一轮的对战动画又重新开启，直到某一方的能力值降低为0后，进入结束画面，如果是用户能量降低为0，那么便出现下面的结束画面：

至此，我们整个游戏的开发基本上就结束了，这个项目的技术精华就在于如何使用CSS实现动画特效，掌握这点，那么我们就有了实质性收获。本游戏可以进一步做改进，例如我们可以把它实现成联机版，由两个联网用户一起玩，敌对扑克牌对应的是另一方用户选择的牌，联机玩肯定比单机要有趣的多，有兴趣的朋友可以自行尝试一下。

下一节我们将开始一个新游戏：神庙逃亡。

更详细的讲解和代码调试演示过程，请点击链接

欢迎关注公众号，让我们一起学习，交流，成长：