VUE+WebPack游戏设计：欲望都市,构建类RPG游戏的开发

本节开始，我们将基于上一个项目所学到的知识，利用createjs 和 Tween两个图形绘制库开发一款新的游戏，名为欲望都市。这个游戏具备一个特点就是2.5D,它是一种经济系统构建型游戏，开始时玩家得到的是一个空白的城市地图，玩家以市长的身份选择在城市中构建各种设施，通过不同设施的组合何以产生金币，基本情况如下：

这里写图片描述

玩家可以在每一个小格配置一种建筑，总共可以有三种建筑可以选择，一种是电厂，建造电厂可以增加人口，有了人口才能建造其他建造，依据上图，黄色带有闪电标识的建筑就是电厂，第二种建筑胶钱币工厂，有了这种建筑，城市才会有收入，但是建筑钱币工厂会消耗人口，右上角的标识意思是当前城市可以容纳70人口，其中50个人口已经被钱币工厂消耗掉了。第三种建筑是商店，有了商店就可以使用金币购买钻石，玩家的任务是配置三种建筑，最终使得城市具有的金币和钻石数量最大化，三种可供选择的建筑如下：

这里写图片描述

选取其中一种建筑后，就可以通过鼠标把建筑拖拽到城市土地的小格子中，建筑的建造过程跟‘红警’类似，经过一系列形态变化后才最终形成相应模样，因此玩起来时也是饶有趣味。

在游戏开发时，我们把整个设计分成三部分，一部分叫背景图层，第一张图中，蓝色的背景加上飘动的云朵就是背景图层；第二部分叫城市图层，最上图中中间部分，用来配置各种建筑图案区域就是城市图层，第三部分叫UI图层，第一张图中，画面上的各种按钮，标志，例如右上角的人口数量标志，右下角的按钮，左上角的钱币数量标志和钻石数量标志，他们合在一起形成了UI图层，整个游戏的开发将分别处理三个图层，然后再通过底层逻辑把三个图层整合成一个整体。

首先我们先动手开发背景图层的功能。先像以前项目一样启动一个新的VUE工程，然后在index.html里面把createjs和tween这两个库引入项目，代码如下：

接着再components目录中，创建gamecontainer.vue这个容器组件，它的内容跟上一个项目一样，这里就不详述了，我们看看gamecomponent.vue的代码实现，首先我们需要给页面添加一个canvas控件，因为所有的游戏动画都需要绘制在canvas控件上:

接着我们实现游戏的逻辑代码，由于我们先实现背景图层，游戏的背景是一个大蓝天，同时有两朵白云动态的从右边慢慢飘向左边，因此我们要实现这个动画效果，首先我们设置组件的内部数据：