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" 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:

CreateJS 提供的这些接口类,目的是让我们方便的在canvas上绘制各种复杂的图形图像,或者是高效的显示动画效果。

原文发布于微信公众号 - Coding迪斯尼(gh_c9f933e7765d)

原文发表时间:2017-09-19

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏我和未来有约会

[Silverlight 4 RC]RichTextBox概览

我们知道在silverlight 4 beta的时候增加了RichTextArea的控件。做过RIA开发的朋友富媒体在动态文本的表现渲染方面是很弱的。我们看到的...

1928
来自专栏web前端教室

前端面试大坑实录

找工作嘛,要面试;公司招人嘛,也要面试。你面试是答题,公司招人是出题;双方都是陌生的,怎么凑成一对呢?就要靠面试题来牵线。在这个过程中呢,自然免不了要通过面试题...

942
来自专栏HT

基于 HTML5 Canvas 的 3D 碰撞检测

这是公司大神写的一个放官网上给用户学习的例子,我一开始真的不知道这是在干嘛,就只是将三个形状图元组合在一起,然后可以同时旋转、放大缩小这个三个图形,点击“Ani...

2265
来自专栏GIS讲堂

Arcgis for Javascript之featureLayer图和属性的互操作

说明:主要实现加载FeatureLayer与显示属性表,并实现属性表与地图的联动,首先,看看实现后的效果:

5192
来自专栏练小习的专栏

闭合浮动元素

按照CSS规范,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列。因此当其高度超出包含容器时,一般父容器不...

1956
来自专栏hightopo

原 基于 HTML5 Canvas 的 3

1475
来自专栏我杨某人的青春满是悔恨

教你写个图片轮播

这是一个图片轮播的 Demo,上半部分用 CollectionView 实现,没有无限循环效果,下半部分是用 ScrollView 实现的,自动无限轮播。代码地...

1555
来自专栏竹清助手

jQuery架构设计与实现(2.1.4版本)

1434
来自专栏数据科学学习手札

(数据科学学习手札41)folium基础内容介绍

  folium是js上著名的地理信息可视化库leaflet.js为Python提供的接口,通过它,我们可以通过在Python端编写代码操纵数据,来调用leaf...

7077
来自专栏HT

基于HTML5和WebGL的碰撞测试

这是公司大神写的一个放官网上给用户学习的例子,我一开始真的不知道这是在干嘛,就只是将三个形状图元组合在一起,然后可以同时旋转、放大缩小这个三个图形,点击“Ani...

2439

扫码关注云+社区

领取腾讯云代金券