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

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

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

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

create2DArray (rows, cols, initialValue) {
 var array = []
 for (var i = 0; i < rows; i++) {
 array[i] = []
 for (var j = 0; j < cols; j++) {
 array[i][j] = initialValue
 }
 }
 return array
 },

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

building () {
 var b = new this.cjs.Container()
 b.cost = 0
 return b
 },
 satellite () {
 var b = this.building()
 b.addChild(new this.assetsLib.Satellite())
 b.cache(-50, -50, 100, 100)
 b.hp = 150
 b.cost = 30
 return b
 },
 satellite2 () {
 var b = this.building()
 b.addChild(new this.assetsLib.Satellite2())
 b.cache(-50, -50, 100, 100)
 b.hp = 150
 b.cost = 600
 return b
 },
 castle () {
 var b = this.building()
 b.addChild(new this.assetsLib.Castle())
 b.hp = 300
 b.shield = 5
 b.damageDeal = 2
 b.attackSpeed = 120
 return b
 },
 castle2 () {
 var b = this.building()
 b.addChild(new this.assetsLib.Castle2())
 b.cache(-50, -50, 100, 100)
 b.hp = 300
 b.shield = 10
 b.damageDeal = 10
 b.attackSpeed = 200
 return b
 },
 spaceJunk () {
 var b = this.building()
 b.addChild(new this.assetsLib.SpaceJunk())
 b.hp = 60
 b.cost = 5
 return b
 },

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

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

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

Board () {
 ....
 // change here
 // selection对应的就是黄色方框
 board.selection = new this.assetsLib.Selection()
 board.addChild(board.selection)
 board.selection.visible = false
 // 创建二维数组对应页面上的白色网格
 board.isAddingBuilding = false
 board.buildingMap = this.create2DArray(board.cols, board.rows)
 // 让舞台容器响应鼠标移动和点击事件
 this.stage.on('stagemousemove', this.onStageMouseMove)
 this.stage.on('stagemouseup', this.onStageClick)
 return board
 },

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

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

screenToRowCol (x, y) {
 var col = Math.floor(x / this.tileWidth)
 var row = Math.floor(y / this.tileHeight)
 return {col: col, row: row}
 },
 rowColToScreen (row, col) {
 var x = this.tileWidth * (col + 0.5)
 var y = this.tileHeight * (row + 0.5)
 return {x: x, y: y}
 },

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

getBuilding (buildingClass) {
 if (buildingClass === 'SpaceJunk') {
 console.log('build SpaceJunk')
 return this.spaceJunk()
 }
 if (buildingClass === 'Satellite') {
 console.log('build Satellite')
 return this.satellite()
 }
 if (buildingClass === 'Satellite2') {
 return this.satellite2()
 }
 if (buildingClass === 'Castle') {
 return this.castle()
 }
 if (buildingClass === 'Castle2') {
 return this.castle2()
 }
 return null
 },
addBuildingAtTile (buildingClass, col, row) {
 var sprite = this.getBuilding(buildingClass)
 this.boardLayer.addChild(sprite)
 var pos = this.rowColToScreen(row, col)
 sprite.x = pos.x
 sprite.y = pos.y
 sprite.row = row
 sprite.col = col
 this.boardLayer.buildingMap[col][row] = sprite
 }

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函数将道具图片显示在指定网格。

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

addButtonOnMouseDown (e) {
 if (this.cjs.Ticker.getPaused()) {
 return
 }
 var buildingType = e.target.dataset.type
 var cost = this.getBuildingCostByType()
 if (this.energies >= cost) {
 this.energies -= cost
 this.buildingType = buildingType
 this.readyToPlaceBuilding(buildingType)
 }
 },
 setHud () {
 var addButtons = document.querySelectorAll('.add-button')
 this.livesSpan = document.getElementById('lives')
 this.energiesSpan = document.getElementById('energies')
 this.wavesSpan = document.getElementById('waves')
 console.log(this.addButtonOnMouseDown)
 for (var i = 0, len = addButtons.length; i < len; i++) {
 var button = addButtons[i]
 button.onmousedown = this.addButtonOnMouseDown
 }
 },
 ....
 readyToPlaceBuilding (type) {
 console.log('ready to place building')
 this.boardLayer.upcomingBuildingType = type
 this.boardLayer.isAddingBuilding = true
 },

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

<a></a>

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

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

更详细的讲解和代码调试演示过程，请点击链接:http://study.163.com/provider-search?keyword=Coding%E8%BF%AA%E6%96%AF%E5%B0%BC