Vue+WebPack游戏设计：自动背景贴图和游戏主循环的实现

上一节我们完成了游戏的启动界面和结束界面，本节我们进入游戏场景界面的开发。游戏的一大特点是，它有丰富的背景图案，本节我们看看如何动态的去创建游戏场景的背景图案。

在实现动态背景贴图之前，我们看看静态贴图是怎么做的。在项目代码的component路径下新建一个文件叫gamescenecomponent.vue,打开该文件，编写如下代码：

在template标签中，我们用来设计组件的界面，在里面我们添加了很多个具有tile属性的div元素，tile属性后面带有数字，不同的数字对应着不同的背景图片， div元素带有style属性，其中包含了translate3d的位置变换，我们通过设置该属性的x 和 y坐标值，用于确定div元素在页面上显示的位置，由于每个div元素对应一张背景图，于是上面的代码就相当于在页面的不同位置贴上相应的图片，多张图片组合在一起就形成了一个统一的背景。

上面代码加载进浏览器后，运行效果如下：

这里写图片描述

这种贴图办法就是静态贴图，背景图片的显示需要一行行代码来实现，这种做法很不科学和经济，倘若游戏的背景非常复杂的话，我们需要手写很多行代码才能实现，另外如果背景需要改动，那么我们必须在很多行代码中做相应修改，这么一来不但工程量很大，而且极容易出错。

下面我们看看，如何依赖VUE给我们提供的机制，方便快速的通过代码实现动态贴图。首先把template标签里面的代码删除，改成如下代码：

VUE给我们听过了for循环机制，代码中v-for="tile in tiles"的意思是，从一个叫tiles的数组中取出它的每个元素，并把取出的元素命名为tile,数组tiles中含有几个元素，for循环就进行几次，假设tiles数组中含有三个元素的话，for循环执行三次，在for所在的div标签下，就会动态生成三个子div对象。tiles是来自组件的内部变量，一会我们会加以定义。

tiles是一个数组，它的包含的元素是一个Object对象，这个对象含有两个属性，一个属性叫class, 另一个属性叫style, 其中:class 和 :style是VUE给我们提供的指令，它能将html元素的class属性和style属性进行动态的绑定。结合前面代码，你或许可以猜出，tile.class 的内容应该将类似于"tile tile-1"，this.style的内容将类似于"transform: translate3d(100px, 100px, 0)"。

在script标签中添加如下代码：