VUE+WebPack游戏设计：'乘法防线'游戏设计

望月从良

发布于 2018-07-19 18:10:42

7710

发布于 2018-07-19 18:10:42

从本节开始，我们进入新的游戏设计阶段。本次游戏设计，我们需要使用html5专有的canvas，也就是画布对象。同时为了便于在canvas上绘制图案，我们引入一个第三方库叫做CreateJS,它能帮我们管理在canvas上绘制的各种图形。

乘法防线的游戏目的是为了帮助小学生学习乘法运算法则。游戏的主要内容是，很多个盒子从天而降，盒子里面含有一个数字，在界面的底部，有两排数字按钮，玩家选择底部两个数字按钮，点击后游戏会计算玩家选中的两个按钮数值乘机，如果乘机结果跟正在下落的盒子数值一样，那么这个盒子就会爆掉，画面中那个绿色的圆圈就是盒子爆掉后显示的情形。当盒子下落超过底边防线时，游戏就结束了。

从技术上看，游戏的一大要点在于如何使用html5的canvas对象绘制图案，并且如何利用canvas接口实现绚丽的动画效果。整个游戏的开发将有赖于canvas和第三方库CreateJS,使用canvas，我们能够在页面上产生精准到像素级别的图画，并且体会到，利用canvas进行页面渲染能够有效的降低系统负载。

话不多说，上代码才是真正的王道。先创建一个WebPack项目，同时把含有CreateJS的第三方库文件easeljs-0.7.1.min.js拷贝到项目的static文件目录下，该第三方文件和所有项目代码，请到网易云课堂下载。在项目根目录下，打开index.html文件，进行如下代码修改：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <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>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>

</html>

我们先把第三方库文件加载到项目中，同时把包含在库文件中的createjs对象赋值到window对象里，后面我们开发组件时，需要从window全局对象获取createjs对象。

进入到src/components/目录，根据以往流程，我们在该目录下新建一个文件叫gamescontainer.vue,并在里面添加如下内容：

<template>
  <div>
    <header>
      <div class="row">
        <h1>Multiply Defense</h1>
      </div>
    </header>
    <section id="game" class="row">
      <game-scene></game-scene>
    </section>
  </div>
</template>

<script>
  import GameScene from './GameSceneComponent'
  export default {
    components: {
      GameScene
    }
  }
</script>

<style scoped>
  #game {
    position: relative;
    width: 300px;
    height: 480px;
    border: 1px solid black;
  }

</style>

代码逻辑在前面章节已经描述多次，这里就不复述了。真正发挥作用的，将是我们接下来要开发的组件，也就是GameScene,在components目录下新建一个文件，命名为gamescenecomponent.vue,打开后添加如下代码内容：

<template>
  <div>
    <canvas id="canvas" width="300" height="480">
    </canvas>
  </div>
</template>

template标签用来实现组件要做页面上渲染的内容，这里我们构建了一个canvas对象，并设置它的宽和高分别是300和480，所有的游戏动画特效都将依赖这个画布组件来实现，在同一个文件中增加如下代码：

<script>
 export default {
   data () {
     return {
       stage: null,
       canvas: null
     }
   },

   mounted () {
     this.canvas = document.getElementById('canvas')
     this.stage = new window.createjs.Stage(this.canvas)
     var hello = new window.createjs.Text('Hello CreateJS', '18px', 'white')
     this.stage.addChild(hello)
     this.stage.update()
   }
 }
</script>

<style scoped>
  #canvas {
    background: #333; 
  }
</style>

在组件加载时，mounted 函数会被调用，在函数里，我们先获取画布canvas的对象，并通过window对象获取前面从第三方库中拿到的createjs对象，接着我们通过new从createjs对象里构建了一个Stage对象，在构建时，把canvas对象当参数传进去。接着我们再从createjs对象里构建一个Text对象，顾名思义，它使用来在页面上显示字符串的，字符串的内容就是’Hello CreateJS’,第二个参数表示字体大小是18像素单位，第三个参数用来指定字体的颜色。上面代码运行的效果就是在页面上以白色字体，用18个像素大小的字体在页面上显示一个字符串’Hello CreateJS’。完成代码后，在项目的根目录下执行命令 npm run dev,页面会自动在浏览器中加载，然后显示出如下情形：

对CreateJS的详细文档可以从以下链接获取

