VUE+WebPack游戏设计:实现盒子爆破效果和界面美化

上节，我们完成了数字盒子的下落以及数字键盘的实现，当玩家点击键盘，点击的按键乘机等于下落的盒子数值时，游戏会把盒子给爆破掉，现在我们就来实现这个机制。

要实现爆破效果，我们需要使用另一个第三方库tweenjs-0.5.1.min.js,先在index.html中添加对该库的引入：

  <head><meta http-equiv="Content-type" content="text/html; charset=utf-8"><script type="text/javascript" src="./static/tweenjs-0.5.1.min.js"></script><script type="text/javascript" src="./static/easeljs-0.7.1.min.js"></script><script type="text/javascript">window.createjs = createjs</script><title>Multiply Defense</title></head>

接着我们在页面下方画一条分界线，盒子一旦落入分界线下面，盒子应该自动消失掉，相应代码实现如下：

export default {data () {....boundaryY: 320....}

我们把这条分界线放在y坐标为320个像素单位处，然后我们在指定位置绘制一条红线：

methods: {init () {....var line = this.rectShape(this.gameWidth, 3, {fillColor: '#600'})if (line.y === undefined) {console.log('line.y is null')}line.y = this.boundaryYthis.stage.addChild(line)....}
}

完成这些代码后，加载页面会看到有一条红线横躺在界面上:

当盒子越过红线时，我们需要把盒子从页面上抹去。负责盒子下落的是函数moveObjects, 因此我们需要在该函数中判断每个盒子的y坐标，如果坐标超过了红线所在的位置，那么我们就得把它从页面上清除掉，相应的代码如下：

moveObjects () {var p = 0while (p < this.numberBoxes.length) {var box = this.numberBoxes[p]if (box.y > this.boundaryY) {this.removeNumberBox(box)} else {box.y += this.fallingSpeedp++}}},removeNumberBox (target) {for (var i = 0, len = this.numberBoxes.length; i < len; i++) {var box = this.numberBoxes[i]if (box === target) {this.numberBoxes.splice(i, 1)this.stage.removeChild(box)return}}}

在moveObjects中，我们会循环查看所有盒子的坐标，如果盒子坐标没有超过红线，那么我们让盒子继续下降，如果超过了，则调用removeNumberBox()来实现盒子的清除，在removeNumberBox中，我们把超过红线的盒子在数组中找到，并把它从数组中移除，由于原来盒子是作为stage的孩子添加的，为了让页面不再显示给定盒子，我们通过removeChild把盒子从stage容器中去除，这样当页面再次调用stage.update()刷新时，被移除的盒子将不会再出现在页面上。

接着我们要实现盒子的爆破效果，当玩家点击数字键盘，按键的乘机等于给定盒子的数值时，我们要在盒子表明实现一个绿色的圆圈，等圆圈消失后，把盒子从页面上移除，这样就实现盒子的爆破效果，具体效果如下：

绿色圆圈处原来是一个数字盒子，当盒子被爆破时，圆圈出现，然后盒子消失。我们看看它的代码是如何实现的：

methods: {
....
controlClicked (e) {var value = e.target.dataset.valuevar string = this.addInput(value)this.updateText(string)this.checkResult()},
....
findNumberBoxWithValue (value) {for (var i = 0, len = this.numberBoxes.length; i < len; i++) {var box = this.numberBoxes[i]if (box.value === value) {return box}}},checkResult () {var box = this.findNumberBoxWithValue(this.result)if (box) {this.showCircle(box.x, box.y)this.removeNumberBox(box)this.clearInputs()}},showCircle (x, y) {var circle = new this.createjs.Bitmap('../../static/circle.png')circle.x = x || 0circle.y = y || 0this.stage.addChild(circle)this.createjs.Tween.get(circle).wait(500).to({alpha: 0}, 1000).call(function () { this.stage.removeChild(circle) }.bind(this))},
....
}

当玩家点击数字键盘后，controlClicked 接口会被调用，我们在里面获得玩家按键的乘机值，接着调用checkResult()判断乘机值是否与某个下落的盒子相等，checkResult调用findNumberBoxWithValue()函数，该函数变量存储所有数字盒子的数组numberBoxes，如果有盒子的数值跟给定数值一样，那么就把这个盒子对象返回，拿到要爆破的盒子对象后，代码调用showCircle(x,y)，其中x,y是盒子当前坐标，它会在合作表明显示出一个绿色的圆圈图案，然后把盒子从页面上删除掉，为了显示爆破效果，绿色圆圈图案出现在画面上后，再以渐变的方式慢慢消失，实现这个效果的就得依赖我们刚引入的Tween类，代码：

 this.createjs.Tween.get(circle).wait(500).to({alpha: 0}, 1000).call(function () { this.stage.removeChild(circle) }.bind(this))

作用是把circle变量对应的图片先在页面上正常显示500毫秒，有就是wait(500)的作用，到第1000毫秒，也就是一秒钟时，把图片的透明的转换成0，也就是to({alpha: 0}, 1000),接着调用我们提供的回调函数，在回调函数里，我们知道此时展现爆破效果的绿圈图案要消失了，于是我们通过removeChild的方式把绿圈图案从stage上移除，这样下次界面刷新时，它就不会在显示出来，由于该功能是一种动态的显示效果，请点击链接来观看实际效果。tweenjs库可以实现很多图片显示效果，具体说明可以参看以下链接：
http://www.createjs.com/Docs/TweenJS/classes/Ease.html

至此，游戏的基本流程我们都做完了，接下来我们完成收尾工作，然后把界面美化成我们最初显示的样子。我们要给玩家三次机会，当有三个数字盒子落到红线以下，游戏就该结束了，我们先在左上角绘制三个标记，在script标签处添加一下代码：

export default {data () {return {...initialLifes: 3,lifes: 3,hearts: [],heartsContainer: null,....}，methods: {init () {....this.initHearts()....},initHearts () {this.heartsContainer = new this.createjs.Container()this.heartsContainer.x = 5this.heartsContainer.y = 5this.stage.addChild(this.heartsContainer)this.resetHearts()},resetHearts () {this.heartsContainer.removeAllChildren()this.hearts.length = 0for (var i = 0; i < this.initialLifes; i++) {var heart = this.rectShape(18, 18, {fillColor: 'red'})heart.x = i * 20this.heartsContainer.addChild(heart)this.hearts.push(heart)}},deduceLife () {this.lifes -= 1var heart = this.hearts[this.lifes]this.heartsContainer.removeChild(heart)console.log(this.lifes)if (this.lifes <= 0) {this.gameOver()}},gameOver () {this.createjs.Ticker.setPaused(true)},moveObjects () {....if (box.y > this.boundaryY) {this.removeNumberBox(box)this.deduceLife()} ....},},....
}

initHearts会在页面的左上角绘制三个红色的小正方形，当有数字盒子落入红线下方时，deduceLife会在moveObjects函数中被调用，每调用一次，它会把界面左上角的红方块减去一个，当三个红方块减完后，调用gameOver()，把整个游戏设置为暂停状态，上面代码完成后，效果如下：

一旦三个方块减完，游戏进入暂停，此时我们可以在页面中间显示一个’replay’按钮，玩家点击后，游戏能重新开始，所以我们添加一下代码：

<template><div>....<div id="game-over" :class="{'hide': !gameOverShow,'show': gameOverShow}"@click="gameOverClicked"></div></div>
</template>

新增的div元素能由于在页面上展示’replay’按钮，接下来我们增加对应的css样式代码：

<style scoped>
.....show {display: block;}.hide {display: none;}#game-over {background: url(../../static/images/replay.png);    width: 100px;height: 60px;margin: auto;position: absolute;left: 100px;top: 200px;}#game-over:hover {background-image: url(../../static/images/replay_hover.png);}#game-over:active {background-image: url(../../static/images/replay_active.png);}
</style>

然后我们在script标签中也添加控制代码，使得游戏结束后在页面上出现一个’replay’按钮，玩家点击按钮后，游戏又能重新进行：

  gameOver () {this.createjs.Ticker.setPaused(true)this.showGameOver()},showGameOver () {this.gameOverShow = true},hideGameOver () {this.gameOverShow = false},gameOverClicked () {this.lifes = this.initialLifesthis.removeAllNumberBoxes()this.hideGameOver()this.resetHearts()this.createjs.Ticker.setPaused(false)console.log(this.gameOverShow)},removeAllNumberBoxes () {for (var i = 0, len = this.numberBoxes.length; i < len; i++) {var box = this.numberBoxes[i]this.stage.removeChild(box)}this.numberBoxes.length = 0},

当showGameOver被调用是，变量gameOverShow设置为true,那么前面我们添加的div元素就会被显示出来，当div元素对应的’replay’按钮被点击后，gameOverClicked()会被调用，它会清空页面上所有数字盒子，同时重新在左上角绘制三个红色方块，然后把游戏从暂停状态转换为进行状态，于是游戏又能得以重新进行。上面代码完成后，效果如下：

我们完成最后的工作，把游戏界面美化成最开始介绍的样子，美化其实就是贴图，添加如下代码：

methods: {init () {....// changevar line = new this.createjs.Bitmap('../../static/images/line.png')line.y = this.boundaryYthis.stage.addChild(line)this.initHearts()},resetHearts () {....for (var i = 0; i < this.initialLifes; i++) {// changevar heart = new this.createjs.Bitmap('../../static/images/heart.png').... }},box () {// changevar obj = new this.createjs.Container()var bitmap = new this.createjs.Bitmap('../../static/images/box.png')obj.addChild(bitmap)return obj},
}<style scoped>#canvas {background: #333 url(../../static/images/bg.png); }.control {....background: gray url(../../static/images/input_button.png);....}
</style>

我们把图片引入页面，并通过代码将图片在相应的地方绘制出来，这里的改动有三处，一是把黑色背景换成图片，把左上角的三个方块换成三个心形图片，最后把盒子也换成图片，上面代码完成后，运行效果如下：

到此，整个乘法防线的游戏就开发完成了，更详细的讲解和代码调试演示过程，请点击链接

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

VUE+WebPack游戏设计:实现盒子爆破效果和界面美化相关推荐

VUE+WebPack游戏设计：欲望都市城市图层的设计
在上一节,我们设计了游戏的背景图层和UI图层,这一节开始,我们把精力集中到城市图层的开发和设计上,因为整个游戏的动画特效和游戏逻辑都发送在这个图层,因此它的开发是整个项目的难点所在. 我先把中间的城市 ...
VUE+WebPack游戏设计：欲望都市,构建类RPG游戏的开发
本节开始,我们将基于上一个项目所学到的知识,利用createjs 和 Tween两个图形绘制库开发一款新的游戏,名为欲望都市.这个游戏具备一个特点就是2.5D,它是一种经济系统构建型游戏,开始时玩家得 ...
VUE+WebPack游戏开发：神庙逃亡的游戏设计
转载于:https://www.cnblogs.com/ZHONGZHENHUA/p/10141732.html
基于JavaScript和VUE数独游戏设计与实现
全套资料下载地址:https://download.csdn.net/download/sheziqiong/85595640 全套资料下载地址:https://download.csdn.net/d ...
基于MATLAB的拼图游戏设计（图文详解，附完整代码）
基于MATLAB的拼图游戏设计内容摘要:MATL ...
【vue课程设计】vue课程设计--随机小游戏游戏设计
1.引言设计结课作业,课程设计无处下手,网页要求的总数量太多?没有合适的模板?数据库,java,python,vue,html作业复杂工程量过大?毕设毫无头绪等等一系列问题.你想要解决的问题,在微信 ...
java飞机大战爆炸效果_Java飞机大战游戏设计与实现
1 概述 1.1 项目简介本次Java课程设计是做一个飞机大战的游戏,应用Swing编程,完成一个界面简洁流畅.游戏方式简单,玩起来易于上手的桌面游戏.该飞机大战项目运用的主要技术即是Swing编程 ...
vue列表长度限定_游戏设计中的中英文名称可输入/显示长度规范探究
大家好,我是游戏交互设计师懒蚂蚁GM~ 我们刚接触一款新游戏时,一般都会创建一个让自己满意的游戏角色,然后将自己的情感和行为映射到这个角色身上,以这个角色的身份去和虚拟的游戏世界进行互动.那么,我们在 ...
基于Java的雷电游戏设计(含源文件)
欢迎添加微信互相交流学习哦! 项目源码:https://gitee.com/oklongmm/biye 基于Java的雷电游戏摘要电脑游戏,是指在计算机上能够运转的游戏软件.这种软件具 ...

VUE+WebPack游戏设计:实现盒子爆破效果和界面美化

VUE+WebPack游戏设计:实现盒子爆破效果和界面美化相关推荐

最新文章

热门文章