VUE＋WebPack前端游戏设计：实现物体的拖拽动态特效

上一节，我们介绍了太空版植物大战僵尸游戏的整体情况，并详解了如何建立游戏的基本框架，本节我们实现游戏中，道具的动态拖动特效，完成本节代码后，大家可以实现以下效果：

玩家先在底部的按钮中选择点击某个按钮，点击后图中的黄色方框会显示在页面上，这个方框是动态的，它会在指定位置一放一缩。当玩家在页面上移动鼠标时，方框会跟着鼠标移动，它会落入到鼠标所在的白色方块中。当玩家选定方块后，点击鼠标，那么在相应方块里就会出现对于的道具。道具的种类是根据玩家在底部点击哪个按钮决定的，接下来我们看看实现代码。

首先打开gamescenecomponent.vue,首先我们要创建一个二维数组来对应页面上的白色方框网格，在文件里添加如下代码：

该函数会根据给定参数，创建一个二维数组，数组中每个元素对应传入的初始值。接着我们添加用于创建道具图像的代码：

building()函数先通过createjs库创建一个图片容器，接下来的几个函数satellite(),satellite2(),castle(),castle2(),spacejunk()分别从assetsLib函数库中调用相关接口，导出对应的图片数据。例如在satellite()函数中，它会从资源库创建一个卫星素材资源，并把它添加到building()函数返回的资源容器中，它创建的图片素材如下：

也就是说，代码语句new this.assetsLib.Satellite()创建的就是上面显示的图片素材。接着我们调用cache接口把图片缓存在内存里，下次再显示时，我们不用重新加载，其中变量hp表示该道具的能量值，一旦能量耗尽后，它就会从页面上消失，cost表示要建造这个道具需要损耗多少能源。其他几个函数的逻辑以此类似。

现在我们回到board函数，这个函数是创建的图层就是用来显示各种道具的。我们在该函数中添加如下代码：

新增的代码中，selection对应我们上图中那个黄色方框。接着调用create2DArray函数构建一个二维数组，用来对应页面上的白色网格方框，最后我们添加两个响应函数，用来对应鼠标在页面上的移动和点击。

当用户点击底部某个按钮，选择一件道具后，他会挪动鼠标，然后点击。当鼠标点击时，我们需要根据鼠标所在的坐标，判断当前鼠标落入了哪个网格，确定网格后，我们需要计算网格在页面上的坐标，然后把选中的道具图片素材显示到指定网格里。于是我们添加两个函数，用来根据鼠标坐标来确定鼠标所在的网格：

这两个函数的逻辑不重要，大家只要知道他们的作用是根据鼠标坐标确定网格位置即可。一旦玩家在页面上点击鼠标后，我们就需要把对应的道具素材图片加载到指定位置了，为了完成这个功能，我们添加如下代码：

addBuildingAtTile()函数的作用是，根据输入参数buildingClass,创建相应的道具图片素材对象，然后根据传入的row,col两个参数，调用前面说过的两个坐标转换函数，确定道具图片要显示的网格，然后把图片显示到页面的指定位置。它先调用getBuilding()接口获取道具图片对象，getBuilding()根据输入的道具名称，调用对应的函数将道具图片素材加载到程序内存里，this.boardLayer.addChild(sprite)这句代码执行后，图片就会显示到页面上了。同时我们把道具图片对象存储在二维数组buildingMap中，这样我们在下次显示图片时，通过该数组就可以判定对应的位置是否已经被占据了。

当玩家点击页面底部按钮是，我们就能确定用户想创建哪种类型的道具，我们看看鼠标点击的响应代码后鼠标移动的响应代码：

onStageMouseMove (e) { if (!this.boardLayer.isAddingBuilding) { return } var pos = this.boardLayer.globalToLocal(e.stageX, e.stageY) var rowCol = this.screenToRowCol(pos.x, pos.y) pos = this.rowColToScreen(rowCol.row, rowCol.col) this.boardLayer.selection.visible = true this.boardLayer.selection.x = pos.x this.boardLayer.selection.y = pos.y }, onStageClick (e) { if (!this.boardLayer.isAddingBuilding) { return } var pos = this.boardLayer.globalToLocal(e.stageX, e.stageY) var rowCol = this.screenToRowCol(pos.x, pos.y) var row = rowCol.row var col = rowCol.col if (row < 0 row >= this.boardLayer.rows col < 0 col >= this.boardLayer.cols) { return } if (this.boardLayer.buildingMap[col][row] === undefined) { this.addBuildingAtTile(this.boardLayer.upcomingBuildingType, col, row) this.boardLayer.isAddingBuilding = false this.boardLayer.selection.visible = false } }

当鼠标在页面移动时，OnStageMouseMove会被调用，它先判断当前是否运行道具拖拽到页面上，如果可以，那么它通过globalToLocal,screenToRowCol,两个函数将当前鼠标所在的位置转换为对应的白色网格，然后将黄色方框显示到页面上。前面我们讲过selection对应的就是黄色方框图片素材，把它的visible属性设置成true之后，他就可以在页面上显示了。

当玩家在页面上选定位置点击鼠标后，onStageClick()函数会被调用。它先进鼠标所在的坐标转换成对应的白色网格，然后通过buildMap二维数组判断当前网格是否已经有道具占据了，如果没有，它就调用addBuildingAtTile函数将道具图片显示在指定网格。

最后我们看看代码如何处理用户点击底部按钮，相应的处理代码如下：

在setHud()函数中，它先获取底部按钮的对象，也就是addButtons数组，然后为每个按钮对象设立鼠标点击时的响应函数，这个相应函数就是addButtonOnMouseDown,在后者的实现中，它先获得当前被点击按钮的对象，然后通过dataset获得按钮的”data-set”属性。回忆上一节代码，每个按钮实际上就是一个超链接对象:

它有一个附带属性叫data-type，该属性的值是一个字符串，这个字符串决定了该按钮对应哪种道具，在addButtonOnMouseDown函数里，通过dataset.type这个字段获取了属性对应的内容，以此代码就能确定用户想在页面上显示哪种道具。函数判断当前玩家是否有足够的资源创建该道具，如果资源足够，函数就调用readyToPlaceBuilding()函数把要创建的道具名称记录下来，然后当用户在页面上移动鼠标或点击鼠标时，相应代码就根据存储的信息将相应道具的素材图片显示到相应位置。

上面代码完成后，我们就可以实现道具在页面上的动态拖拽特效了