代码中的Text对象是CreateJS库中的一个子类，它的作用是在页面上渲染字符串，就如例子中一样。CreateJS提供的对象接口让我们在输出字符串时，能轻易的设定字体的大小，颜色，和样式。CreateJS使用了容器化的设计思想，任何能在页面上显示的元素都必须作为容器的一部分加入到容器中，例如例子中的Stage就类似于组装所以显示元素的容器，每种显示元素都要调用addChild加入父容器，当所有要显示的内容都加入容器后，再通过调用stage.update把容器里面包含的所有要显示的要素全部渲染到页面上。

接下来我们看看如何绘制含有数字的盒子。在gamescenecomponent.vue中添加如下代码：

export default {
   data () {
     return {
       stage: null,
       canvas: null,
       boxWidth: 50,
       boxHeight: 20,
       gameWidth: 300,
       gameHeight: 480,
       createjs: null,
       numberBoxes: []
     }
   },

boxWidth和boxHeight定义了数字盒子的宽和高,numberBoxes用来存储所有数字盒子对象，接着上面代码，继续添加以下代码：

mounted () {
     this.init()
     this.generateNumberBox()
     this.stage.update()
   },

   methods: {
     init () {
       this.createjs = window.createjs
       this.canvas = document.getElementById('canvas')
       this.stage = new this.createjs.Stage(this.canvas)
     },
     rectShape (width, height, style) {
       var obj = new this.createjs.Container()
       style = style || {}
       style.strokeWidth = style.strokeWidth || 0
       style.strokeColor = style.strokeColor || 0
       style.fillColor = style.fillColor || 'rgb(255, 0, 0, 1)'

       var shape = new this.createjs.Shape()
       shape.graphics.setStrokeStyle(style.strokeWidth).beginStroke(style.strokeColor).beginFill(style.fillColor).drawRect(0, 0, width, height)
       obj.addChild(shape)
       return obj
     },
     box () {
       return this.rectShape(this.boxWidth, this.boxHeight, null)
     },
     numberBox (value) {
       var boxObj = this.box()
       var text = new this.createjs.Text(value, '24px Impact', 'red')
       text.textBaseline = 'middle'
       text.textAlign = 'center'
       text.x = this.boxWidth / 2
       text.y = this.boxHeight / 2
       boxObj.addChild(text)
       return boxObj
     },
     randomInt (min, max) {
       return Math.floor(Math.random() * (max - min + 1) + min)
     },
     generateNumberBox () {
       var value = this.randomInt(1, 12) * this.randomInt(1, 12)
       var box = this.numberBox(value)
       box.x = Math.random() * (this.gameWidth - this.boxWidth)
       box.y = 0
       this.stage.addChild(box)
       this.numberBoxes.push(box)
     }

rectShape 用来在页面绘制一个方形盒子图案，它先从createjs库中创建一个Container对象，container跟前面讲过的Stage类似，是可以用来包含显示元素的容器对象，同时定义了盒子的绘制样式style, style.strokeWidth 表示盒子的边界线宽度，style.strokeColor用来显示盒子的边界线颜色，style.fillColor用来表示盒子的填充颜色。

接着构建一个绘制对象叫Shape，这个类专门用来绘制盒子，Shape包含一个子类叫graphics，通过这个类设置前面定义的绘制样式，最后通过drawRect函数把盒子绘制到Shape对象里面，最后用addChild把绘制盒子图形的Shape对象加入Container.

numberBox接口，先是调用box接口去绘制一个方盒子图案，然后在创建一个字符串对象，设置好字符串对象的各种属性后，把它加入到rectShape返回的Container对象里，这样该对象就包含了两种先是元素，一个是正方形的盒子图案，一个是数字字符串。

generateBox接口先通过randomInt构造一个随机整数，然后把这个随机整数作为字符串绘制到方形盒子里，通过调用generateNumberBox接口后，页面上就可以渲染出一个含有数字的方盒子。

上面代码完成，并加装到浏览器后，运行效果如下：

我们可以看到顶部有一个黑色方块，里面含有一个红色的数字8，黑色方块是由rectShape函数绘制的，在generateNumberBox里，代码先通过randomInt生成随机数8，然后在numberBox里把数字8转换成字符串并绘制到rectShape构建的Container对象里，于是就形成了我们现在看到的一个黑色背景方框内有一个红色数字8.

CreateJS 有个核心类对象是DisplayObject, 代码中的Container, Shape以及后面可能要用到的Bitmap对象都属于DisplayObject: