更详细的讲解和代码调试演示过程，请点击链接
上一节我们实现了扑克牌对战时的一个循环，也就是当用户选择好扑克牌后，敌对扑克牌出现在页面上，用户选择的扑克牌向其发出攻击冲击波，然后敌对扑克牌向用户扑克牌发送冲击波，最后某一方的能量值减少，这种减少会反应在顶部能量槽上。
这节我们要做的是当一个攻击流程结束后，我们自动重启下一轮攻击攻击流程，攻击流程反复进行直到某一方的能量降低至0为止，然后游戏结束。
首先在gamescene.vue的template标签中添加如下代码：
....
{{selectedCardPower}}
....
....
{{selectedCardPower}}
....
....
{{selectedCardPower}}
....
....
{{opponentCardPower}}
....
上面代码的作用是，我们在扑克牌发出冲击波前，在牌面上显示冲击波的攻击力，接着我们在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实现动画特效，掌握这点，那么我们就有了实质性收获。本游戏可以进一步做改进，例如我们可以把它实现成联机版，由两个联网用户一起玩，敌对扑克牌对应的是另一方用户选择的牌，联机玩肯定比单机要有趣的多，有兴趣的朋友可以自行尝试一下。
下一节我们将开始一个新游戏：神庙逃亡。
更详细的讲解和代码调试演示过程，请点击链接
更多技术信息，包括操作系统，编译器，面试算法，机器学习，人工智能，请关照我的公众号：
