VUE+WebPack游戏设计：'乘法防线'游戏设计
Posted Coding迪斯尼
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VUE+WebPack游戏设计：'乘法防线'游戏设计相关的知识，希望对你有一定的参考价值。
更详细的讲解和代码调试演示过程，请点击’阅读原文’
从本节开始，我们进入新的游戏设计阶段。本次游戏设计，我们需要使用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" ></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:
CreateJS 提供的这些接口类，目的是让我们方便的在canvas上绘制各种复杂的图形图像，或者是高效的显示动画效果。
游戏的内容介绍和开发的第一步骤先介绍到这，下一节我们进入游戏主循环的开发中。更详细的讲解和代码调试演示过程，请点击’阅读原文’
以上是关于VUE+WebPack游戏设计：'乘法防线'游戏设计的主要内容，如果未能解决你的问题，请参考以下文章
vue webpack 编译 遇到错误TypeError: this._init is not a function
在webpack下使用vue3 无法引入单文件的vue组件问题