VUE+WebPack游戏设计:为对战扑克牌增加能力槽
来源:互联网 发布:制作游戏的软件 编辑:程序博客网 时间:2024/06/06 01:37
更详细的讲解和代码调试演示过程,请点击链接
上一节我们完成了右边扑克牌向左边扑克牌发出冲击波后的动画特效,现在我们接着完成余下的动画效果,接下来左边扑克牌将向右边扑克牌发出冲击波,然后右边扑克牌也要展现颤动效果。
在template标签中添加如下代码:
<div class="card player a" ... :class="...,'shake' :cardAShake}" ... ><div class="card player b" ... :class="...,'shake' :cardBShake}" ... ><div class="card player c" ... :class="...,'shake' :cardCShake}" ... >
我们要增加三个变量:cardAShake, cardBShake, cardCShake,当某个变量的值设定为true时,对应的div元素其class属性会添加上shake,这样的话,他就会像左边的扑克牌一样,产生左右摇摆的颤抖效果。
在script标签中,我们添加如下代码:
import Constant from './constant' export default { data () { return { ... blazeTowwardRightObject: null, ... blazeAttackRight: false, cardAShake: false, cardBShake: false, cardCShake: false }; }, mounted () { .... this.blazeTowwardRightObject = document.querySelector('.blaze.toward-right') }....handleTransitionEvent (e) { switch (this.transitionState) { case Constant.OPPONENT_CARD_TRANSITION_END: if (this.cardOpponentOut === false) { this.transitionState = Constant.BLAZE_TOWARD_LEFT_ANIMATION_END this.blazeAttackLeft = true this.handleAnimationEnd(this.blazeTowardLeftObject) } break case Constant.BLAZE_TOWARD_LEFT_ANIMATION_END: this.handleAnimationEnd(this.opponentCardObject) this.opponentCardShake = true this.transitionState = Constant.OPPONENT_CARD_ANIMATION_END break case Constant.OPPONENT_CARD_ANIMATION_END: this.handleAnimationEnd(this.blazeTowwardRightObject) this.blazeAttackRight = true this.transitionState = Constant.BLAZE_TOWARD_RIGHT_ANIMATION_END break case Constant.BLAZE_TOWARD_RIGHT_ANIMATION_END: if (this.cardASelected) { console.log('card A shake') this.cardAShake = true } else if (this.cardBSelected) { this.cardBShake = true } else if (this.cardCSelected) { this.cardCShake = true } break } }}
在data()函数中添加新的变量定义,在加载函数mounted中,我们通过querySelector得到属性为’blaze toward-right’的div元素的实例,因为像上一节,我们需要监听这个元素在动画完成后所发出的消息。
当左边的扑克牌完成颤抖效果后,handleTransitionEvent函数又会被调用,此时transitionState的值是Constant.OPPONENT_CARD_ANIMATION_END,因此当它执行时,代码会进入相应的case,于是我们监听属性为’blaze toward-right’这个div元素所发出的webkitAnimationEnd消息,同时把blazeAttackRight设置成true,这样一个从左向右的冲击波动画就会发生,由于我们把transitionState设置成Constant.BLAZE_TOWARD_RIGHT_ANIMATION_END,那么当动画结束后,该函数会再次被调用,然后进入对应分支。以下是向右冲击波的动画:
当向右冲击波动画结束后,handleTransitionEvent再次被调用,此时进入的分支就是case Constant.BLAZE_TOWARD_RIGHT_ANIMATION_END, 代码先判断哪张牌被选中了,然后设置对应的变量,例如如果第一张牌被选中,那么cardASelected就会是true,于是我们就可以将其对应的cardAShake变量设置为true, 于是其对应的div具备了shake属性,由此就引发图片产生左右摇摆的动画,从而出现扑克牌颤抖的效果,具体效果请参看视频
接下来我们进入能量槽的开发。首先打开gamecontainer.vue,在sytle部分的css代码做一些修改:
#game { width: 480px; height: 600px; margin: 0 auto; border-radius: 8px; text-align: center; position: relative; overflow: hidden; } .row { width: 480px; margin: 0 auto; }
上面修改完后,我们的游戏场景会转移到页面中央。回到gamescenecomponent.vue,在template标签中的开头部分添加如下代码:
<div class="hp-background"> <div class="hp opponent" :style="{'width':opponentHPWidth}"></div> <div class="hp player" :style="{'width':playerHPWidth}"></div></div><div class="battle-indicator"></div>
接着到style标签部分,添加如下代码:
.battle-indicator { position: absolute; width: 80px; height: 80px; top: 0; left: 200px; background: url(../../static/images/battle.png) } .hp-background { border-bottom: 1px solid #333; background: #ababab; height: 30px; } .hp { position: absolute; width: 210px; height: 30px; transition: all .3s ease-out; } .hp.opponent { background: url(../../static/images/blue-hp.png) repeat; left: 0; } .hp.player { background: url(../../static/images/red-hp.png) repeat; right: 0; }
接着我们在script标签的代码里,增加有关变量的定义:
import Constant from './constant' export default { data () { return { .... playerHP: 100, opponentHP: 100, opponentHPWidth: '210px', playerHPWidth: '210px' } ....}
上面代码完成后,可以看到游戏场景的上方出现了蓝色和红色两截能量槽:
接着我们要做的是,当两张扑克牌发射冲击波后,上面的能量槽根据情况进行相应变化,在style标签中对代码做相应的修改和添加:
methods: { randomizePower () { this.selectedCardPower = Math.round(Math.random() * 60) + 40 this.opponentCardPower = Math.round(Math.random() * 60) + 40 },isSomeoneDead () { return (this.playerHP <= 0 || this.opponentHP <= 0) }, isPlayerDead () { if (this.playerHP <= 0) { return true } return false }, hurtPlayer (attackPower, defensePower) { var diff = attackPower - defensePower if (diff > 0) { this.playerHP = Math.max(this.playerHP - diff, 0) this.playerHPWidth = this.playerHP / 100 * 210 + 'px' } console.log('player width:' + this.playerHPWidth) }, hurtOpponent (attackPower, defensePower) { var diff = attackPower - defensePower if (diff > 0) { this.opponentHP = Math.max(this.opponentHP - diff, 0) this.opponentHPWidth = this.opponentHP / 100 * 210 + 'px' } console.log('opponent width' + this.opponentHPWidth) }}
hurtPlayer 和 hurtOpponent分别用来计算用户选中的牌和敌对牌经过厮杀后,各自该减去多少能量,randomizePower用来为两张牌随机的产生能量值。一旦两张牌互相发射冲击波后,我们就利用上面的函数计算各自能量的损耗,然后把损耗结果在能量槽上反映出来,于是我们需要对函数handleTransitionEvent进行相应修改:
handleTransitionEvent (e) { .... case Constant.BLAZE_TOWARD_LEFT_ANIMATION_END: this.handleAnimationEnd(this.opponentCardObject) this.opponentCardShake = true this.transitionState = Constant.OPPONENT_CARD_ANIMATION_END this.hurtOpponent(this.selectedCardPower, this.opponentCardPower) break .... case Constant.BLAZE_TOWARD_RIGHT_ANIMATION_END: if (this.cardASelected) { this.cardAShake = true } else if (this.cardBSelected) { this.cardBShake = true } else if (this.cardCSelected) { this.cardCShake = true } this.hurtPlayer(this.opponentCardPower, this.selectedCardPower) break}
当从右向左的冲击波动画结束后,我们使用hurtOpponent计算敌对扑克牌的能量减少了多少,从左向右的冲击波动画结束后,我们使用hurtPlayer来计算用户这边的能量槽应该减少多少,上面的代码完成后,运行起来结果如下:
下一节我们将完成游戏的收尾工作,经过一系列艰苦的努力,我们终于看到了胜利的曙光。
更多技术信息,包括操作系统,编译器,面试算法,机器学习,人工智能,请关照我的公众号:
- VUE+WebPack游戏设计:为对战扑克牌增加能力槽
- VUE+WebPack游戏设计:扑克牌对战的多回合交互
- VUE+WebPack游戏设计:实现两张扑克牌的逐对厮杀特效
- VUE+WebPack游戏设计:用CSS实现扑克牌翻转特效
- VUE+WebPack游戏设计:'乘法防线'游戏设计
- VUE+WebPack游戏开发:神庙逃亡的游戏设计
- VUE+WebPack游戏设计:欲望都市城市图层的设计
- VUE+WebPack实现精美Html5游戏设计:纸牌战争
- VUE+WebPack游戏设计:实现碰撞检测和动画精灵
- VUE+WebPack游戏设计:实现盒子动画和键盘特效
- VUE+WebPack前端游戏设计:依赖VUE组件通讯机制实现场景游戏切换
- Vue+WebPack游戏设计:自动背景贴图和游戏主循环的实现
- VUE+WebPack游戏设计:欲望都市,构建类RPG游戏的开发
- VUE+WebPack实现精美Html5游戏设计:cardBattle的启动场景设计
- VUE+WebPack游戏设计:实现盒子爆破效果和界面美化
- vue+webpack实现精美游戏设计:实现建筑物的渐变生成效果
- 扑克牌游戏的设计与实现
- c++游戏设计二:反转扑克牌
- 距离变换代码实现(c代码)
- QT布局之水平垂直加Qss样式布局
- android ndk 02 C语言 二级指针 指针运算 指针与数组
- Mysql主从复制和读写分离Amoeba实现
- 测试
- VUE+WebPack游戏设计:为对战扑克牌增加能力槽
- js关闭当前弹出的小窗口并打开新窗口
- ORACLE Scheduler特性(7)Scheduler抛出的Events
- hdu2844
- 如何提高app的用户参与度?
- Wordpress主题magazine point底部版权信息删除
- C++智能指针详解
- android6.0动态权限申请工具类
- ue4 导出渲染全景视频序列帧