VUE游戏设计：实现外星人的攻击冲击波

游戏的趣味性在与各种关卡和难度，游戏的难度如上台阶，具有层层递进的性质。本节我们为太空防御游戏增加关卡功能，让游戏的难度由低到高，每一关我们称作一个冲击波，前面的冲击波，外星人的数量比较少，下落速度也相对较慢，等到后面的冲击波时，外星人的数量会越来越多，速度和攻击力越来越大，于是游戏的难度也逐渐变大。

当完成本节代码后，我们会得到如下效果，在每一轮冲击波开始时，界面会出现如下信号：

当游戏进行到后几轮冲击波时，外星人数量和种类越来越多，战况越来越激烈：

我们看看代码的实现，在gamescenecomponent.vue中添加新的数据结构：

export default {data () {return {....// change 1waves: {}}},methods: {init () {....// change 2this.initWaves()this.startWave()...},// change 3initWaves () {console.log('begin init wave')this.waves.nextWave = 0this.waves.isActive = false// 定义一轮冲击波中外星人从天而降的次序this.waves.enemySummonOrder = ['EnemyDummy', 'Enemy1', 'Enemy2', 'Enemy3', 'Boss', 'Boss2']console.log('init wave data')this.waves.data = [// 第一轮冲击波{'EnemyDummy': 1, frequency: 10},// 第二轮冲击波{'EnemyDummy': 8, 'Enemy1': 5, 'Enemy2': 5, 'Boss': 2, frequency: 150},// 第三轮冲击波{'EnemyDummy': 1, 'Enemy1': 1, 'Enemy2': 1, 'Enemy3': 1, 'Boss': 1, 'Boss2': 30, frequency: 50}]console.log('init wave sprite')this.nextWaveSprite = new this.assetsLib.WaveCleared()this.stage.addChild(this.nextWaveSprite)this.nextWaveSprite.x = 999},// change4 启动一轮外星人攻击的冲击波startWave () {this.energies = 120this.waves.currentWave = this.waves.data[this.waves.nextWave]this.waves.isActive = truethis.waves.enemiesSummoned = 0},// change 5wavesCleared () {this.waves.nextWave += 1if (this.waves.nextWave >= this.waves.data.length) {this.waves.nextWave = this.waves.data.length - 1}},
}

上面代码定义了外星人攻击冲击波的数据结构，其中定义了每一轮攻击过程中，外星人的种类和数量，在每一轮冲击波启动前，页面会出现“wave cleared”的字体显示特效，startWave启动新一轮冲击波流程，wavesCleared在冲击波结束后，负责清理页面和各种数据结构。接下来我们实现冲击波流程的动态效果：

// change 6waveTick () {if (!this.waves.isActive) {return}if (this.cjs.Ticker.getTicks() % this.waves.currentWave.frequency === 0) {// 依次把不同种类的外星人召唤出来var accumunateTargetCount = 0for (var i = 0, len = this.waves.enemySummonOrder.length; i < len; i++) {var enemyType = this.waves.enemySummonOrder[i]// 获得外星人个数var targetCount = this.waves.currentWave[enemyType] || 0accumunateTargetCount += targetCountif (this.waves.enemiesSummoned < accumunateTargetCount) {break}}if (this.waves.enemiesSummoned >= accumunateTargetCount) {this.waves.isActive = false} else {this.addEnemy(enemyType)this.waves.enemiesSummoned += 1}}},tick () {....// change 9this.wavesSpan.textContent = this.waves.nextWave + 1this.boardTick()// change 7this.waveTick()if (!this.waves.isActive && this.areEnemiesCleared()) {this.boardLayer.isAddingBuilding = falsethis.removeAllBuildings()this.removeAllBullets()this.wavesCleared()// 显示字体动画this.cjs.Tween.get(this.nextWaveSprite).to({x: this.canvas.width / 2, y: this.canvas.height / 2, alpha: 0}).to({alpha: 1.0}, 300).wait(1000).to({alpha: 0}, 300).to({x: 999})this.startWave()}},// change 8removeAllBuildings () {for (var i = 0; i < this.boardLayer.cols; i++) {for (var j = 0; j < this.boardLayer.rows; j++) {this.removeBuilding(this.boardLayer.buildingMap[i][j])}}this.satelliteList = []this.castleList = []},areEnemiesCleared () {return this.enemyList.length === 0},removeAllBullets () {this.bulletList.length = 0this.effectLayer.removeAllChildren()},

waveTick函数用于在冲击波进行的过程中不断的更新页面。每一轮冲击波有哪些种类的外星人已经外星人数量是多少，都是由wave.data中定义的数据决定的。waveTick的作用是把wave.data中定义的外星人种类和数量加载到页面上，然后刷新页面，实现页面动态效果。waveTick是在时钟函数tick中被调用的，在tick函数中，一旦判断到一轮冲击波结束时，他们把”wave cleared”的字体特效显示到页面上，就如开头图片展示的那样。removeAllBuildings和removeAllBullets负责在一轮冲击波结束时，将页面上的建筑物和飞翔的子弹清除掉。最后我们从资源库中将不停种类的外星人资源加载到浏览器里，并在合适的时候将他们描绘在页面上：

// change 9enemy1 () {console.log('enemy1')var enemy1 = this.enemy()enemy1.addChild(new this.assetsLib.Enemy1())enemy1.attackSpeed = 50enemy1.speed = enemy1.originalSpeedenemy1.name = 'enemy1'return enemy1},enemy2 () {console.log('enemy2')var enemy2 = this.enemy()enemy2.addChild(new this.assetsLib.Enemy2())enemy2.originalSpeed = 1.0enemy2.attackSpeed = 40enemy2.hp = 8enemy2.deceleration = 0.008enemy2.speed = enemy2.originalSpeedenemy2.name = 'enemy2'return enemy2},boss2 () {var bossEnemy = this.enemy()bossEnemy.addChild(new this.assetsLib.Boss2())bossEnemy.originalSpeed = 0.2bossEnemy.deceleration = 0.002bossEnemy.hp = 300bossEnemy.attackSpeed = 50bossEnemy.name = 'boss'return bossEnemy},enemy3 () {console.log('enemy3')var enemy3 = this.enemy()enemy3.addChild(new this.assetsLib.Enemy3())enemy3.originalSpeed = 3.0enemy3.attackSpeed = 10enemy3.hp = 8enemy3.deceleration = 0.002enemy3.speed = enemy3.originalSpeedenemy3.name = 'enemy3'return enemy3},

完成上面代码后，我们就可以看到如开头第二幅图那样的，五花八门的外星人从天而降，我们在底部架起各种炮台和建筑打击外星人，整幅画面具有星球大战般的绚丽感。

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

更多技术信息，包括操作系统，编译器，面试算法，机器学习，人工智能，请关照我的公众号：

VUE游戏设计：实现外星人的攻击冲击波相关推荐

【vue课程设计】vue课程设计--随机小游戏游戏设计
1.引言设计结课作业,课程设计无处下手,网页要求的总数量太多?没有合适的模板?数据库,java,python,vue,html作业复杂工程量过大?毕设毫无头绪等等一系列问题.你想要解决的问题,在微信 ...
vue列表长度限定_游戏设计中的中英文名称可输入/显示长度规范探究
大家好,我是游戏交互设计师懒蚂蚁GM~ 我们刚接触一款新游戏时,一般都会创建一个让自己满意的游戏角色,然后将自己的情感和行为映射到这个角色身上,以这个角色的身份去和虚拟的游戏世界进行互动.那么,我们在 ...
计算机游戏设计的艺术(1)
不得转载! translation management by puzzy3d 计算机游戏设计的艺术 Chris Crawford 电子版前言(略)peabody@vancouver.wsu.edu. ...
游戏设计的艺术：一本透镜的书——第十一章游戏机制必须平衡
这是一本游戏设计方面的好书转自天之虹的博客:http://blog.sina.com.cn/jackiechueng 感谢天之虹的无私奉献 Word版可到本人的资源中下载第十一章游戏机制必须平衡 ...
计算机游戏设计的艺术
计算机游戏设计的艺术 Chris Crawford 电子版前言(略)peabody@vancouver.wsu.edu. 目录 ...
《黑暗之魂3》的游戏设计思路
动作游戏基础概念动作游戏的深度与宽度宽度简单:游戏可能出现情况的和等价:可能空间例如:黑魂中的普攻.战技.魔法.咒术.盾反.翻滚或滑步.不同武器的不同动作模组.小怪的AI和设计.玩家之间的入 ...
深入分析游戏设计的8条原则
原文链接:http://gamerboom.com/archives/78680 深入分析游戏设计的8条原则发布时间:2013-11-11 16:33:03 Tags: 反馈, 奖励, 平衡, 流 ...
vue 新手指引_精通react/vue组件设计之快速实现一个可定制的进度条组件
前言这篇文章是笔者写组件设计的第四篇文章,之所以会写组件设计相关的文章,是因为作为一名前端优秀的前端工程师,面对各种繁琐而重复的工作,我们不应该按部就班的去"辛勤劳动",而是要根 ...
Vue.js 官方团队成员霍春阳新作，深入解析 Vue.js 设计细节
霍春阳(Hcy),Vue.js 官方团队成员.专注于 Web 研发领域,是 Vue.js 3 的核心贡献者之一,Vue.js 文档生成工具 Vuese 的作者,技术社区活跃者,曾撰写大量颇受好评的技术 ...
《风暴英雄》里那些超棒的游戏设计
<风暴英雄>中有很多优秀的游戏设计,此文就将盘点一下我个人认为的好设计. 先让我们思考几个小问题: 补刀这个机制真的是个好设计吗? 经济系统和所有英雄共用的装备系统是不是绑架了英雄的设计? ...

VUE游戏设计：实现外星人的攻击冲击波

VUE游戏设计：实现外星人的攻击冲击波相关推荐

最新文章

热门文章