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

望月从良

发布于 2018-07-19 18:13:28

9130

发布于 2018-07-19 18:13:28

上节，我们完成了数字盒子的下落以及数字键盘的实现，当玩家点击键盘，点击的按键乘机等于下落的盒子数值时，游戏会把盒子给爆破掉，现在我们就来实现这个机制。要实现爆破效果，我们需要使用另一个第三方库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.boundaryY
       this.stage.addChild(line)
     ....
     }     
}

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

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

moveObjects () {
       var p = 0
       while (p < this.numberBoxes.length) {
         var box = this.numberBoxes[p]
         if (box.y > this.boundaryY) {
           this.removeNumberBox(box)
         } else {
           box.y += this.fallingSpeed
           p++
         }
       }
     },
     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.value
       var 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 || 0
       circle.y = y || 0
       this.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 = 5
       this.heartsContainer.y = 5
       this.stage.addChild(this.heartsContainer)

       this.resetHearts()
     },
     resetHearts () {
       this.heartsContainer.removeAllChildren()
       this.hearts.length = 0
       for (var i = 0; i < this.initialLifes; i++) {
         var heart = this.rectShape(18, 18, {fillColor: 'red'})
         heart.x = i * 20
         this.heartsContainer.addChild(heart)
         this.hearts.push(heart)
       }
     },
     deduceLife () {
       this.lifes -= 1
       var 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.initialLifes
       this.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 () {
     ....
     // change
       var line = new this.createjs.Bitmap('../../static/images/line.png')
       line.y = this.boundaryY
       this.stage.addChild(line)

       this.initHearts()
    },
    resetHearts () {
       ....
       for (var i = 0; i < this.initialLifes; i++) {
         // change
         var heart = new this.createjs.Bitmap('../../static/images/heart.png')
       .... 
       }
     },
 box () {
       // change
       var 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>

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